Kinetic dots
A compact, single-draw WebGL shader for website backdrops, hero accents, cards, and product moments. It caps pixel density, avoids textures, respects reduced motion, and pauses when offscreen.
npx shadcn add @bjork-ui/shader-kinetic-dots
import { WebsiteShaderCanvas } from "@/components/bjork-ui/shaders/website-shader";export function HeroBackdrop() { return ( <WebsiteShaderCanvas preset="kinetic-dots" className="h-[420px] w-full rounded-2xl" maxPixelRatio={1.35} maxCanvasPixels={620000} /> );}
A hover-reactive cell field that fills the trail behind the pointer.