Animation engine

verve.anim end-to-end: descriptors built and serialized in Zig, interpreted by the bridge.

  • declarative data-anim entrances (no island, no wasm)
  • imperative timeline island with pause/play/reverse/speed controls
  • split text, scroll triggers, scrubbed pins, motion paths, SVG morphs
  • zero-wasm draggable with inertia + grid snap; FLIP keyed shuffle

Guide: Animation

verve.anim

Tweens, timelines, keyframes, stagger, and a control API. Zig builds + serializes descriptors; the bridge interpreter runs them. With prefers-reduced-motion set, entrances jump to their end state.

Imperative timeline (island)

status: loading…

1
2
3
4
5
6
7

island trigger: scroll down…

trigger progress: 0%

wheel/touch velocity: 0 px/s

zone 0
zone 1
drag

drag: idle · pos 0, 0 · vel 0 px/s

1
2
3
4
5
6
7
8

MotionPath: orbit a viz edge

The marker follows a verve.viz curved edge path with tangent auto-rotation.

MorphSVG: star ↔ circle

Scrubbed motion path

Scroll drives the dot along the S-curve (smoothed scrub).

Draggable: bounds + inertia + grid snap

Pure data-drag — no island, no wasm. Flick the card; it coasts and settles on the 40px grid inside the pen.

drag

ScrollTrigger: gated entrance

Cards play in at 80% viewport, reverse when you scroll back above them. The heading gets a zero-wasm class toggle.

1
2
3
4
5
6

Scrub + pin

The panel pins for 150vh while the bar scrubs scroll progress (smoothed, 0.3s). Dashed lines are debug markers.

This panel is pinned while the bar scrubs.

Grapheme-safe SplitText (emoji)

By.graphemes splits on grapheme cluster boundaries — multi-codepoint emoji (ZWJ families, skin tones, flags) stay whole instead of shattering into half-glyphs.

RTL-aware SplitText (bidi)

rtl_aware=true wraps RTL runs in <span dir=rtl> so mixed LTR/RTL text renders in the right visual order while the stagger order stays logical.

Pin + snap (ease + directional)

The panel pins for 150vh while the bar scrubs; snap points at 0 / 50 / 100% with in_out_cubic ease and snap_directional=true — the settle resolves toward the scroll direction.

Pinned while the bar scrubs (snap_ease=in_out_cubic, snap_directional=true).

Draggable: elastic bounce

Pure data-drag — no island. Flick the chip hard into a wall: analytic inertia coasts it, then it bounces back elastically (bounce=0.35) and settles on the 32px grid.

flick me

← Home