React · Web animation and motion

Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

greensock/gsap-skills

Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.

vercel-labs/next-beats

Rebuilds existing web pages as editable local code that matches their content, assets, responsive layout and interactions, including Framer sites and animated pages.

JCodesMore/ai-website-cloner-template

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

greensock/gsap-skills

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.

Hainrixz/editor-pro-max

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

199-biotechnologies/motion-dev-animations-skill

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

bendrape1-byte/silk-design

Covers GSAP plugin use: registration, scroll, Flip, Draggable, SVG, text, physics and easing plugins, with the current free licensing and npm install guidance.

greensock/gsap-skills

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

anl331/goey-toast

交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。

pixelxzen/phantom-motion

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

delphi-ai/animate-skill

Guides use of Anime.js for timeline sequences, stagger effects, SVG morphing and keyframe animation on DOM elements, CSS, SVG and JavaScript objects.

freshtechbro/claudedesignskills

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.

Hainrixz/editor-pro-max

Turns an article or spoken script into a click-through, full-screen 16:9 web presentation that looks like a video, with optional synthesized narration.

ConardLi/garden-skills

Decides whether an interface effect belongs in CSS, SVG, Canvas 2D, WebGL or WebGPU, then builds, debugs and visually verifies focused GPU effects inside product UIs.

v2space-labs/shader-for-interfaces

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.

microsoft/skills

A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.

AnastasiyaW/codex-claude-code-config

Breaks a shared video or GIF down frame by frame to recreate its motion as working code instead of guessing the timing by eye.

sendaifun/skills

Animation skill for Motion (prev Framer Motion) and CSS animation.

softmaple/softmaple

A skill your agent uses when implementing Disney's 12 animation principles with Framer Motion in React applications

calesthio/OpenMontage

Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects.

julianromli/opencode-template

Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.

freshtechbro/claudedesignskills

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

dylanfeltus/skills

Animate react-horizontal-scrolling-menu scrolling and build right-to-left menus: noPolyfill defaults to true since v8, so transitionDuration (default 500), a custom-easing-function…

asmyshlyaev177/react-horizontal-scrolling-menu

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques.

Dinil-Thilakarathne/sona-ui

Guides React UI animation built on spring physics with React Spring and Popmotion: hooks, config presets, trails, list transitions and scroll or in-view effects.

freshtechbro/claudedesignskills

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

AThevon/genjutsu

Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

KumarSashank/motiscope

Builds interactive Rive animations for the web and React: state machines, inputs, ViewModel data binding and events, with scripts that generate component code.

freshtechbro/claudedesignskills

GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.

AThevon/genjutsu

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG.

theexperiencecompany/gaia

Simple scroll-triggered reveal animations using AOS (Animate On Scroll).

freshtechbro/claudedesignskills

Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

KumarSashank/motiscope

A skill your agent uses whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion…

github/awesome-copilot

Clone any website's landing page with pixel-perfect fidelity.

SylphAI-Inc/skills

AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.

first-fluke/oh-my-agent

Modern web design trends, principles, and implementation patterns for 2024-2025.

freshtechbro/claudedesignskills

Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees…

nirholas/three.ws

Emil Kowalski's animation best practices for web interfaces.

theexperiencecompany/gaia

A skill your agent uses when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React.

nirholas/three.ws

Motion (Framer Motion) React animation library. An agent skill from secondsky/claude-skills.

secondsky/claude-skills

Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences.

freshtechbro/claudedesignskills

Implement smooth, accessible animations with motion/react (Framer Motion) in React.

Asymmetric-al/core

Tasteful, subtle web UI animation following Emil Kowalski / animations.dev principles.

Asymmetric-al/core

Generate animated videos and motion graphics from natural language descriptions.

OneWave-AI/claude-skills