A WebGL-powered animated fluid background with procedural noise, chromatic glint highlights, dynamic lighting, and film grain.
import ChromaticFluid from "@/components/ui/chromatic-fluid"; const settings = { flowStrength: 0.8, speed: 0.4, contrast: 1.1, grain: 0.04, }; export default function Demo(props: Partial<typeof settings>) { const s = { ...settings, ...props }; return ( <div className="h-screen w-screen"> <ChromaticFluid flowStrength={s.flowStrength} speed={s.speed} contrast={s.contrast} grain={s.grain} height="100%" /> </div> ); }