Motion Dev Animations

What it does

When your agent uses it

• User requests animation
• Hero animations
• Drag interactions
• WhileHover effects

Example prompts

• “Use the motion-dev-animations skill to create 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js…”
• “/motion-dev-animations”

Requirements

• Node.js
• Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, Glob, Grep

Workflow steps

4 steps, taken from the step headings in SKILL.md.

1. 1Clarify Requirements
2. 2Plan Animation Strategy
3. 3Implement in Phases
4. 4Verify Quality Standards

What it can do on your machine

Read from SKILL.md and the folder at commit 3feedfb. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Write
  • Edit
  • Bash
  • Glob
  • Grep

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/, which the agent can run.

  Shell commands in SKILL.md call:

  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Motion Dev Animations loads about 2.8k tokens when it runs. Until then it costs about 217 tokens; SKILL.md has 818 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~217

When it runs · the whole SKILL.md, loaded when a task matches

~2.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

• NotePre-approves every shell command (allowed-tools: Bash)SKILL.md

  allowed-tools: Read, Write, Edit, Bash, Glob, Grep

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from 199-biotechnologies/motion-dev-animations-skill at commit 3feedfb, republished under its MIT licence (© 199-biotechnologies). 818 words, ~2,803 tokens.

name

motion-dev-animations

description

Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects. Use when user requests animation, motion, scroll effects, parallax, hero animations, gestures, drag interactions, spring physics, whileHover effects, whileInView animations, animated UI, micro-interactions, page transitions, or layout animations. Generates production TypeScript/JSX code with accessibility (prefers-reduced-motion) and performance validation (≥60fps). Supports entrance animations, gesture interactions (hover/tap/drag), scroll-based reveals, and layout transitions using spring physics and natural timing. Do NOT use for CSS-only transitions (use native CSS), static sites without JavaScript, Vue animations (use motion-v variant instead), or SVG/Canvas complex animations (GSAP better suited).

allowed-tools

Read, Write, Edit, Bash, Glob, Grep

metadata.version

3.0.0

metadata.author

Motion Dev Standards

metadata.tags

motion, framer-motion, animation, react, nextjs, svelte, astro, gestures, scroll, parallax, microinteractions, spring-physics, layout-animations

metadata.min_claude_version

3.5

metadata.created

2025-11-07

metadata.updated

2025-11-08

metadata.optimization

Research-backed: imperative language, few-shot (3 examples), layered complexity, progressive loading

INPUT: What should animate?

├─ ENTRANCE (page load, mount)
│   → Pattern: initial={{opacity: 0, y: 20}} animate={{opacity: 1, y: 0}}
│   → Timing: 0.6-0.8s, ease: [0.22, 1, 0.36, 1]
│   → Stagger: 0.1-0.2s between elements
│   → Example: ./examples/hero-fade-up.md
│
├─ GESTURE (hover, tap, drag)
│   → Pattern: whileHover={{scale: 1.05}}, whileTap={{scale: 0.95}}
│   → Physics: Spring (stiffness: 300-400, damping: 20)
│   → Timing: Instant response (no duration)
│   → Examples: ./examples/card-hover.md, ./examples/magnetic-button.md
│
├─ SCROLL (reveal, parallax)
│   → Pattern: whileInView + viewport OR useScroll + useTransform
│   → Trigger: viewport={{once: true, amount: 0.3}}
│   → Performance: Transform/opacity only
│   → Examples: ./examples/scroll-reveal.md, ./examples/parallax-layers.md
│
└─ LAYOUT (reorder, expand)
    → Pattern: layout prop (auto FLIP)
    → Shared: layoutId="id" for morphing
    → Caveat: Only animates transforms

# React/Next.js/Svelte/Astro
npm install motion

# Vue
npm install motion-v

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
/>

<motion.div
  whileHover={{ y: -8, boxShadow: "0 20px 40px rgba(0,0,0,0.12)" }}
  transition={{ type: "spring", stiffness: 300, damping: 20 }}
/>

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
/>

© 199-biotechnologies, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 22 other files (scripts) in the repository root of 199-biotechnologies/motion-dev-animations-skill.

• SKILL.md
• ACTIVATION_TEST.md
• CONTRIBUTING.md
• DEPLOYMENT_STATUS.md
• LICENSE
• README.md
• RESEARCH_SYNTHESIS.md
• SKILL.md.backup
• VALIDATION_V3.md
• examples/card-hover.md
• examples/example-config.json
• examples/hero-fade-up.md
• examples/magnetic-button.md
• examples/parallax-layers.md
• examples/scroll-reveal.md
• reference/api-reference.md
• reference/spring-physics.md
• schema/motion-config.schema.json
• … and 5 more

Open the folder on GitHubat commit 3feedfb

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in 199-biotechnologies/motion-dev-animations-skill, which our catalogue first saw on October 7, 2026.

• NeverSight/learn-skills.devdata/skills-md/199-biotechnologies/motion-dev-animations-skill/motion-dev-animations