Cappen Fluid Simulation
A WebGL fluid field laid over a hard typographic hero. Pointer velocity splats into a GPU dye simulation, the display pass thresholds it into an ink mask, and idle currents keep the canvas alive even before interaction. Three.js render targets, scoped to a React component.
npx shadcn@latest add @compronents/cappen-fluid-simulationInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | string[] | ["Fluid System In", "Constant Field", "Of Interaction"] | Three hero lines rendered behind the fluid layer. |
| navLinks | { label: string; href: string }[] | works / about / updates / start a project | Optional mono navigation row. |
| inkColor / background / textColor | string | "#ffffff" / "#ffffff" / "#000000" | Color system for the ink pass and page layer. |
| simResolution / dyeResolution | number | 256 / 1024 | Render target resolution for velocity and dye fields. |
| curl / forceStrength / splatRadius | number | 50 / 8.5 / 0.3 | Fluid behavior controls. |
headlinetupleThree uppercase lines arranged left, right, and center.
inkColor / blendModecolorThe shader output color and the CSS compositing mode used over the typography.
curl / forceStrengthtextSimulation energy controls: vortex pull and pointer velocity injection.
three