/design-to-motion

name: design-to-motion
description: "Turns a static design (a Figma frame, dashboard, card set, app screen, or a UI on a photo background) into a pixel exact HTML replica that loads in from an empty state, then has every visual act out what it does (a chart being read, a list receiving items, a prompt being typed) in a seamless loop, and exports an MP4 for X, a website GIF, and an 800×500 GIF. Use this skill whenever the user asks to animate a design, a Figma link, a screenshot, UI cards, a dashboard, or a hero image, to make a loading or appear animation, a showcase loop, a motion mockup, or a video or GIF of a design, even when they only say \"animate this\". Also use it on landing pages and websites for bento and feature cards that pair text with a visual, and for product or dashboard mockups. Always consult it before exporting layers, choosing what moves, building the intro, writing the visual story loops, or encoding video and GIFs."

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](https://github.com/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.

| | **Showcase** | **Website** | |---|---|---| | Typical request | "Animate this design for me", a Figma link and nothing else | Building or editing a landing page or site, or the request names one | | What gets animated | The whole frame | Only the sections that qualify (table below) | | Start | Page load, from the empty state | When the section scrolls into view, once | | After the intro | Stories run, then the frame dissolves and the cycle repeats (B5) | Stories run forever. No dissolve, no cycle | | Text | Exported layers, so the frame is pixel exact | Live HTML text in the site's font, for SEO and accessibility. Only the visual parts are exported images or SVG | | Deliverables | The page plus MP4 for X, website GIF, 800×500 GIF (Part C) | The animated sections inside the site's code. Exports only when asked |

If the request does not say which, look at where you are working: inside a site's codebase, assume website. With only a design and no site, assume showcase. If it is still unclear, ask once.

Website: which sections get which motion

Scan the page section by section. Apply this skill only where a section has a visual part, plus the hero (below). Never animate any other text section with it.

| Section | Apply | |---|---| | **Hero (always)**, with or without a visual: the header, headline, subtext, buttons, and proof line | The hero appear (below) on page load. Any visual inside the hero then follows its own row in this table | | Bento and feature sections: cards with text plus a visual (a chart, list, flow, calendar, prompt, player) | Card intro on scroll (B2, `card` kind, text included), then a story loop on each card's visual (B4). This is the main use on a landing page | | Product or dashboard mockup (a hero shot of the app, a product screenshot) | The loading intro on scroll: surfaces stay, contents load (A5). Then **ask the user** whether they also want stories after loading. Do not add them unasked | | Logo rows, integrations | A marquee or a gentle light up story | | Text only sections: headline blocks, testimonials, FAQ, pricing, CTA, footer | Not this skill. Use the page's normal scroll reveal (for example `landing-page-design` B7) |

**The hero appear.** Every website gets it, every time, even when the hero is only text.

• **The page opens plain.** The first frame is the page background alone (and the static joined surfaces of an app frame mockup, if the hero has one). No text, no header, no buttons yet.
• **A really small animation.** Each element rises just 6px and resolves from a 2px blur to sharp, with an opacity fade. Nothing slides far, nothing scales, nothing bounces. It should feel like the page settling into place, not like a show.
• **Fast and in reading order.** Header first, then the badge, the headline line by line, the subtext, the buttons, and the proof line, 50 to 70ms apart. The whole text appear lands within about 1.2s.
• **On page load, once.** It plays when the page first loads, not on scroll, and never replays when the visitor scrolls back up.
• Visuals in the hero (floating cards, a product mockup) start their own intro after the headline, following their row in the table.

Website rules:

• **Trigger with `IntersectionObserver`.** Below the hero, start each section's intro when about 30% of it is visible. Play it once. Never use a scroll listener.
• **Pause stories off screen.** Stop the clock when the section leaves the viewport and resume it on return.
• **Stagger by reading order inside the section**, never across the whole page.
• **Respect the site's system.** Use its components, tokens, radii, and fonts. Fidelity t