Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Core animation primitives: timelines for playback control, tweens for A→B interpolation, keyframes for multi-stop curves, and stagger for per-element timing.
Category key animationGenerated public nodes 28Registry source faster-motion-docs/node-registry.json
Nodes
| Node | Type | Context | Description |
|---|---|---|---|
| Animation Clip | animationClip | shared | Authoring node for a single timeline-driven clip. params.objectTracks / boneTracks carry per-property keyframes; params.duration sets the clip length. Phase 01a expansion pushes this into the canvas animations array so the existing OCE + clipRegistry derivation produces identical runtime DAG. Use this instead of writing the animations array inline when authoring at the graph level. |
| Bool Tween | boolTween | shared | Smoothly tween a 0..1 progress toward a bool target over a fixed duration. Used to drive DOM animations from bool parameters (hover/click toggles). Emits linear progress so downstream multiKeyframe can carry the ease curve. |
| Carousel Effect Animation | carouselEffectAnimation | shared | A whole seamlessPlayhead-driven carousel effect as one author node. Every slot element matched by `selector` runs the same channel template, phase-shifted by its document-order index times `slotStride`. Expands at load into a single `carouselFanout` runtime node — N is resolved at bind time from `selector`, so adding or removing cards requires no graph edits. If you need per-slot divergence, detach to individual `slideSlotAnimation` nodes. |
| Carousel Fanout | carouselFanout | shared | Runtime fan-out of a shared keyframe template across N DOM elements with phase-shifted local time. Resolves matching elements at bind time via `selector` and runs all N slot evaluations inside one node — replaces the legacy expansion-time fan-out (`carouselEffectAnimation` → N × `slideSlotAnimation` × 4 primitives) with a single runtime node. Preferred runtime shape; `carouselEffectAnimation` is the author-facing compound that emits one of these. Channels accept the simple `{cssUnit?, template?, keyframes}` shape and the composed `{template, channels: { sub: { keyframes } }}` shape that drives multi-input CSS strings (`filter: blur({blur}px) brightness({bright})`) without going through CSS variables. |
| Clip Path | clipPath | shared | Keyframed polygon clip-path with structured point data. Interpolates between polygon keyframe stops — outputs typed ClipPathPoints for visual per-point editing in FVE. |
| Clip Path Animation | clipPathAnimation | shared | Animate a CSS polygon() clip-path on a target element, driven by a 0..1 progress input. Each keyframe carries `values[]` (the polygon point coordinates). Compound: expanded into `clipPath + clipPathWrite` at load time — no runtime class. |
| Clip Path Reveal | clipPathReveal | shared | Bidirectional CSS clip-path inset reveal. Drives `--clip-top` and `--clip-bottom` CSS variables on `selector` from a 0..1 progress + a forward / backward direction pair, so `clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0)` rolls open from the bottom up on forward arrival and from the top down on backward arrival. Compound — expands at load to two expression nodes + two `domPropertyWrite` nodes. |
| Color Keyframe | colorKeyframe | shared | Multi-stop color interpolation in OKLab space. Outputs a single `color` port (Color {r,g,b,a} 0-1 sRGB) that wires into a `domPoseWrite` color-typed property port. Keyframes are `{ time, value, ease? }` where value is a CSS color string. |
| Color Tween | colorTween | shared | Perceptually uniform color interpolation in OKLab space. Emits a packed `color` bundle for direct wiring, plus individual r/g/b channels for legacy consumers. |
| Cursor Proximity Write | cursorProximityWrite | shared | DOM-side radial-push writer. Treats the cursor as a solid ball and shoves each matched element AWAY from it along the unit vector connecting them. Each char/icon/cell gets 3 CSS vars written every frame — `--cursor-shift` (horizontal push px), `--cursor-lift` (vertical push px), `--cursor-tilt` (signed rotation deg) — so author-side CSS can compose them into any transform recipe. Per-element damped-spring physics gives an elastic settle: chars bounce back when the cursor moves away. Captures rest centres ONCE at bind time relative to `scopeSelector` (when set) so per-frame work is one BCR read for the scope plus pure math per element. Off-screen scopes cull the entire write loop. |
| Dock To Animation | dockToAnimation | shared | Dock a source DOM element onto a target DOM element, driven by a 0..1 progress input (0 = at rest, 1 = fully docked). Emits horizontal + vertical pixel offsets; authors route each offset to any CSS property via `channels`. Default maps offsetX → translateX(px) and offsetY → translateY(px) on the source element — override for axis-only docking, or to pipe the offset into marginLeft / mask-position / CSS custom vars / scale compensation, etc. Compound: expanded into `domDockTo + domPoseWrite` at load time — no runtime class. |
| Event Tween | eventTween | shared | Time-based tween triggered by a DOM event. `onEvent` starts the play pulse; optional `offEvent` reverses it (e.g. `mouseenter`/`mouseleave` for hover toggles). Compound: expanded into `eventListener + (eventListener?) + pulseTween + propertyAnimation` — no runtime class. Use this in place of CSS transitions when authoring graph-driven interactions. Channels accept EITHER the terse `{from, to, cssUnit?, ease?}` shape (hand-authored / AI-generated) OR the standard `{cssUnit?, keyframes: [{time, value, ease?}]}` shape (FVE-edited). |
| Indexed Dock Animation | indexedDockAnimation | shared | Docks a source element onto the Nth child of a list, where N is derived from a 0..1 progress input. As progress advances from 0 → 1, the source jumps from child[0] → child[1] → … → child[count-1] in lockstep with `floor(progress × count)`. The dock measures children's `getBoundingClientRect()` at runtime and parks the source at the most-recently-revealed child's right edge (whitespace children are skipped automatically so cursor-style consumers don't freeze across word breaks). Authors route the computed `offsetX` to any horizontal-offset-driven CSS property via `channels` (default: `translateX` in px). Compound: expands at load time to `domIndexedDock + domPoseWrite` — no runtime class. |
| Keyframe | keyframe | shared | Multi-stop interpolation with per-segment easing |
| Multi Keyframe | multiKeyframe | shared | Multi-channel keyframe interpolation — one progress input, N float outputs with per-channel per-segment easing. Channels defined in params, output ports created dynamically. |
| Property Animation | propertyAnimation | shared | Animate one or more CSS properties on a target element, driven by a 0..1 progress input. Compound: expanded into `multiKeyframe + domPoseWrite` at load time — no runtime class. |
| Pulse Tween | pulseTween | shared | A one-shot 0..1 clock driven by event pulses, not by input progress. Each input is rising-edge-detected: **`play`** advances toward 1, **`reverse`** advances toward 0, **`restart`** resets to 0 and plays forward, **`pause`** freezes the current value, **`resume`** un-freezes. Output `progress` is the eased 0..1 value; `playing` is 1 while advancing. The node OWNS the progress — distinct from the stateless `tween` interpolator (which is a pure function of an input progress source). Use this whenever a transition should be triggered by a discrete event rather than driven by a continuous external clock. |
| Scroll To | scrollTo | shared | F337 — animated scroll-to. Trigger-launched tween over the scroller's scrollTop. Resolves the target Y from a CSS selector (or "top" / "bottom") at trigger time, or from the dynamic `targetY` input port when wired (takes precedence over the selector). Lerps from current scroll through the configured ease, outputs a `value` to feed a domPropertyWrite(scrollTop). Pure-graph; no imperative API. |
| Scroll Tween | scrollTween | shared | Animate one or more CSS properties on a target element, driven by scroll progress between two edges of a trigger element. Compound: expanded into `scrollTrigger + propertyAnimation` (which itself expands to `multiKeyframe + domPoseWrite`) — no runtime class. Use this in place of manually wiring `scrollTrigger.progress → tween → domPropertyWrite` for every property. Channels accept EITHER the terse `{from, to, cssUnit?, ease?}` shape (hand-authored / AI-generated) OR the standard `{cssUnit?, keyframes: [{time, value, ease?}]}` shape (FVE-edited) — both expand to the same runtime nodes. |
| Seamless Playhead | seamlessPlayhead | shared | Pure-math playhead for seamless infinite loops. Maps progress + iteration to a rawSequence-equivalent playhead time; slideOffset nudges playhead by one spacing-unit per step (keyboard / autoplay step). |
| Section Alpha Gate | sectionAlphaGate | shared | Per-section alpha + z-index gate for layered scroll-snap or carousel slide patterns. Writes `--alpha` (0/1) and `--z` (activeZ / inactiveZ) on `selector` based on whether `myIdx` matches the current `activeIdx`. When `exitPlaying` is wired (typical), the section stays at alpha=1 throughout its own exit fade so the outgoing section doesn't snap to invisible the instant `activeIdx` flips. Compound — expands at load to two expression nodes + two `domPropertyWrite` nodes. |
| Slide Slot Animation | slideSlotAnimation | shared | A single slot in a seamlessPlayhead-driven carousel. Maps a per-slot window of the carousel playhead (e.g. [0.1, 1.1]) to a [0,1] slot-local progress (remap + fract), then animates CSS properties on the slot element via channels. One compound per slot collapses the canonical `remap + mathUtil(fract) + multiKeyframe + domPoseWrite` chain that every carousel effect repeats per slide. Compound: expanded into those four primitives at load time — no runtime class. |
| Stagger | stagger | shared | Per-element timing offset using Element Context (index, count) |
| String Keyframe | stringKeyframe | shared | Multi-stop string interpolation — parses embedded numbers and interpolates each independently. For CSS strings (filter, boxShadow, gradients) where multiple numbers change together. |
| Timeline | timeline | shared | Playback clock that emits a 0..1 `progress` over `duration` seconds. Self-advances when `autoplay`; can be externally driven by `play` / `pause` / `seek` pulses or a `progress` input. |
| Tween | tween | shared | Stateless A→B interpolation with easing — pure function of `progress`. |
| Velocity Pluck | velocityPluck | shared | Single-shot pendulum pluck with velocity-derived shape. On each rising-edge `trigger`, samples `velocity`, then runs a two-stage tween: stage 1 swings out 0 → -peakRot over `M = swingOutBase + swingOutVelTerm·e` seconds with power2.out ease; stage 2 elastic-returns -peakRot → 0 over `P = returnBase + returnVelTerm·e` seconds with elastic.out and period `periodBase - periodVelTerm·e`. Here e = clamp(|velocity| / normalisationVel, 0, 1) and peakRot interpolates from `peakRotMin` to `peakRotMax` by e. The signed `rotation` output (degrees) carries the velocity sign, so left-drag and right-drag produce opposite directions. Pair with `viewportObserver.enterPulse` for "pluck on visibility entry" patterns (e.g. carousel cards swing on the rod as they pan into view), or with any pulse source for one-shot reactive animations whose magnitude scales with input speed. |
| Wiggle String Write | wiggleStringWrite | shared | Damped-oscillation per-element writer — like plucking a guitar string with characters tied to it as beads. On each rising-edge `trigger`, every matched element traces its own damped sinusoid `A·e^(-decay·t)·sin(ω·t + i·phaseSpread)` where `i` is the element index. Adjacent elements oscillate slightly out of phase (controlled by `phaseSpread`), giving a "chord struck" feel — independent wiggle per char that stays loosely synchronised across the row. After `duration` seconds the node stops writing and chars return to rest. Use as a one-shot reaction to a hover/click pulse without any progress driver. |