Chromatic Fluid

Heroes 52

About

A WebGL-powered animated fluid background with procedural noise, chromatic glint highlights, dynamic lighting, and film grain.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chromatic Fluid to your project and fits it to your theme.

Code

How Chromatic Fluid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}