Components
Interactive Dot Grid Hero
Cinematic hero section with a Canvas-rendered dot grid that reacts to cursor proximity, with particles that scale, brighten, and spring back to rest.
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>
);
}