Hero

Noise Dot Field Hero

A canvas-rendered hero block. A dense dot grid is displaced by a sine-wave noise field and parts smoothly around the cursor with a falloff pocket. Honors `prefers-reduced-motion`, devicePixelRatio-aware, and ships with zero external animation deps beyond `motion`.

UniqueUI CLI

npx uniqueui add hero-noise-dot-field

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/hero-noise-dot-field.json -y

Preview

Field · 0x004

Engineered, down to the pixel.

A canvas-rendered dot grid that displaces with a sine-wave noise field and parts around your cursor. No external animation deps.

Usage

import { NoiseDotFieldHero } from "@/components/ui/hero-noise-dot-field";

export default function Demo() {
  return <NoiseDotFieldHero />;
}

Scenarios

Dense field

Tighter grid spacing for a denser look.

import { NoiseDotFieldHero } from "@/components/ui/hero-noise-dot-field";

export default function Dense() {
  return <NoiseDotFieldHero backgroundProps={{ spacing: 18, pocketRadius: 220 }} />;
}

Tinted dots

Pass any CSS color to recolor the dot field.

import { NoiseDotFieldHero } from "@/components/ui/hero-noise-dot-field";

export default function Tinted() {
  return (
    <NoiseDotFieldHero backgroundProps={{ color: "rgba(110, 231, 183, 0.85)" }} />
  );
}

Background only

Layer the canvas behind a different composition.

import { NoiseDotFieldBackground } from "@/components/ui/hero-noise-dot-field";

export default function BgOnly() {
  return (
    <section className="relative isolate min-h-screen">
      <NoiseDotFieldBackground />
      <div className="relative">…</div>
    </section>
  );
}

Props

Prop	Type	Description
`children`	`ReactNode`	Slotted hero content. Omit for the default headline + CTAs.
`className`	`string`	Classes for the outer `<section>`.
`backgroundProps`	`{ spacing?: number; color?: string; pocketRadius?: number; className?: string }`	Forwarded to the canvas background layer.