Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Visual effects: WASM/GPU filter chains, parametric shape generation, glitch computation, FLIP layout animation, and morph path interpolation.
Category key effectsGenerated public nodes 15Registry source faster-motion-docs/node-registry.json
Nodes
| Node | Type | Context | Description |
|---|---|---|---|
| Effect Pass | effectPass | shared | Single-pass shader effect on any `<img>`/`<video>`/`<canvas>` source — driven by the shared `EFFECT_REGISTRY` so 27+ effects are available with no per-effect graph node. Pick the effect by name; the matching shader compiles at bind, and the effect's uniforms become wireable input ports automatically. Includes the post-effect classics (vignette, filmGrain, rgbShift, chromaticAberration, scanlines, glitch, swirl, ripple, halftone, …) and two new ones (`chromaticAberration`, `verticalSlice`) added for fluid-carousel and lens-aberration looks. |
| Flip | flip | dom | FLIP layout animation — triggered on rising edge |
| Fluid Sim | fluidSim | shared | 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. |
| Glitch Compute | glitchCompute | dom | Stateful random glitch — outputs offset, skew, and opacity |
| Glyph Geometry | glyphGeometry | shared | Shared text-outline geometry source. F381 P2.1. Emits typed vertex buffers + bbox + bodyCenter from `text + fontFamily + fontSize + fontWeight` once at init (static). Wire the outputs into BOTH `softMesh.geometrySource` (visible deformable mesh, P2.3) AND `physicsStaticBody{kind:fromGeometry}` (rigid collider, P2.2) so the visible mesh and rigid collider are aligned by construction — kills the entire class of "physicsTextOutline.radius drifted from physicsSoftText.radius" bugs that the legacy paired-node pattern required authors to avoid by hand. Uses the same WASM glyph extractor pipeline as the legacy nodes (rustybuzz + ttf-parser → earcut), so geometry is bit-identical to what a softMesh with `geometrySource:textOutline` would produce. |
| Mesh Attractor | meshAttractor | shared | Fullscreen WebGL mesh with per-vertex displacement driven by up to two mouse attractors. Generates a tessellated 2D silhouette (`round` / `spike` / `blob`) — or accepts a custom `[x0,y0,...]` vertex array for arbitrary shapes (hearts, SVG-imported, text-derived). Falloff curve is selectable (gaussian / linear / smoothstep / inverse-square). F375 channels-driven authoring: every input (mouseX/Y, coef, jump, dist, opacity, colour, …) is a *channel* — author it as a literal value (`{ value: ... }`) for static settings or as a wireable port (`{ port: true, default?: ... }`) to feed it from upstream. Channels not declared in `params.channels` use the per-node default and surface no port handle, so simple cases need no wiring at all. |
| Parametric Shape | parametricShape | canvas | WASM parametric shape generation with dynamic children. |
| Particle Emitter | particleEmitter | canvas | Particle system — emit, advance, kill. Outputs per-particle data as AttributeBundle. |
| Particle Update | particleUpdate | canvas | Particle update boundary — advances particle state from emitter output each frame. |
| Shape Geometry | shapeGeometry | shared | Shared non-text geometry source. F381 P2.1. Companion to `glyphGeometry` — emits the same typed-port output shape from any non-text `geometrySource` kind: `round` / `spike` / `blob` / `svgPath` / `clipPath` / `rawVertices`. Use the same generators as `meshAttractor`'s geometrySource param. Pair its outputs with `softMesh.geometrySource` + `physicsStaticBody{kind:fromGeometry}` so visible blob silhouette + rigid bowl collider stay aligned by construction (kills the legacy `physicsBlob` + `physicsBowlFromBlob` drift bug class). |
| Soft Mesh | softMesh | shared | Sim-only soft-body mesh. F381 P1.1. Owns a verlet ring simulator (edge springs + position-anchored shape match + body wrap/dent + cursor Gaussian press) and emits the deformed mesh through typed graph ports — NOT a sim-handle reference. Renderers consume `vertices`, `subpathStarts`, `sharpFlags`, and `bodyCenterX/Y` to draw the mesh without ever touching the sim object directly (F311 graph-native data flow). **Geometry source** (param `geometrySource`) accepts every kind the meshAttractor catalogue does: `round` / `spike` / `blob` / `svgPath` / `textOutline` / `clipPath` / `rawVertices`. `textOutline` produces multi-glyph rings (one ring per character outer contour with hole topology preserved). All other kinds produce a single ring. Single node handles all rest-shape kinds. **Cursor force gate**: pushes balls within `mouseSigma` of cursor when (a) cursor is in the Gaussian zone of the rest pose AND (b) cursor is moving (smoothing-invariant 6-frame ring activity check, F381 P0.2). Frame walker honours the world's `frameSelector` directly (F381 P0.1) — no `[data-fm-physics-frame]` HTML attribute required. |
| Soft Mesh Debug Render | softMeshDebugRender | shared | Second renderer type for softMesh — F381 P1.5. Proves the typed-port output of `softMesh` is renderer-agnostic by consuming the IDENTICAL set of typed ports as `softMeshRender` (vertices, subpathStarts, sharpFlags, bodyCenterX/Y) but rendering a STROKED outline instead of a filled subpath. Also consumes `restVertices` for an optional rest-pose ghost overlay underneath the live outline — useful as a debug aid to see how far the live silhouette has drifted from its rest pose. Wire one softMesh into both renderers (softMeshRender for fill, softMeshDebugRender for outline / rest ghost) and you have a fill + wireframe debug view from a single sim, demonstrating that swapping renderers requires zero changes to the sim. |
| Soft Mesh Render | softMeshRender | shared | Canvas2D overlay renderer for a softMesh. F381 P1.2. Consumes the mesh through typed input ports — `vertices`, `subpathStarts`, `sharpFlags`, and `bodyCenterX/Y`, all wired from the linked `softMesh` outputs. No sim-handle / DOM-ref side channels: this node never touches the sim object directly (F311 graph-native data flow). Mounts a `<canvas>` overlay inside the host resolved from this node's `selector` param (required — set it to the same selector as the linked softMesh). Translates body coords to host-local px by anchoring `bodyCenterX/Y` to the live host centre, so the rendered mesh stays glued to the host even when the underlying physics world frame moves independently (scroll-deck layouts where the world frame lives off-screen while the host scrolls into view). Draws closed subpaths with mixed `lineTo` (sharp corners) / `quadraticCurveTo` (smooth curves through edge midpoints), filled with the author's colour. **Multiple renderers can wire to one softMesh** — e.g. a main fill plus a debug ghost overlay with different opacity / colour / selector. The simulator computes once; renderers each draw their own canvas. |
| Textured Mesh Tile | texturedMeshTile | shared | Subdivided WebGL plane that samples a bound `<img>` or `<video>` texture and accepts the same per-attractor vertex displacement as `meshAttractor`. Adds a wireable global `offset` port for velocity-driven shifts (drag-carousel stretch, scroll-velocity skew). Tint port allows `paletteLut.color` to recolour the tile while the texture provides the silhouette. |
| WASM Effect | wasmEffect | canvas | Procedural noise/distortion texture generation via WASM. |