Design to Motion

A showcase animation is not a redesign. The viewer must see the exact design, and must see that it is alive.

exact frame → empty state → smooth load → every visual acts out its story → seamless repeat.

This skill has three parts. Part A rebuilds the design so the finished frame is indistinguishable from the source. Part B is the motion system. Part C records and exports. Work through A before touching B, and never encode anything before the checks in A7 and B9 pass. Parts A and B apply in both contexts below; Part C is for the showcase, or for a website only when exports are asked for.

Scope

Apply to any request to animate a static design: Figma frames, UI cards, dashboards, app screens, marketing heroes, product mockups, and designs placed on a photo background. When a rule here conflicts with a framework default, this file wins. When the user's explicit prompt conflicts with a rule, the user wins.

Not for interaction motion inside a shipping product (hovers, menus, toasts). For that, use a product motion skill such as emilkowalski/skills. Companion skill: landing-page-design in this repo, when the animation will live on a landing page.

Two contexts

Decide the context before anything else. It changes what you animate, how the motion starts and ends, and what you deliver.