A responsive, animated hero background built with Three.js using InstancedMesh and post-processing effects (Unreal Bloom + RGB Shift). Ideal for landing pages, hero sections, and visual effects.
import AiHeroBackground from "@/components/ui/ai-hero-background"; const settings = { cols: 120, rows: 120, spacing: 0.6, dotRadius: 0.03, jitter: 0.3, hexOffset: 0.5, }; export default function Demo(props: Partial<typeof settings>) { const s = { ...settings, ...props }; return ( <div className="h-screen w-screen relative bg-black"> <AiHeroBackground {...s} /> </div> ); }