create_motion_playground
Build a self-contained HTML animation playground to tune motion by hand, with a live stage, designer-labeled controls, and copyable params JSON, SVG frame, and WAAPI exports.
Instructions
Build a motion playground: one self-contained HTML file with an animation on a stage, its controls labelled in designer language, live preview and copyable exports (params JSON, an SVG frame, a WAAPI snippet), written under the taste home's playgrounds/ directory or output_path. Use it when someone wants to tune an animation by hand rather than describe it. Pass profile and project to prefill the playground's Copy for Raven text and, for a motif, to start from the bound surface's motion notes (only the terms restrained, subtle, snappy and no bounce are mapped; anything else is listed in warnings). The user pastes the Copy for Raven text back so you can call record_taste_decision with it. A default that breaks a motif constraint is corrected to the nearest valid step and reported in warnings; an override that cannot be corrected inside the control's range is an error. Raven never draws new artwork. Pass exactly one of motif or timeline. motif builds from a built-in motif. timeline builds from a Motion Lab timeline document you write: text, phases and tracks, checked by Motion Lab's own validator, with text outlined from the font files it names. An element target animates a part of the page passed in fragment, keyed by its id. A timeline plays on load, on hover ({ on: 'hover', target, leave: 'reverse' or 'finish' }) or when scrolled into view ({ on: 'scroll', threshold, once }). Timeline track properties: opacity, translateX, translateY, scale, scaleX, scaleY, rotate, fill, stroke, color, background, draw, clip, blur. Target kinds: surface, text, element. Named easings: linear, ease-in, ease-out, ease-in-out, or { cubicBezier: [x1, y1, x2, y2] }, or { spring: { duration, bounce } }. Use ONLY these.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| seed | No | Random seed for any jitter in the motif, so a shared playground replays identically. | |
| motif | No | Built-in motif to build from. Valid values: keyfob. Use ONLY these. Omit when passing timeline. | |
| title | No | Playground title shown in the header and tab, 1-40 characters. Defaults to the motif's or timeline's own title. | |
| profile | No | Taste profile name (see list_taste_profiles). Pass with project, or omit both. | |
| project | No | Bound project name. Pass with profile, or omit both. | |
| fragment | No | HTML for the timeline's element targets: the page part to animate, with ids the targets name. Raven cleans it first: scripts, handlers, style attributes, links and external URLs are removed, and images must be inlined as data: PNG, JPEG, WebP or GIF. At most 3 MB. Timelines only. | |
| timeline | No | A Motion Lab timeline document (schemaVersion, id, title, stage, fonts, targets, phases, tracks, trigger, groups, params; optional presets and constraints), at most 256 KB of JSON. Font paths must be absolute or start with ~/ and end in .otf, .ttf, .woff or .woff2. Validation errors are returned in full; fix them and call again. Omit when passing motif. | |
| overrides | No | Changes to the motif's controls and group labels. Defaults set here are kept as given and are not adjusted by taste notes. Motifs only: a timeline sets these in its own document. | |
| output_path | No | Absolute path for the HTML file, ending in .html. Defaults to <taste home>/playgrounds/<motif or timeline id>-<id>.html. |