Home / Stacks / Web Animation Studio
✨

Web Animation Studio

Craft high-fidelity motion for the web — timeline and SVG animation with GSAP and Anime.js, React gestures and springs with Framer Motion and React Spring, After Effects playback with Lottie, zero-config transitions with AutoAnimate, and 3D scenes with Three.js

8 skills · Works with Claude Code, Codex, Cursor & more

🎨 Design
RARE

GSAP Animation

Build production-grade web animations with GSAP (GreenSock). Creates timeline sequences, scroll-triggered effects, SVG and text animation, and physics-based easing with performant, framework-agnostic code.

Community 2.6K
Scanned
gsap animation scrolltrigger
mkdir -p ~/.claude/skills/gsap && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/gsap/SKILL.md -o ~/.claude/skills/gsap/SKILL.md
🎨 Design
RARE

Framer Motion Animations

Create fluid animations and transitions in React with Framer Motion. Generates layout animations, gesture interactions, scroll-triggered effects, page transitions, and complex orchestrated sequences.

Community 3.1K
Scanned
animation framer-motion react
mkdir -p ~/.claude/skills/framer-motion && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/framer-motion/SKILL.md
🎨 Design
RARE

React Spring Animations

Build physics-based animations in React with React Spring. Creates spring-driven transitions, gesture-linked motion, trails, and imperative animation controllers that respond naturally to state changes.

Community 2.4K
Scanned
react-spring animation react
mkdir -p ~/.claude/skills/react-spring && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/react-spring/SKILL.md
🎨 Design
RARE

Anime.js Motion

Animate anything on the web with Anime.js — a lightweight, framework-agnostic JS animation engine. Builds timelines, staggered grids, SVG line drawing and morphing, and scroll-triggered sequences with fine-grained easing control.

Community 2.1K
Scanned
anime-js animation javascript
mkdir -p ~/.claude/skills/anime-js && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/javascript-pro/SKILL.md -o ~/.claude/skills/anime-js/SKILL.md
🎨 Design
RARE

Lottie Animations

Render After Effects animations on the web with Lottie. Integrates lottie-react and lottie-web, controls playback and segments, syncs animation to scroll or state, and optimizes JSON payloads for performance.

Community 1.9K
Scanned
lottie animation after-effects
mkdir -p ~/.claude/skills/lottie-web && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/lottie-web/SKILL.md
🎨 Design
RARE

AutoAnimate Transitions

Add zero-config motion to any UI with FormKit AutoAnimate. Drops a single directive onto a parent element to smoothly animate children as they are added, removed, or reordered — across React, Vue, Svelte, Solid, and vanilla JS.

Community 1.6K
Scanned
auto-animate formkit animation
mkdir -p ~/.claude/skills/auto-animate && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/auto-animate/SKILL.md
🌐 Community
RARE

Three.js Scenes & Shaders

Build production-quality vanilla Three.js scenes (no R3F) — voxel worlds, procedural geometry, instancing/BatchedMesh, particle systems, and GLSL shader effects (bloom, god rays, depth of field, glitch). Includes EffectComposer post-processing and draw-call optimization.

tuomashatakka 1.1K
Scanned
threejs glsl shaders
mkdir -p ~/.claude/skills/threejs-scenes && curl -fsSL https://raw.githubusercontent.com/tuomashatakka/threejs-scenes-skill/HEAD/skill/SKILL.md -o ~/.claude/skills/threejs-scenes/SKILL.md
🎨 Design
RARE

Tailwind UI Components

Generate production-ready UI components using Tailwind CSS. Creates responsive layouts, interactive elements, dark mode variants, and accessible components following Tailwind best practices and design patterns.

Community 5.1K
Scanned
tailwind css ui-components
mkdir -p ~/.claude/skills/tailwind-components && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/frontend-component-build/SKILL.md -o ~/.claude/skills/tailwind-components/SKILL.md

More Stacks

🤝

Agent Engineering Kit

Engineer reliable AI agents — build on the Claude Agent SDK, coordinate teams with multi-agent patterns, give them memory, and keep them safe with mechanical guardrails and evaluation
🕹️

AI Agent Frameworks

Pick the right framework and ship agents fast — type-safe Python with Pydantic AI, multi-agent orchestration with OpenAI Agents SDK, Agno, and CrewAI, TypeScript graphs with LangGraph.js, and typed workflows with Mastra
🤖

AI Builder Stack

Build AI-powered applications with RAG, multi-agent systems, prompt engineering, and MCP integrations

View all stacks →

Added to wishlist