Components
Loading preview...
You can adjust all the physics parameters, visual settings, and interaction modes without modifying the component code.
npx shadcn@latest add https://21st.dev/r/designali-in/fluid-dynamicsimport { FluidDynamics } from "@/components/ui/fluid-dynamics";
export default function DemoOne() {
return (
<main className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
<FluidDynamics
strength={100}
radius={1}
iterations={3}
viscosity={0.0}
diffusion={0.0}
showDensity={true}
showVelocity={false}
addDensity={true}
addVelocity={true}
animate={true}
circle={true}
/>
<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>
)
}