Animate a Component

Add one purposeful timeline to a visual Component, connect its playback to the intended trigger, and verify both the animation and generated output. Keep the base Design state valid so the Component still renders correctly before, after, or without motion.

Coverage: UI + MCP, with current Preview/export exceptions.

Choose the trigger before the keyframes

Misaki Studio timelines can represent different behaviors:

• Mode: Mount · Use it for: motion tied to the Component mounting

• Mode: States · Use it for: playback controlled by Component state and commands

• Mode: Scroll · Use it for: progress driven by scroll behavior

• Mode: Appear · Use it for: motion tied to entering an appearance region

• Mode: None · Use it for: a timeline controlled explicitly rather than by an automatic trigger

Choose the mode that matches the product behavior. Do not use autoplay to hide an undefined trigger.

Create the timeline in the UI

1. Open a visual Component and select the element that should animate.

2. Switch the right inspector to Animate.

3. Create or select a timeline and give it an intentional name.

4. Set duration, playback direction, looping, autoplay, trigger mode, and screen behavior deliberately.

5. Add only the properties needed for the effect, such as opacity, position, scale, or rotation.

6. Use the bottom timeline to place keyframes and adjust easing.

7. Scrub between keyframes, then play the sequence in Preview.

8. If a state drives playback, switch to Logic and connect the state/event action after the timeline itself works.

Timeline nodes are stored separately from the optional Timeline Player data-structure slot. A Component can contain and play a timeline even when that slot is not enabled; the slot exists when external or declarative timeline control is required.

Website-project pilot: the selected construct timeline shows its layers and stored keyframes.

Ask an agent

In the Website project, inspect <component reference>, call build-playbook, and read the current timelines and target styles. Add one timeline named <name> with <trigger mode> and duration <seconds>. Animate only <properties> on <element references>; preserve base styles and every existing timeline. If logic controls playback, read logic-format and connect only <event/state command>. Read the timeline and keyframes back, verify the interaction with preview-interact when applicable, capture before/after evidence, inspect generated TSX/SCSS, report current export limitations, and stop.

The agent can use timeline/keyframe tools, logic actions, Preview interaction, and code export. It should not replace an existing timeline merely because its name is similar.

Verify motion and fallback states

Check more than playback:

• the element starts from the intended visual state;

• the final state is correct and stable;

• duration, direction, loop, and autoplay match the brief;

• easing is applied to the intended interval;

• repeated playback does not accumulate a transform unexpectedly;

• the Component remains understandable when motion is paused or unavailable;

• the trigger actually produces a Preview state/Context change when logic is involved;

• generated output contains the intended target and properties.

For scroll and appear behavior, test realistic containing layout and viewport movement. For a state-driven timeline, test each command path, including replay, play, pause, or ignore behavior that the design uses.

Code Components and animatable properties

A Code Component can declare number or color animatable properties that a timeline pushes to its mounted host without a normal React rerender for every frame. Its own file exposes Logic and Code rather than the visual Animate workspace, so authoring that Component's own timeline is currently MCP-only. A Page or visual Component can still animate an instance through its own UI timeline.

Undo and side effects

Timeline, keyframe, and playback-logic edits belong to the design file's content history. A single user intent should be checked as one coherent step where the underlying operation supports it. UI and MCP share the stack, so avoid intervening edits before an undo test.

Audio registered in the design system and audio segments placed on a timeline are separate concerns. Verify both the project reference and actual playback.

Current limits

• Separate screen mode is stored, but current exported element animation targets are not scoped to the corresponding container-query breakpoint.

• Shader parameters can be keyframed and previewed; current generated output renders the shader statically rather than exporting the shader animation.

• A screenshot proves only one moment. Use playback or before/after evidence for time-based behavior.

• Host-assisted playback and interaction verification require the running desktop app.

• External consumer performance and reduced-motion behavior require testing in that consumer.