Heat Field, animated React component

A field of grey dots that melts into a heat map under the cursor, swelling and blending from yellow through red to violet. Press and hold to leave heat behind that slowly cools.

Pro
Background Effects
Hover

Play with it

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

Move across the dots. Press and hold to leave heat behind.

Props

Prop	Type	Default	What it does
radius	number	46	Spread of the heat around the pointer in px; held heat spreads a little wider.
hint	string	"Move across the dots. Press and hold to leave heat behind."	Line under the field. Pass an empty string to hide it.
autoplay	boolean	false	An invisible hand wanders across the field, now and then pressing, until someone points at it.

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/heat-field
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
heat-field/
heat-field.tsx
index.ts
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

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

// app/page.tsx
import { HeatField } from "@/components/heat-field";

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

HeatHeat Field, animated React component

Play with it

Props

More background effects

Heat Field, animated React component