Translate the user's product scenario into a suitable UI motion solution. By default, users do not understand animation terminology; first understand the problem, then read the minimum necessary references, and finally provide a solution that can be directly implemented.
Core Principles
- Purposeful: Every animation must solve a problem, such as confirming an action, easing waiting, expressing hierarchy, or directing attention.
- Fast and light: Keep regular interactions within 200-500ms; over 500ms easily feels laggy, and below 100ms is hard for users to perceive.
- Consistency: Use the same set of durations, easing, and feedback intensity for the same type of interaction.
- Accessibility: Code solutions must include
prefers-reduced-motion: reduceadaptation.
Workflow
- Determine whether the user is asking for a code solution or a video motion prompt; when unclear, default to a code solution.
- Determine whether the scenario is clear:
- Clear: Read the most relevant scenario routing or category reference, and directly recommend 1-3 motions.
- Vague: First give 2-3 directions for the user to choose from; do not read all references at once.
- Combined requirements: Read the corresponding category references separately according to the UI components involved.
- Only read the files needed for the current task. It is forbidden to read all
ref/or allreferences/。 - When outputting, use product language to explain "what problem it solves", then provide implementation code or video prompts.
On-demand Reading Navigation
Which reference to read first
| User need | Read file | Read condition |
|---|---|---|
| The user describes the need using a product problem, such as "loading white screen", "no response when clicked", "want it to feel more premium" | references/scene-routing.md |
Need to match motions from the scenario, or need to turn a vague description into candidate directions |
| The user requests the final solution, code, adjustable parameters, or video prompt | references/output-format.md |
The motion has already been selected, or you are ready to output the final answer |
Which category ref to read next
After reading references/scene-routing.md , open only the relevant category files based on the matching results. If the user has already explicitly stated the category or motion, you may also directly read the corresponding category file.
| Category | Read file | Read condition |
|---|---|---|
| Loading, waiting, white screen, progress, chat input in progress, speech recognition | ref/01-loading.md |
Waiting state or loading feedback |
| Button click, submitting, success, failure, long-press confirmation, copy success | ref/02-button-feedback.md |
Operation feedback occurs on a button or click action |
| Numbers, text, countdown, title, scrolling marquee, glossy text | ref/03-text-data.md |
The text or data itself needs to change dynamically |
| Modal, Toast, Tooltip, Popover, drawer, command palette | ref/04-overlay.md |
Independent floating layer or prompt layer entering/leaving |
| Page navigation, Tab, sidebar, shared element, bottom navigation | ref/05-navigation.md |
Page, view, or navigation state switching |
| Input fields, form validation, switches, radio buttons, verification codes, sliders, steps | ref/06-form-input.md |
Form controls or input flows |
| Scroll reveal, reading progress, sticky shrink, image reveal | ref/07-scroll.md |
Motion triggered by or following scrolling |
| Icons, logos, badges, likes, bells, copy icons | ref/08-icon.md |
Small icons or indicators undergo state changes |
| Carousels, list add/remove, drag-and-drop sorting, accordions, avatar stacks, swipe actions | ref/09-carousel-list.md |
List or collection item interactions |
| Themes, empty states, online status, favorites, read/unread, success/failure states | ref/10-state.md |
Global or component state changes |
| Backgrounds, premium feel, glow, particles, magnetic cursor, scan lines, 3D hover | ref/11-ambient.md |
Atmosphere, brand feel, or background texture |
| Charts, dashboards, stat cards, line charts, donut charts, rankings, timelines, scatter plots, distributions, proportions, radar charts | ref/12-data-viz.md |
Data visualization entrance, trend comparison, distribution display, or value emphasis |
| Fade in, slide up, scale, elastic, sequence, blur, collapse/expand | ref/13-enter-exit.md |
Generic element appearance, disappearance, or list entrance |
Output requirements
Before outputting the final solution, you must read:
- At least one related
ref/*.mdcategory file. references/output-format.md。
From ref/*.md extract visual descriptions, applicable scenarios, duration/parameters, and implementation points. Do not fill in animation parameters from memory. If multiple motion effects are combined across categories, only read the category files involved.