Interactive Dot Grid Hero

Heroes 66

About

Cinematic hero section with a Canvas-rendered dot grid that reacts to cursor proximity, with particles that scale, brighten, and spring back to rest.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Interactive Dot Grid Hero to your project and fits it to your theme.

Code

How Interactive Dot Grid Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DotGridHero } from "@/components/ui/dot-grid-hero";

const settings = {
  interactionRadius: 120,
  repulsionStrength: 7,
  springK: 0.065,
  damping: 0.8,
  dotGap: 72,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <DotGridHero
        interactionRadius={s.interactionRadius}
        repulsionStrength={s.repulsionStrength}
        springK={s.springK}
        damping={s.damping}
        dotGap={s.dotGap}
      />
    </div>
  );
}