A full-screen, animated hero background that renders a subtle grid overlay and drifting radial glow blobs using HTML Canvas, React, and Framer Motion for a futuristic, immersive effect.
import GridGlowBackground from "@/components/ui/grid-glow-background"; const settings = { backgroundColor: "#0a0a0a", gridColor: "rgba(255, 255, 255, 0.05)", gridSize: 50, glowCount: 10, }; export default function Demo(props: Partial<typeof settings>) { const s = { ...settings, ...props }; return ( <div className="h-screen w-screen"> <GridGlowBackground backgroundColor={s.backgroundColor} gridColor={s.gridColor} gridSize={s.gridSize} glowCount={s.glowCount} > <span /> </GridGlowBackground> </div> ); }