The editor

The curve panel

Bottom right, beside the timeline: the curve of whatever you've selected, and the code it becomes. Pull the pad and the export rewrites itself in Motion, CSS or GSAP, with the lines that changed lit up.

What it shows: With nothing selected, it says how to fill it. Select an element and it lists every segment that element has, as curves you can click. Select a keyframe, or click a curve on the timeline, and it opens the curve leaving that keyframe on the left, with the element’s code on the right.
A preset is a curve you can pull: easeOut is drawn with its own two handles. Drag either one and it becomes a custom curve that starts exactly where the preset was, so there’s no separate “edit” step. Arrow keys nudge a focused handle by 0.01, and ⇧ by 0.1.
The spring pad: Right is faster, up is bouncier. The stiffness and damping underneath are for reproducing a feel; the pad is for finding one. Changing the weight keeps the feel: damping is recalculated, so a heavier spring doesn’t quietly become a bouncier one.
Saved feels: Found a spring you like? The save icon beside weight names it and keeps it under the presets on every spring, in every document. Click a saved feel to use it. Its menu renames it, copies a link to it, or deletes it (the notice can undo that). The link carries the feel itself, so whoever opens it gets an Add, with no account needed on either side. Saved feels live in this browser, up to 50, and a name can’t match a preset’s or one you already have. ⌘K has “Save spring as a feel”, “Copy link to this feel” and a “Set curve to…” for each one.
The code is the export: The panel and the Export dialog run the same generator, and a copy from either is identical. The one difference is what the panel shows: it leaves out the notes Export writes to explain itself (why a spring was sampled, why a stagger became variants), so the numbers you’re moving stay in view. Labels and commented code stay, and the Copy button includes the notes. The dialect tab is shared with Export, and so are its other choices: if Export is set to scroll-linked or dramatic, the panel says so above the code.
What lights up: With a keyframe selected, the lines that express its curve are highlighted: usually one transition line in Motion, and the timing function in CSS. In GSAP a spring is sampled into many stops, and all of them light up. The lines are found by generating the export again with only that curve changed and comparing the two, so it works the same in every dialect. Any change flashes the lines it changed; switching dialect flashes nothing.
Sharing the row: One handle sits between the timeline and the panel. Drag it either way. Near an edge, a pane folds away and leaves the handle as a thin strip; drag it or click it to bring the pane back. Double-click resets the split. When focused, the handle takes arrow keys, Home and End to fold, and Enter to reopen. It’s the last stop in the editor’s tab order. ⌘K has “Hide curve panel” and “Show curve panel”.
From the palette: “Set curve to easeOut”, “Set curve to spring (bouncy)” and the rest apply to every selected keyframe that has a segment, as one undo, which the pad can’t do. “Edit curve in curve panel” opens it.
Where it stops: The last keyframe on a track has no curve, since nothing leaves it, and the panel says so instead of offering an editor that changes nothing. The pad edits one keyframe, the selection’s anchor. Narrower than about 34rem, the code steps aside and the header tells you to widen the panel to get it back.