Dot Spotlight Hero

Interactive dot grid hero background extracted from the Vandoko AI site. Mouse movement creates a luminous comet trail that maps velocity to color — cyan at rest, azure at speed. Canvas-based for 60fps performance with quadratic distance falloff and additive screen blending.

Installation

Usage

import { VdkDotSpotlight } from "@/components/vdk-dot-spotlight";

export default function HeroSection() {
  return (
    <VdkDotSpotlight className="min-h-[600px]" spotlightRadius={150}>
      <div className="flex h-full items-center justify-center">
        <h1 className="text-5xl font-bold">Your headline here</h1>
      </div>
    </VdkDotSpotlight>
  );
}

Props

Features

• Canvas rendering — 60fps dot trail via Canvas 2D API with DPR scaling
• Velocity color mapping — Cyan (186°) at rest → azure (225°) at speed
• Static dot grid — CSS radial-gradient base layer with oklch muted-foreground
• Screen blend — Additive color blending for natural glow
• Responsive — ResizeObserver keeps canvas matched to container
• Zero dependencies — Only React, no animation libraries needed

Lineage

Modifications

• Extracted from vandoko-ai-site DotSpotlightBg component
• Exported props interface as VdkDotSpotlightProps
• Static dot grid converted from hsl() to oklch() token
• Renamed component to VdkDotSpotlight for registry namespace