Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Lightweight 2D fluid sim — drag injects coloured ink + velocity; the velocity field self-advects and dissipates; the dye flows along the velocity and fades. Renders to a host canvas. Produces the "wet paint trail along drag path" look used by gestural carousels and editorial sites. Requires `EXT_color_buffer_float` for RGBA16F render targets — fails loud on incompatible browsers rather than banding into RGBA8.
Type fluidSimCategory effectsContext sharedDynamic ports noCompound no
Inputs
| Port | Type | Description |
|---|---|---|
splatX | float | Splat centre X in host pixels. Wire from `pointer.x` (or any pixel coordinate source). |
splatY | float | Splat centre Y in host pixels. |
splatVx | float | Velocity injected with each splat. Wire from `dragVelocity.dx` for drag-driven flow. |
splatVy | float | Velocity injected with each splat (Y axis). |
splatColor | color | Ink colour added to the dye field on each splat. Wire from `paletteLut.color` for per-section ink. |
splatStrength | float | 0..1 multiplier on the splat. 0 = skip the splat pass entirely (no paint added). The simulation still runs (existing dye continues to flow + dissipate). |
splatRadius | float | Gaussian sigma of the splat in host pixels. Larger = softer, broader strokes. Default 30. |
velocityDissipation | float | Per-second retention of the velocity field. 1 = velocity persists (chaotic). 0.5 = halve every second (default). 0 = velocity zeroes instantly each frame. |
dyeDissipation | float | Per-second retention of paint. 1 = paint stays forever. 0.95 = slow fade (default). Lower for ephemeral trails. |
opacity | float | Final-blit opacity [0..1]. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | CSS selector for the host element. The simulation canvas mounts inside as a position:absolute child filling the host. |
simResolution | int | 256 | Internal simulation grid size (cells, square). 256 = good default. Lower = faster + softer; higher = sharper detail at GPU cost. The display canvas is independent — it always fills the host and upsamples bilinearly. min 32; max 1024 |
Use cases
- Carousel paint trail — wire `pointer.x/.y` into `splatX/splatY`, `dragVelocity.dx/.dy` into `splatVx/splatVy`, `dragVelocity.magnitude` into `splatStrength`, and a `paletteLut.color` into `splatColor` for per-section ink.
- Cursor-following ink — same pattern but `splatStrength` driven by an `expression` like `magnitude > 50 ? 1 : 0` so the ink only appears on fast cursor moves.
- Wheel-momentum smear — wire `wheelGesture.burstMagnitude` into `splatStrength` so the field reacts to scroll bursts.
- Static reactive ambient — keep `splatStrength` low (e.g. 0.05) and `splatRadius` large for slow ambient swirls.
Related nodes
Envelope
Use fluidSim as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-effects/