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

Animation Patterns

by vibeeval in vibeeval/vibecosystem

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

MITAuto-check passedFrontend & Design

Install Animation Patterns

skills CLI
$ npx skills add vibeeval/vibecosystem --skill animation-patterns -a claude-code

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

GitHub CLI
$ gh skill install vibeeval/vibecosystem animation-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/vibeeval/vibecosystem.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/animation-patterns .claude/skills/animation-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
animation-patterns
GitHub stars
531
Token cost
~3k tokens
SKILL.md length
43 words
Files
1
Skills in repo
144
Repo updated
First seen
Licence
MIT

At a glance

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

  • Tasks that involve Web animation and motion
  • SKILL.md covers Framer Motion Basics (motion…, Page Transitions with…, Layout Animations (Shared… and Skeleton Loading Components, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Animation Patterns is an agent skill from vibeeval/vibecosystem. Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.

Its SKILL.md is about 3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Web animation and motion. It works with Motion and React. The repository describes itself as: AI software team for Claude Code - 138 agents, 295 skills, 73 hooks. Self-learning, multi-agent swarm, autonomous skill evolution. The licence is MIT.

When your agent uses it

  • Tasks that involve Web animation and motion

Example prompts

  • “/animation-patterns”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 3b763b1. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

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

  • Network

    No URLs in SKILL.md.

    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

Animation Patterns loads about 3k tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 43 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~37
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 vibeeval/vibecosystem at commit 3b763b1, republished under its MIT licence (© vibeeval). 43 words, ~2,959 tokens.

Download SKILL.mdSave it as .claude/skills/animation-patterns/SKILL.md (or your agent's skills folder).
name
animation-patterns
description
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.

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

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

Files

Just SKILL.md in skills/animation-patterns of vibeeval/vibecosystem.

Open the folder on GitHubat commit 3b763b1

Compare with similar skills

Animation Patterns 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.

Animation Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Animation Patterns this skillvibeeval/vibecosystem531—~3kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2601 repos~5.7kAutomated safety check: PassCustom licence
Motion Dev Animations199-biotechnologies/motion-dev-animations-skill1041 repos~2.8kAutomated safety check: NotesMIT
Silk Designbendrape1-byte/silk-design138—~1.8kAutomated safety check: PassMIT
Goey Toastanl331/goey-toast1.3k—~1.3kAutomated safety check: WarnMIT
Animatedelphi-ai/animate-skill107—~1.3kAutomated safety check: PassNone

Similar skills

  • 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

  • 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

  • Silk Design

    bendrape1-byte/silk-design

    Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop.

    138 GitHub stars~1.8k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Goey Toast

    anl331/goey-toast

    Install and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion.

    1.3k GitHub stars~1.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: warnings

  • 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

More from vibeeval/vibecosystem

All 144 skills in this repo

  • Agent Benchmark

    vibeeval/vibecosystem

    Framework for measuring and tracking agent response quality over time.

    531 GitHub stars~2.9k tokensUpdated 1 mo ago
    Auto-check passed

  • Differential Review

    vibeeval/vibecosystem

    Security-focused differential code review with blast radius analysis, risk-adaptive depth (DEEP/FOCUSED/SURGICAL), git history correlation, and structured finding format.

    531 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed

  • Factcheck Guard

    vibeeval/vibecosystem

    A skill your agent uses when making any factual claim about the codebase — existence, absence, or behavior.

    531 GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Fp Check

    vibeeval/vibecosystem

    Systematic false positive verification for security findings.

    531 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed

  • N8n Workflows

    vibeeval/vibecosystem

    n8n otomasyon workflow'lari. An agent skill from vibeeval/vibecosystem.

    531 GitHub stars~3.3k tokensUpdated 1 mo ago
    Auto-check passed

  • Notepad System

    vibeeval/vibecosystem

    A skill your agent uses when context compression is imminent, when resuming a session, or when preserving critical decisions across long tasks.

    531 GitHub stars~1.7k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Animation Patterns

What does Animation Patterns do?

Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React. Animation Patterns is an agent skill from vibeeval/vibecosystem. Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.

When should I use Animation Patterns?

Animation Patterns fits situations like: tasks that involve Web animation and motion.

How do I install Animation Patterns in Claude Code?

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

How do I install Animation Patterns in Codex?

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

Can I use Animation Patterns 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 vibeeval/vibecosystem --skill animation-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/animation-patterns, .gemini/skills/animation-patterns, .github/skills/animation-patterns and .opencode/skills/animation-patterns in your project.

What does Animation Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Animation Patterns is instructions for the agent only. Our summary lists: Node.js.

Does Animation Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Animation Patterns 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 Animation Patterns use?

Animation Patterns 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 Animation Patterns 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 Animation Patterns?

Skills that share tags, products or a category with Animation Patterns: Animated React Component Libraries (Hainrixz/editor-pro-max, 260 stars), Motion Dev Animations (199-biotechnologies/motion-dev-animations-skill, 104 stars), Silk Design (bendrape1-byte/silk-design, 138 stars) and Goey Toast (anl331/goey-toast, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Animation Patterns?

vibeeval (a GitHub user) maintains it in vibeeval/vibecosystem, which has 531 GitHub stars. The repository holds 144 skills in this directory. The repository was last updated on August 8, 2026.

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