Mesh Net, animated React component

A distorted triangle net that hides in the dark until the cursor comes near. Nodes are shoved outward on springs, overshoot a little as they settle, and the edges light up like a torch passing over them, then fade out again with distance.

Pro
Background Effects
Hover
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

Prop	Type	Default	What it does
color	string	"#5b4fe0"	Colour of the lit edges, as a 6-digit hex.
background	string	"#000000"	Colour the canvas is cleared to.
gridSize	number	64	Spacing between nodes, in px.
distortion	number	0.5	Random offset of each node, as a fraction of the spacing (0 to 0.5).
revealRadius	number	230	Radius around the pointer where the net shows and reacts, in px.
push	number	30	How far nodes are shoved away from the pointer, in px.
autoplay	boolean	false	A ghost pointer drifts in a slow loop until a real pointer arrives. Pauses off screen and never runs under reduced motion.
className	string	—	Extra classes for the wrapper.
children	ReactNode	—	Content layered above the net.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/mesh-net
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
mesh-net/
index.ts
mesh-net.tsx

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { MeshNet } from "@/components/mesh-net";

export default function Page() {
  return (
    <main>
      <MeshNet />
    </main>
  );
}

Mesh Net, animated React component

Play with it

Props

More background effects