Animate
- 98 installs
- 247 repo stars
- Updated August 4, 2026
- educlopez/ui-craft
Add purposeful UI animations or remove excessive ones, respecting a motion budget, motion-intensity knob, and the project's animation stack.
About
A motion-design lens of ui-craft that adds or trims animations against a Decision Ladder, motion budget, and reduced-motion rules. A developer uses it to make transitions smoother, fix jank, or cut distracting motion.
- Motion budget table by element size with exit at ~75% of entrance duration
- Gates entrances, scroll reveals, and page transitions by MOTION_INTENSITY level
Animate by the numbers
- 98 all-time installs (skills.sh)
- Ranked #1,147 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/educlopez/ui-craft --skill animateAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 98 |
|---|---|
| repo stars | ★ 247 |
| Last updated | August 4, 2026 |
| Repository | educlopez/ui-craft ↗ |
What it does
Add purposeful UI animations or remove excessive ones, respecting a motion budget, motion-intensity knob, and the project's animation stack.
Files
<!-- AUTO-GENERATED. Do not edit here. Source: skills/ui-craft/ + commands/*.md. Regenerate with node scripts/sync-harnesses.mjs. -->
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Add or fix animations in the target the user described. Load the ui-craft skill.
Step 1 — Decision Ladder: run the Decision Ladder from references/motion.md first. Anything that fails it gets removed, not improved.
Step 2 — Pick the library:
- If user opted into a stack during Discovery → read
references/stack.md. Use the matching section (Motion, GSAP, or Three.js). Never mix libraries on the same property. - Otherwise → CSS transitions /
@keyframes/animation-timeline: view()only.
Step 3 — Apply motion budget:
| Element | Budget |
|---|---|
| Color/opacity | 100-150ms |
| Small UI (tooltips, dropdowns) | 150-200ms |
| Medium UI (modals, panels) | 200-300ms |
| Large UI (page transitions, drawers) | 300-400ms |
Exit ≈ 75% of entrance duration (shorter, same ease-out — or a flatter tail like cubic-bezier(0.4, 0, 1, 1) for a softer exit). Never ease-in on UI (see references/motion.md). cubic-bezier(0.22, 1, 0.36, 1) is a safe spring-like default.
Step 4 — Multi-stage sequences → read ../examples/animation-storyboard.md. Stagger 30-80ms, not 200ms.
Step 5 — Respect the knobs:
MOTION_INTENSITY ≤ 3→ hover states only, no entrances, no scroll-triggered.MOTION_INTENSITY 4-7→ standard entrances + hover, one scroll reveal max per section.MOTION_INTENSITY 8+→ scroll-linked, page transitions, magnetic cursor OK (still honor reduced-motion).
Output: edit code directly. After each file, print the Review Format table. Flag any animation you removed and why.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k