Click waypoints, drag the dot, and resize or move the purple region to define export space. Optional parent width/height override the live playground size used in generated keyframes.

Path edges

Easing source

Easing preset

Parent W (px)

Parent H (px)

Reset

Points

Duration

0.00s

Export

Path px

Parent (live)

—

Region

300×200

Playground — px

Editor

Use Edit points to add waypoints and drag the dot. Switch to Edit region to move or resize the purple export frame without affecting waypoints. Drag-to-record (info.offset) is coming soon.

Export normalized (0–1) values

Live preview

Keyframes use export parent 1 × 1 px; dot start matches the editor (1 × 1 px).

Auto-loop

Record or place points to see the motion here.

Coordinate modes

Recording (coming soon): will sample info.offset (px from drag start). Multiple separate drags in one take will switch export to path pixels.
Free draw: click to add waypoints; export uses pixel deltas from the first keyframe. The purple region defines the logical width/height used to scale those deltas to your parent size (live playground or overridden width/height).
Path edges: Sharp connects waypoints with straight segments; Rounded uses a smooth curve (Catmull–Rom) for both the canvas and playback.
Easing: applies to overall animation time in Play, Live preview, and the generated transition.ease snippet.
Preview: scales keyframes from the export parent size into the preview panel and anchors the dot at the first keyframe so it matches the editor.