Fluid Dynamics

Component 60

About

You can adjust all the physics parameters, visual settings, and interaction modes without modifying the component code.

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

Code

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

Usage.tsx

import { FluidDynamics } from "@/components/ui/fluid-dynamics";

const settings = {
  strength: 100,
  radius: 1,
  iterations: 3,
  viscosity: 0.0,
  diffusion: 0.0,
  showDensity: true,
  showVelocity: false,
  addDensity: true,
  addVelocity: true,
  animate: true,
  circle: true,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <main className="h-screen w-screen">
      <FluidDynamics
        strength={s.strength}
        radius={s.radius}
        iterations={s.iterations}
        viscosity={s.viscosity}
        diffusion={s.diffusion}
        showDensity={s.showDensity}
        showVelocity={s.showVelocity}
        addDensity={s.addDensity}
        addVelocity={s.addVelocity}
        animate={s.animate}
        circle={s.circle}
      />
      <span className="pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
        Fluid Dynamics
      </span>
    </main>
  );
}