⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
motion-ref
UI 动效参考库，帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景（页面加载慢、用户点了没反应、想让页面高级一点），直接推荐方案 + 代码。触发词：页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
AI agent skill for UI motion design. 119 production-ready effects across 13 categories — describe your product scenario, get implementation guidance you can ship. No motion design knowledge required.
Works with Claude Code, Codex, OpenClaw, and any SKILL.md-compatible agent.
Install
npx skills add https://github.com/joepUI/motion-ref-skill
Or install manually:
git clone https://github.com/joepUI/motion-ref-skill.git ~/.claude/skills/motion-ref-skill
Restart your agent after installing.
Usage
Describe your product scenario. The skill recommends the right animation and gives you production-ready code.
Enrich your whole site
/motion-ref My website feels static and lifeless.
Help me add animations to make it feel polished.
The skill will analyze your pages and suggest a combination of effects: scroll reveals for content sections, stagger animations for card grids, hover feedback for buttons, smooth page transitions, etc.
Fix a specific problem
/motion-ref Users click the submit button and nothing happens for 3 seconds.
They keep clicking because there's no feedback.
/motion-ref The page loads with a white flash before content appears.
It looks broken.
Add polish to a feature
/motion-ref I have a pricing toggle between Monthly and Annual.
The prices should animate when switching, not just swap.
/motion-ref My landing page needs to feel premium.
Something subtle on the hero section.
Get recommendations
/motion-ref What animations would work well for a SaaS dashboard?
/motion-ref I'm building a mobile chat app.
What motion effects should I consider?
Categories
| # | Category | Count | Highlights |
|---|---|---|---|
| 1 | Loading & Waiting | 14 | Spinner, Skeleton Shimmer, Wave Bars, Typing Indicator, Rose Curve, Lemniscate |
| 2 | Button & Click Feedback | 9 | Press Scale, Ripple, Success Check, Error Shake, Confetti |
| 3 | Text & Data | 10 | Typewriter, Number Counter, Flip Counter, Shimmer Text, Gradient Text |
| 4 | Overlay & Popup | 10 | Modal, Bottom Sheet, Toast, Tooltip, Drawer, Command Palette |
| 5 | Navigation & Transition | 7 | Page Slide, Shared Element, Tab Slide, Dock Nav |
| 6 | Form & Input | 10 | Focus Ring, Label Float, Toggle Switch, OTP Input, Range Slider, Step Indicator |
| 7 | Scroll-driven | 5 | Scroll Reveal, Progress Indicator, Scroll Text Reveal |
| 8 | Icon & Badge | 10 | Hamburger/Close, SVG Draw, Badge Bounce, Heart Like, Bell Shake, Copy Check |
| 9 | Carousel & List | 8 | Carousel, Card Stack, Drag Reorder, Accordion, Avatar Stack, Swipe Action |
| 10 | State Change | 7 | Theme Toggle, Error Recovery, Online Status, Favorite Star, Read/Unread |
| 11 | Atmosphere & Background | 8 | Gradient Flow, Particles, Magnetic Cursor, 3D Card Hover, Light Sweep, Scan Line |
| 12 | Data Visualization | 12 | Bar Chart Rise, Radial Bars, Scatter Pop, Density Curve, Pie Slice Reveal, Radar Sweep |
| 13 | Enter & Exit | 8 | Fade In, Slide Up, Spring In, Stagger, Blur In, Collapse |
Live Preview
Browse all 119 effects with live demos: https://joepui.github.io/motion-ref-skill/
License
MIT
// HOW IT'S BUILT
KEY FILES