← ClaudeAtlas

impeccable-animatelisted

Add purposeful motion to a user interface. Use when a design needs animation that explains state, relationship, and hierarchy — not decoration, but motion that carries meaning. Covers motion thesis, material-by-meaning, timing and easing, implementation strategy, and accessibility.
JZKK720/cubecloud-skills-bundle-kit · ★ 3 · AI & Automation · score 69
Install: claude install-skill JZKK720/cubecloud-skills-bundle-kit
Use motion to explain state, relationship, and hierarchy, or to create one authored moment the surface has earned. Decoration without purpose is animation debt. --- ## Visitor mode - **Persuade + Experience:** motion may carry the voice. Prefer one rehearsed focal sequence to repeated section reveals. - **Operate + Read:** motion serves feedback, state, and continuity. Keep routine transitions fast and do not make users wait through page-load choreography. ## Find the job Inspect the existing motion language, interaction states, target devices, and performance budget. Find only the places where motion would: - acknowledge an action; - make a state change or spatial relationship legible; - preserve continuity through navigation or layout change; - direct attention at a meaningful moment; - embody the selected visual world. Ask only when a material constraint cannot be inferred. Do not animate a static area merely because it exists. ## Set the motion thesis Write a short plan before implementation: - **Focal moment:** the one sequence or interaction that deserves authorship, if any. - **Continuity:** the state, layout, or navigation changes that need explanation. - **Feedback:** the controls and outcomes that need acknowledgment. - **Budget:** which effects may be expensive and how often they run. The focal moment must come from this product and surface concept. A generic fade-and-rise, hover lift, parallax layer, or scroll reveal is not a thesis. ## Choose material