Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Animation Patterns · vibeeval | DecimalAI

Animation Patterns

SkillScore41Maintained

animation-patterns

Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.

Frontendby vibeeval

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/animation-patterns/SKILL.md

decimalai skills pull animation-patterns --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/animation-patterns/SKILL.md https://app.decimal.ai/s/animation-patterns/SKILL.md

Raw file: /s/animation-patterns/SKILL.md ↗ · machine-readable summary at /s/animation-patterns.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 55d ago

Yes — +23% lift · at higher cost+108% tokens0% turns41% of whole cases pass with skill (9/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-08	✗→✓	▲ Improved	—	—
case-10	✗→✓	▲ Improved	—	—
case-06	✗→✓	▲ Improved	—	—
case-04	✗→✓	▲ Improved	—	—
case-15	✗→✓	▲ Improved	—	—

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 7/30/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

vibeeval / vibecosystem

skills/animation-patterns/SKILL.md

View on GitHub ↗

License MIT LicenseImported 8/1/2026Version v1

Skill contents

SKILL.md

Animation Patterns

Framer Motion patterns for production-quality React animations.

Framer Motion Basics (motion components, variants)

typescript
// Install: npm install framer-motion

import { motion } from 'framer-motion'

// Basic motion component
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, ease: 'easeOut' }}
/>

// Variants — define states, animate by name
const cardVariants = {
  hidden: { opacity: 0, y: 20, scale: 0.98 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: { duration: 0.25, ease: [0.16, 1, 0.3, 1] },
  },
  hover: {
    y: -4,
    boxShadow: '0 12px 24px -4px rgb(0 0 0 / 0.15)',
    transition: { duration: 0.2 },
  },
}

function Card({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      variants={cardVariants}
      initial="hidden"
      animate="visible"
      whileHover="hover"
      className="rounded-lg border bg-white p-4"
    >
      {children}
    </motion.div>
  )
}

Page Transitions with AnimatePresence

typescript
import { AnimatePresence, motion } from 'framer-motion'
import { usePathname } from 'next/navigation'

const pageVariants = {
  initial: { opacity: 0, x: -8 },
  enter:   { opacity: 1, x: 0, transition: { duration: 0.2, ease: 'easeOut' } },
  exit:    { opacity: 0, x: 8,  transition: { duration: 0.15, ease: 'easeIn' } },
}

// app/layout.tsx (Next.js App Router)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

  return (
    <html>
      <body>
        <AnimatePresence mode="wait">
          <motion.main
            key={pathname}
            variants={pageVariants}
            initial="initial"
            animate="enter"
            exit="exit"
          >
            {children}
          </motion.main>
        </AnimatePresence>
      </body>
    </html>
  )
}

// Modal transitions — mount/unmount
function Modal({ isOpen, onClose, children }: ModalProps) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            key="overlay"
            className="fixed inset-0 bg-black/40"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
          />
          <motion.div
            key="modal"
            className="fixed inset-x-4 top-[10%] mx-auto max-w-lg rounded-xl bg-white p-6 shadow-xl"
            initial={{ opacity: 0, scale: 0.96, y: 16 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.96, y: 8 }}
            transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
          >
            {children}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}

Layout Animations (Shared Layout, Layout ID)

typescript
import { motion, LayoutGroup } from 'framer-motion'
import { useState } from 'react'

// Tabs with animated indicator
function AnimatedTabs({ tabs }: { tabs: string[] }) {
  const [active, setActive] = useState(tabs[0])

  return (
    <LayoutGroup>
      <div className="flex gap-1 rounded-lg bg-gray-100 p-1">
        {tabs.map(tab => (
          <button
            key={tab}
            onClick={() => setActive(tab)}
            className="relative px-4 py-2 text-sm font-medium"
          >
            {active === tab && (
              <motion.div
                layoutId="tab-indicator"      // shared across tabs
                className="absolute inset-0 rounded-md bg-white shadow-sm"
                transition={{ type: 'spring', stiffness: 400, damping: 30 }}
              />
            )}
            <span className="relative z-10">{tab}</span>
          </button>
        ))}
      </div>
    </LayoutGroup>
  )
}

// Expandable card with layout animation
function ExpandableCard({ title, body }: { title: string; body: string }) {
  const [expanded, setExpanded] = useState(false)

  return (
    <motion.div
      layout                                // animate height changes
      className="rounded-lg border bg-white p-4 cursor-pointer"
      onClick={() => setExpanded(e => !e)}
    >
      <motion.h3 layout="position" className="font-semibold">{title}</motion.h3>
      <AnimatePresence>
        {expanded && (
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="mt-2 text-gray-600 text-sm"
          >
            {body}
          </motion.p>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

Skeleton Loading Components

typescript
// Base skeleton primitive
function Skeleton({ className }: { className?: string }) {
  return (
    <div
      className={cn('animate-pulse rounded bg-gray-200 dark:bg-gray-700', className)}
      aria-hidden="true"
    />
  )
}

// Shimmer variant (more polished)
function SkeletonShimmer({ className }: { className?: string }) {
  return (
    <div className={cn('relative overflow-hidden rounded bg-gray-200', className)}>
      <motion.div
        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent"
        animate={{ x: ['-100%', '100%'] }}
        transition={{ repeat: Infinity, duration: 1.2, ease: 'linear' }}
      />
    </div>
  )
}

// Card skeleton
function CardSkeleton() {
  return (
    <div className="rounded-lg border bg-white p-4 space-y-3" aria-busy="true" aria-label="Loading">
      <div className="flex items-center gap-3">
        <Skeleton className="size-10 rounded-full" />
        <div className="flex-1 space-y-2">
          <Skeleton className="h-4 w-1/2" />
          <Skeleton className="h-3 w-1/3" />
        </div>
      </div>
      <Skeleton className="h-3 w-full" />
      <Skeleton className="h-3 w-4/5" />
      <Skeleton className="h-8 w-24 rounded-md" />
    </div>
  )
}

Scroll-Linked Animations

typescript
import { useScroll, useTransform, motion } from 'framer-motion'
import { useRef } from 'react'

// Parallax hero
function ParallaxHero() {
  const ref = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'] })

  const y = useTransform(scrollYProgress, [0, 1], ['0%', '50%'])
  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0])

  return (
    <div ref={ref} className="relative h-screen overflow-hidden">
      <motion.div style={{ y, opacity }} className="absolute inset-0">
        <img src="/hero.jpg" alt="" className="w-full h-full object-cover" />
      </motion.div>
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-6xl font-bold text-white">Hero Title</h1>
      </div>
    </div>
  )
}

// Fade-in on scroll (section reveal)
function FadeInSection({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start 0.9', 'start 0.6'] })
  const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])
  const y = useTransform(scrollYProgress, [0, 1], [24, 0])

  return (
    <motion.div ref={ref} style={{ opacity, y }}>
      {children}
    </motion.div>
  )
}

Staggered Children Animations

typescript
const listVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.06,     // 60ms between each child
      delayChildren: 0.1,
    },
  },
}

const itemVariants = {
  hidden:  { opacity: 0, x: -12 },
  visible: { opacity: 1, x: 0, transition: { duration: 0.25, ease: 'easeOut' } },
}

function AnimatedList({ items }: { items: string[] }) {
  return (
    <motion.ul variants={listVariants} initial="hidden" animate="visible" className="space-y-2">
      {items.map(item => (
        <motion.li key={item} variants={itemVariants} className="rounded border p-3">
          {item}
        </motion.li>
      ))}
    </motion.ul>
  )
}

Gesture Interactions (Drag, Tap, Hover)

typescript
import { motion, useDragControls } from 'framer-motion'

// Draggable card
function DraggableCard() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
      dragElastic={0.1}
      whileDrag={{ scale: 1.05, rotate: 2, cursor: 'grabbing' }}
      className="cursor-grab rounded-lg bg-white p-4 shadow"
    >
      Drag me
    </motion.div>
  )
}

// Bottom sheet (drag to dismiss)
function BottomSheet({ onClose }: { onClose: () => void }) {
  return (
    <motion.div
      drag="y"
      dragConstraints={{ top: 0 }}
      onDragEnd={(_, info) => {
        if (info.offset.y > 100) onClose()
      }}
      initial={{ y: '100%' }}
      animate={{ y: 0 }}
      exit={{ y: '100%' }}
      transition={{ type: 'spring', damping: 30, stiffness: 300 }}
      className="fixed bottom-0 inset-x-0 rounded-t-2xl bg-white p-6 shadow-lg"
    >
      <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-gray-300" />
      {/* content */}
    </motion.div>
  )
}

// Press / tap feedback
function PressButton({ children, onClick }: ButtonProps) {
  return (
    <motion.button
      whileTap={{ scale: 0.97 }}
      whileHover={{ scale: 1.02 }}
      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
      onClick={onClick}
      className="btn btn-primary"
    >
      {children}
    </motion.button>
  )
}

Reduced Motion Respect

typescript
import { useReducedMotion, motion } from 'framer-motion'

// Hook-based — apply conditionally
function FadeIn({ children }: { children: React.ReactNode }) {
  const prefersReducedMotion = useReducedMotion()

  return (
    <motion.div
      initial={{ opacity: prefersReducedMotion ? 1 : 0 }}
      animate={{ opacity: 1 }}
      transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.3 }}
    >
      {children}
    </motion.div>
  )
}

// Global — wrap app with MotionConfig
import { MotionConfig } from 'framer-motion'

export function Providers({ children }: { children: React.ReactNode }) {
  const prefersReducedMotion = useReducedMotion()
  return (
    <MotionConfig reducedMotion={prefersReducedMotion ? 'always' : 'never'}>
      {children}
    </MotionConfig>
  )
}

// CSS fallback (always include alongside JS animations)
// @media (prefers-reduced-motion: reduce) { .animated { animation: none !important; } }

Performance Tips

typescript
// 1. Use transform properties — GPU accelerated
// GOOD: x, y, scale, rotate, opacity (compositor layer)
// BAD: width, height, top, left, margin (layout thrash)

// 2. will-change for known animations (use sparingly)
<motion.div style={{ willChange: 'transform' }} />

// 3. layout prop only when needed — triggers LayoutAnimation (expensive)
<motion.div layout />          // layout: expensive, triggers every render
<motion.div layout="position"> // layout="position": cheaper, only position

// 4. LazyMotion — reduces bundle size (removes unused features)
import { LazyMotion, domAnimation, m } from 'framer-motion'

<LazyMotion features={domAnimation}>  {/* load only DOM animations */}
  <m.div animate={{ opacity: 1 }} />  {/* use m instead of motion */}
</LazyMotion>

// 5. Avoid animating inside virtualized lists
// AnimatePresence + virtualization = bugs. Use CSS transitions for list items.

// 6. Spring physics vs duration — springs feel more natural
const spring = { type: 'spring', stiffness: 300, damping: 25 }
const duration = { duration: 0.3, ease: [0.16, 1, 0.3, 1] }
// Springs: interactive elements (drag release, hover)
// Duration: page transitions, content reveal

Illustrative Want to see what animation-patterns would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

7/29/2026, 00:09 UTC · 22 cases

Lift

+23%

41% vs 18%

Agent turns

0%

1.0 vs 1.0

Tokens

+108%

6,138.73 vs 2,954

fail → pass · 5pass → pass · 4fail → fail · 13

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 We are designing a marketing landing page and want to implement scroll-linked visual effects: a parallax hero image section that smoothly transforms as the user scrolls, and a section reveal component that animates into view when scrolled into position. Additionally, supply a shimmer skeleton loading UI component for content placeholders. Share the TypeScript code for these components using Framer Motion.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-07 Create a list component in React where items fade in one after another when the list mounts.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-05 Write a React expandable card component that smoothly animates its container height when toggling open and closed.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-09 Write a bottom sheet component in React that users can pull down to close when dragged past a threshold.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-12 Create an App Providers component in React that enforces reduced motion globally across all interactive motion components when operating under user accessibility constraints.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-18 How should layout animation props be applied to a parent container versus child heading text when container dimensions change?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-17 Write the transition configuration for a mobile slide-up sheet in React to make snapping feel responsive and physical.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-20 Write a pure CSS stylesheet with `@keyframes` for a spinning loading indicator and a pulse keyframe animation. Do not use any JavaScript libraries.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-22 Write a vanilla JavaScript HTML5 Canvas 2D render loop using `requestAnimationFrame` that animates bouncing particles across a canvas element.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-13 Write a lightweight animated card component in React that minimizes bundle size overhead by loading DOM animation features on demand.	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-11 Write a React fade-in wrapper component that disables opacity motion when the user has enabled OS reduced motion preferences.	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-08 Implement a card component in React that users can click and drag within bounded pixel boundaries.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-16 Write a React component for a full card loading skeleton that communicates its loading status to screen readers.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-10 Write a reusable React button component that gives springy tactile animation feedback when hovered or pressed.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-21 Write a plain JavaScript function that uses the browser's native Web Animations API (`element.animate()`) to scale and fade out an HTML element when clicked.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-19 Write a scroll-triggered section reveal component in React that starts fading and translating in when the top of the section reaches 90% of the viewport height and completes at 60%.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-06 Write a base React skeleton loader component in Tailwind CSS for placeholder state styling.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-02 Provide a React root layout page transition component for a Next.js App Router site using a React animation library. We want to animate page exits and entrances smoothly whenever the current URL changes.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-03 Write a React Modal dialog component that handles entering and exiting animations when an isOpen boolean prop changes. Include a backdrop overlay and modal card.	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-04 Implement a tab navigation component in React where switching active tabs animates a highlight indicator background smoothly between the selected tabs.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-14 We are configuring transition physics across our React web app. Explain and implement the transition settings for interactive drag/hover elements versus page transitions.	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-15 Write a React card component that cleanly separates animation states into reusable state objects with initial, enter, and hover behaviors.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +23 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 18.2%
Pass rate with the skill: 40.9%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 7/29/2026, 00:09 UTC

The per-case answers from this run were removed by the retention sweep, so the case table below shows the verdicts without the text either arm produced. The counts above were recorded at the time and are unaffected. Answers are now kept for 180 days.

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run41

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+102% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 55 days ago

Other measured skills in the registry, with their headline benchmark lift.