theatlasteam/motion-design-skill

Product motion design

Make a continuous story, not a slideshow of unrelated attractive cards. Preserve the viewer's object of attention through intention → action → result → product value → brand.

Choose a starting point

Read the relevant example's README, then its source. Resolve paths relative to this skill; never assume files from a previous session exist.

Task	Start here
iOS-like wheel, rolling digits, segments, ruler	examples/controls/README.md
Kinetic type, warped UI entrance, cursor-led showcase	examples/relay/README.md
Large composer, typing-linked camera, Send → generated result	examples/composer/README.md
Short 9:16 true-3D device spin	examples/device-studio/README.md
Full 22-second mobile launch	examples/milo-launch/README.md
MIDI composition, sampled instruments, mixing	examples/midi-score/README.md

Read references/direction.md for staging and timing, references/deterministic-rendering.md before video export, and references/asset-rights.md before publishing or redistributing assets. Official third-party inspiration links are in references/gemini.md; those videos are references, not bundled open-source assets.

Establish the shot

1. Reuse product, audience, aspect ratio, duration, and tone already provided. Ask only for missing information that changes the work. For a fictional product, choose a coherent concept rather than asking about every detail.
2. Inspect real product/brand material before making product claims. Never invent capabilities, metrics, testimonials, or production screenshots.
3. For a new visual direction, start with one finished 2–3-second HTML shot unless a full film was explicitly requested. Preserve approved choreography when extending it.
4. Use self-contained HTML/CSS/JavaScript for prototypes by default. An HTML request is not permission to perform a costly video render, upload, or cloud publish. Change stacks only when required or requested.
5. State the sequence of actions and camera handoffs briefly before coding. Keep each shot's focal object clear.

Direct motion, don't decorate

• Measure words after the actual fonts load. Reflow previous words when a new one arrives, maintaining the composition's center.
• Separate position, opacity, and blur curves. Make motion visible early and clear blur before the final overshoot. Animate the exit deliberately instead of default fade-out.
• Use a short, readable overshoot and settle; don't make every object wobble. examples/relay/scripts/motion-core.mjs contains tested text/camera springs, Bézier and cylindrical warp functions.
• Warp a panel with multiple horizontal strips when curvature matters; a single flat rotate is not a bent surface. Drive diagonal movement on both axes from one progress value.
• Zoom into an actual action rather than showing an unreadably small dashboard. Move the cursor and UI in the same transformed coordinate system, including hotspot compensation.
• Show hover → press → release → real state change. A drag needs pickup, travel, landing, and updated related state. Let the result follow the action that caused it.
• Keep shader time on the scene clock. Say when WebGL falls back; never call a static gradient a running shader.

Interactive controls versus recorded motion

Use the bundled controls rather than rebuilding their physics for each video.

• setValue(value) is interactive: integrate a spring from the current presentation position and velocity. Allow input to interrupt it.
• renderAt(value) is deterministic: immediately set a fractional component value. In video, derive this value from frame/fps; do not run a live spring or wall-clock loop during capture.
• For a wheel, show a fixed central selection window and two curved options on each side in the middle of the list. Compute position, tilt, scale, and opacity from fractional distance to the center.
• Track drag 1:1 with pointer capture. On release, project momentum, snap to a valid item, and carry velocity into settling. Apply progressive boundary resistance.
• Support wheel/trackpad, keyboard, focus, accessible names/current values, narrow viewports, and reduced motion. Do not play sounds or haptics without a deliberate requirement.
• Stop an external demo timeline on direct manipulation; two clocks must not fight for the same component.

Composer and camera

Show both rounded ends while the field is empty. Expand a finite field during typing. Measure the text and Send position; follow the growing text from the start with acceleration and braking, and stop at Send. Protect a separate text region so letters never pass under the button. After Send, reveal an independently staged result and a meaningful action inside it; do not morph the input into the output. Use the generic Canvas Lab example for choreography, not as a claim about a real model's behavior or latency.

True-3D device shots

Use a real GLB and the original display mesh, not a PNG frame or a floating DOM screen. Keep screen and body on one rig. Use studio softbox reflections, separate metal/glass/optical materials, a longer-lens camera, eased rotation, and a readable front-facing hold. Animate app actions in the screen texture so touch indicators obey perspective. Capture DOM typography and WebGL together for video.

The reference iPhone GLB is not included and is not MIT-licensed. Require the user's separately licensed copy or an explicitly licensed alternative. Check mesh names, display normals, UVs, scale, and framing before using a different model. Never call the example official Apple CAD, an official Apple render, or path tracing.

Sound, only when requested

Read references/music.md. Prefer an original multitrack MIDI → separately obtained licensed SoundFont → rendered stems → mix when MIDI/instruments are requested; do not make a paid neural API mandatory. Tie sparse sound accents to actual picture cues. Keep music, SFX, and speech independently editable. Do not claim a score is good or approved without listening/user review. Measurements and a cue sheet are not a finished, auditioned track.

For live HTML, gesture-gate audio and keep the visual clock independent from an audio resume() promise or stalled audio clock. Audio failures must not freeze animation. For offline video, align samples to the timeline rather than recording a live browser audio stream as the only master.

Verify and deliver

1. Run the relevant mathematical/functional tests. Check direct, reverse, arbitrary, and repeated seek; cursor hits; state causality; keyboard/drag interruption; 390px layout; and JS errors.
2. Respect the user's scope for visual review. Do not claim rendering or metadata checks are visual inspection. If visual QA is requested, actually inspect representative entrance/intermediate/interaction/exit frames and fix overlap, clipping, unreadable copy, and incorrect layers.
3. For MP4, actually render and verify duration, dimensions, fps, frame count, decode, and audio presence. Do not deliver instructions and call them an exported video.
4. Deliver the requested HTML or MP4 plus reproducible source, exact setup, asset-rights notes, and honest limitations. Do not silently add music.
5. Keep private credentials, session URLs, OS assets, downloaded commercial models, and generated bundles with embedded restricted assets out of a public repository. Root MIT covers original code/documentation, not every dependency or external asset.