New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Motion Design Patterns for React

by dylanfeltus in dylanfeltus/skills

Framer Motion (Motion) patterns for React: spring presets, staggers, layout animations, micro-interactions, scroll effects and page transitions, with performance rules.

MITAuto-check passedFrontend & Design

Install Motion Design Patterns for React

skills CLI
$ npx skills add dylanfeltus/skills --skill motion-design-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dylanfeltus/skills motion-design-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dylanfeltus/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/motion-design-patterns .claude/skills/motion-design-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
motion-design-patterns
GitHub stars
179
Token cost
~3k tokens
SKILL.md length
801 words
Files
2
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Framer Motion (Motion) patterns for React: spring presets, staggers, layout animations, micro-interactions, scroll effects and page transitions, with performance rules.

  • Adding entrance, exit or hover animations to a React project
  • SKILL.md covers When to Use, Core Philosophy, Dependencies and Spring Configurations, plus 12 more sections
  • Calls npm
  • Making lists, cards, modals or navigation feel more polished

What it does

This skill collects animation patterns for React with the Motion library, the package formerly named framer-motion, installed with `npm install motion` and imported from `motion/react`. It argues that motion should be purposeful, that one well-tuned spring beats several competing animations, and that only `transform` and `opacity` should be animated, never width, height, top, left or margin.

It supplies spring presets with stiffness and damping values for snappy, smooth, gentle and bouncy feels (500 and 30 for buttons and toggles, for example), rules of thumb for tuning bounce, and numbered patterns that begin with a fade-and-rise entrance kept subtle at about 12 to 24px. Further sections cover staggers, layout animations, micro-interactions, scroll-triggered effects, exit animations and page transitions.

When your agent uses it

  • Adding entrance, exit or hover animations to a React project
  • Making lists, cards, modals or navigation feel more polished
  • Choosing consistent spring settings across an app
  • Building scroll-triggered effects or page transitions

Example prompts

  • “Add a staggered fade-and-rise entrance to the pricing cards.”
  • “Animate the settings modal opening and closing with a smooth spring and an exit animation.”
  • “Replace the easing curves in our navigation with consistent spring settings.”

Requirements

  • A React project
  • The motion package (npm install motion)

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

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

  • Network

    Links to these hosts (documentation or services it may open):

    • magicui.design
    • motion-primitives.com
    • ui.aceternity.com

    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 Design Patterns for React loads about 3k tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 801 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~67
When it runs · the whole SKILL.md, loaded when a task matches
~3k

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

Auto-check passed

The automated check found no risky patterns in SKILL.md.

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from dylanfeltus/skills at commit b97a48f, republished under its MIT licence (© dylanfeltus). 801 words, ~2,962 tokens.

Download SKILL.mdSave it as .claude/skills/motion-design-patterns/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
motion-design-patterns
description
Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium.

Motion Design Patterns

Framer Motion (Motion) patterns for React — springs, staggers, layout animations, micro-interactions, scroll-triggered effects, and exit animations. The #1 differentiator between generic and polished UI.

When to Use

  • Building or improving UI animations in a React project
  • User asks for "polish", "delight", "micro-interactions", or "make it feel good"
  • Adding entrance/exit animations, hover effects, or page transitions
  • Making lists, cards, modals, or navigation feel premium
  • User references Magic UI, Motion Primitives, or Framer Motion

Core Philosophy

  • Motion should be purposeful. Every animation should communicate something — state change, hierarchy, spatial relationship, or feedback.
  • Less is more. One well-tuned spring beats five competing animations.
  • Performance first. Animate transform and opacity only. Never animate width, height, top, left, or margin.
  • Consistency matters. Use the same spring configs throughout a project.

Dependencies

bash
npm install motion

Import: import { motion, AnimatePresence, stagger, useScroll, useTransform } from "motion/react"

Note: The package was renamed from framer-motion to motion in late 2024. Both work, but motion is the current package.

Spring Configurations

Springs feel more natural than easing curves. Use these as your defaults:

tsx
// Snappy — buttons, toggles, small elements
const snappy = { type: "spring", stiffness: 500, damping: 30 }

// Smooth — cards, panels, modals
const smooth = { type: "spring", stiffness: 300, damping: 25 }

// Gentle — page transitions, large elements
const gentle = { type: "spring", stiffness: 200, damping: 20 }

// Bouncy — playful UI, notifications, badges
const bouncy = { type: "spring", stiffness: 400, damping: 15 }
Quick Reference
FeelstiffnessdampingUse for
Snappy50030Buttons, toggles, chips
Smooth30025Cards, panels, modals
Gentle20020Page transitions, heroes
Bouncy40015Notifications, badges, fun UI
Rules of Thumb
  • Higher stiffness = faster animation
  • Lower damping = more bounce
  • damping ratio < 1 = will overshoot (bounce)
  • For no bounce, set damping ≥ 2 × √stiffness

Pattern 1: Fade + Rise Entrance

The bread-and-butter entrance animation. Element fades in while sliding up slightly.

tsx
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ type: "spring", stiffness: 300, damping: 25 }}
>
  Content here
</motion.div>

When to use: Cards, sections, any content appearing on the page.

Anti-pattern: Don't use y: 100 or large values — subtle (12–24px) feels premium, large feels janky.

Pattern 2: Staggered List

Children animate in one after another. The cascade effect that makes lists feel alive.

tsx
const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.1,
    },
  },
}

const item = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { type: "spring", stiffness: 300, damping: 25 },
  },
}

<motion.ul variants={container} initial="hidden" animate="visible">
  {items.map((i) => (
    <motion.li key={i.id} variants={item}>
      {i.content}
    </motion.li>
  ))}
</motion.ul>

Timing guide:

  • 3–5 items: staggerChildren: 0.1
  • 6–12 items: staggerChildren: 0.06
  • 12+ items: staggerChildren: 0.03 (or animate as a group)

Anti-pattern: Don't stagger more than ~15 items individually — it feels slow. Group them or use a wave effect.

Pattern 3: Layout Animations

Automatically animate between layout states. Motion's killer feature.

tsx
<motion.div layout transition={{ type: "spring", stiffness: 300, damping: 25 }}>
  {isExpanded ? <ExpandedContent /> : <CollapsedContent />}
</motion.div>
Shared Layout (Tabs, Active Indicators)
tsx
{tabs.map((tab) => (
  <button key={tab.id} onClick={() => setActive(tab.id)}>
    {tab.label}
    {active === tab.id && (
      <motion.div
        layoutId="activeTab"
        className="absolute inset-0 bg-primary rounded-md"
        transition={{ type: "spring", stiffness: 400, damping: 30 }}
      />
    )}
  </button>
))}

When to use: Tab indicators, expanding cards, reordering lists, filtering grids.

Performance tip: Add layout="position" if you only need to animate position (not size). It's cheaper.

Pattern 4: Exit Animations (AnimatePresence)

Elements animate out before being removed from the DOM.

tsx
<AnimatePresence mode="wait">
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ type: "spring", stiffness: 300, damping: 25 }}
    >
      Modal content
    </motion.div>
  )}
</AnimatePresence>
AnimatePresence modes
ModeBehaviorUse for
"sync" (default)Enter and exit at the same timeCrossfade effects
"wait"Wait for exit to finish before enteringPage transitions, modals
"popLayout"Exiting element pops out of layout flowLists where items are removed

Pattern 5: Hover & Tap Micro-interactions

tsx
<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.98 }}
  transition={{ type: "spring", stiffness: 500, damping: 30 }}
>
  Click me
</motion.button>
Hover Patterns by Element Type
ElementwhileHoverwhileTap
Button (primary){ scale: 1.02 }{ scale: 0.98 }
Card{ y: -4, boxShadow: "0 8px 30px rgba(0,0,0,0.12)" }—
Icon button{ scale: 1.1 }{ scale: 0.9 }
Link{ x: 2 }—
Avatar{ scale: 1.05 }—

Anti-pattern: Don't scale buttons more than 1.05 — it looks cartoonish. Subtle (1.01–1.03) feels premium.

Pattern 6: Scroll-Triggered Animations

Show full SKILL.md (319 more words)Show less
Animate on Scroll Into View
tsx
<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
  transition={{ type: "spring", stiffness: 200, damping: 20 }}
>
  Appears when scrolled into view
</motion.div>

viewport.once: true — Only animate the first time (most common for landing pages). viewport.margin — Negative margin triggers earlier (before element is fully visible).

Scroll-Linked Progress
tsx
const { scrollYProgress } = useScroll()
const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0])
const y = useTransform(scrollYProgress, [0, 0.3], [0, -50])

<motion.div style={{ opacity, y }}>
  Parallax hero content
</motion.div>

Pattern 7: Page Transitions

tsx
// In your layout or page wrapper
<AnimatePresence mode="wait">
  <motion.main
    key={pathname}
    initial={{ opacity: 0, y: 8 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -8 }}
    transition={{ type: "spring", stiffness: 300, damping: 30 }}
  >
    {children}
  </motion.main>
</AnimatePresence>

Keep it subtle. Page transitions should be fast (200–300ms feel) and small (8–12px movement). Flashy page transitions feel like 2015.

Pattern 8: Number/Text Transitions

tsx
// Animate a counter
<motion.span
  key={count}
  initial={{ opacity: 0, y: -10 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: 10 }}
>
  {count}
</motion.span>

Wrap in AnimatePresence for the exit animation. Great for dashboards, pricing, live data.

Anti-Patterns to Avoid

❌ Don't✅ Do Instead
Animate width/height directlyUse scale or layout animations
Large movement values (y: 200)Subtle values (y: 16–24)
Bounce on everythingReserve bounce for playful/celebratory moments
Animate on every scroll eventUse whileInView with once: true
Different timing for every elementUse consistent spring configs project-wide
Animation on page load for everythingPrioritize above-the-fold; stagger the rest
Custom easing curvesUse springs — they respond to interruption better

When building animated components, reference these for patterns and inspiration:

  • Magic UI — 150+ animated React components, shadcn/ui compatible
  • Motion Primitives — Copy-paste motion components for React
  • Aceternity UI — Trendy animated components (heavier, more dramatic)

When a user wants a specific animated component (text reveal, animated border, gradient animation, etc.), check these libraries first — there's likely a battle-tested implementation.

Quick Decision Guide

ScenarioPatternSpring Config
Card appearingFade + Risesmooth
List loadingStaggered Listsmooth, 0.08s stagger
Tab switchingShared Layout (layoutId)snappy
Modal open/closeAnimatePresence + scalesmooth
Button presswhileHover + whileTapsnappy
Landing page sectionsScroll-triggeredgentle
Page navigationPage Transitionsmooth
Dashboard counterNumber Transitionsnappy
Notification popupFade + Rise + bouncebouncy
Accordion expandLayout animationsmooth

Examples

Example 1: "Add animations to this card grid"

Apply staggered fade+rise entrance to the grid, hover lift effect on each card:

tsx
<motion.div
  variants={container}
  initial="hidden"
  animate="visible"
  className="grid grid-cols-3 gap-4"
>
  {cards.map((card) => (
    <motion.div
      key={card.id}
      variants={item}
      whileHover={{ y: -4, boxShadow: "0 8px 30px rgba(0,0,0,0.12)" }}
      transition={{ type: "spring", stiffness: 300, damping: 25 }}
    >
      <Card {...card} />
    </motion.div>
  ))}
</motion.div>
Example 2: "Make this modal feel better"

Wrap in AnimatePresence, add scale + opacity entrance/exit, overlay fade:

tsx
<AnimatePresence>
  {isOpen && (
    <>
      <motion.div
        className="fixed inset-0 bg-black/50"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
      <motion.div
        className="fixed inset-0 flex items-center justify-center"
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.95 }}
        transition={{ type: "spring", stiffness: 300, damping: 25 }}
      >
        <ModalContent onClose={onClose} />
      </motion.div>
    </>
  )}
</AnimatePresence>
Example 3: "Add scroll animations to this landing page"

Apply whileInView with staggered children to each section:

tsx
<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
  transition={{ type: "spring", stiffness: 200, damping: 20 }}
>
  <h2>Feature Section</h2>
  <motion.div
    variants={container}
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}
  >
    {features.map((f) => (
      <motion.div key={f.id} variants={item}>
        <FeatureCard {...f} />
      </motion.div>
    ))}
  </motion.div>
</motion.section>

© dylanfeltus, 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 1 other file in motion-design-patterns of dylanfeltus/skills.

  • SKILL.md
  • README.md

Open the folder on GitHubat commit b97a48f

Compare with similar skills

Motion Design Patterns for React next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Motion Design Patterns for React compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Motion Design Patterns for React this skilldylanfeltus/skills179—~3kAutomated safety check: PassMIT
GSAP for Reactgreensock/gsap-skills16k4 repos~1.6kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2601 repos~5.7kAutomated safety check: PassCustom licence
Animatedelphi-ai/animate-skill107—~1.3kAutomated safety check: PassNone
Awwwards-Level React AnimationsHainrixz/editor-pro-max260—~4.4kAutomated safety check: PassCustom licence
Framer MotionAThevon/genjutsu4161 repos~1.9kAutomated safety check: PassCustom licence

Similar skills

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 4 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    260 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Animate

    delphi-ai/animate-skill

    Animation patterns and best practices for Next.js/React applications.

    107 GitHub stars~1.3k tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • Awwwards-Level React Animations

    Hainrixz/editor-pro-max

    Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

    260 GitHub stars~4.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Framer Motion

    AThevon/genjutsu

    Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.

    416 GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed

  • Motion Dev Animations

    199-biotechnologies/motion-dev-animations-skill

    Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.

    104 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes

More from dylanfeltus/skills

All 10 skills in this repo

  • App Store Intelligence

    dylanfeltus/skills

    Looks up app details, ratings and reviews and searches the iOS and Mac App Stores through Apple's free iTunes APIs, with a web-search fallback for Google Play.

    179 GitHub stars~2k tokensUpdated 20 days ago
    Auto-check passed

  • AI Image Creative Direction

    dylanfeltus/skills

    Gives prompt templates, a model-selection guide and anti-generic rules for AI-generated visuals: hero images, feature illustrations, OG cards, icons and backgrounds.

    179 GitHub stars~2.6k tokensUpdated 20 days ago
    Auto-check passed

  • Design Token Generator

    dylanfeltus/skills

    Generates type scales, color palettes, spacing systems, WCAG contrast checks and dark mode palettes from formulas, as CSS custom properties, a Tailwind config or JSON tokens.

    179 GitHub stars~2.9k tokensUpdated 20 days ago
    Auto-check passed

  • Hacker News Search

    dylanfeltus/skills

    Searches and monitors Hacker News stories, comments and users through the free Algolia HN Search API, with tag, points and date filters.

    179 GitHub stars~1.7k tokensUpdated 20 days ago
    Auto-check passed

  • Privacy.com Virtual Cards

    dylanfeltus/skills

    Creates, updates, and monitors Privacy.com virtual payment cards with spending limits for an agent making controlled purchases.

    179 GitHub stars~2.2k tokensUpdated 20 days ago
    Auto-check passed

  • Product Hunt Search and Monitoring

    dylanfeltus/skills

    Looks up Product Hunt launches, products and makers through its GraphQL API: daily top posts, topic browsing and per-post details, using a free developer token.

    179 GitHub stars~1.7k tokensUpdated 20 days ago
    Auto-check passed

Works with

Categories

Questions about Motion Design Patterns for React

What does Motion Design Patterns for React do?

Framer Motion (Motion) patterns for React: spring presets, staggers, layout animations, micro-interactions, scroll effects and page transitions, with performance rules. This skill collects animation patterns for React with the Motion library, the package formerly named framer-motion, installed with `npm install motion` and imported from `motion/react`. It argues that motion should be purposeful, that one well-tuned spring beats several competing animations, and that only `transform` and `opacity` should be animated, never width, height, top, left or margin.

When should I use Motion Design Patterns for React?

Motion Design Patterns for React fits situations like: adding entrance, exit or hover animations to a React project; making lists, cards, modals or navigation feel more polished; choosing consistent spring settings across an app; building scroll-triggered effects or page transitions.

How do I install Motion Design Patterns for React in Claude Code?

Run `npx skills add dylanfeltus/skills --skill motion-design-patterns -a claude-code`. Or copy the skill folder (motion-design-patterns in dylanfeltus/skills) into .claude/skills/motion-design-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Motion Design Patterns for React in Codex?

Run `npx skills add dylanfeltus/skills --skill motion-design-patterns -a codex`. Or copy the skill folder (motion-design-patterns in dylanfeltus/skills) into .agents/skills/motion-design-patterns in your project. Codex loads it when a task matches its description.

Can I use Motion Design Patterns for React in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dylanfeltus/skills --skill motion-design-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/motion-design-patterns, .gemini/skills/motion-design-patterns, .github/skills/motion-design-patterns and .opencode/skills/motion-design-patterns in your project.

What does Motion Design Patterns for React need to run?

Going by SKILL.md and its folder, Motion Design Patterns for React needs the command-line tools its instructions call (npm). Our summary lists: A React project; The motion package (npm install motion).

Does Motion Design Patterns for React access the network?

SKILL.md names 3 domains. As links in the text: magicui.design, motion-primitives.com and ui.aceternity.com. This is read from the text; nothing was executed.

Is Motion Design Patterns for React safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Motion Design Patterns for React use?

Motion Design Patterns for React is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Motion Design Patterns for React use?

About 3k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Motion Design Patterns for React?

Skills that share tags, products or a category with Motion Design Patterns for React: GSAP for React (greensock/gsap-skills, 16k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 260 stars), Animate (delphi-ai/animate-skill, 107 stars) and Awwwards-Level React Animations (Hainrixz/editor-pro-max, 260 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Motion Design Patterns for React?

dylanfeltus (a GitHub user) maintains it in dylanfeltus/skills, which has 179 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on September 17, 2026.

Source: dylanfeltus/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.