Backgrounds & Effects
Canvas Fractal Grid
Interactive canvas dot grid hero background for React and shadcn/ui with animated gradients, noise, glow, and performance presets.
Updated
Configurable CanvasFractalGrid
Configuration
CanvasFractalGrid is a canvas-rendered React background component for shadcn/ui, animated with Motion. Use it as a hero or section background on landing pages and product sites.
Installation
pnpm dlx shadcn@latest add @cult-ui/canvas-fractal-grid
Usage
function CanvasFractalGridExample() {
return (
<div className="grid h-screen w-full pl-[56px] relative">
<CanvasFractalGrid
dotSize={3}
dotSpacing={20}
dotOpacity={0.4}
gradientAnimationDuration={6}
waveIntensity={60}
waveRadius={250}
enableGradient={true}
enableMouseGlow={true}
enableNoise={true}
/>
</div>
);
}
export default CanvasFractalGridExample;