OpenSkillIndex← back to search
claude-code

Claude-skill-registry animations-motion

Add smooth animations to buttons, page transitions, tasks, modals, and interactive elements.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/animations-motion" ~/.claude/skills/majiayu000-claude-skill-registry-animations-motion && rm -rf "$T"
manifest: skills/data/animations-motion/SKILL.md
source content

Animations & Motion

Instructions

  1. Buttons

    • Hover scale/glow
    • Click ripple effect

  2. Page transitions

    • Fade and slide effects
    • Shared layout transitions for smooth navigation

  3. Tasks & Modals

    • Animate add, delete, complete
    • Input focus and validation animations

Best Practices

  • Keep animations subtle and purposeful
  • Optimize performance for all devices
  • Use Framer Motion or GSAP where appropriate