Motion Asset Hunter

Find, evaluate, and adapt premium animation assets from across the web. This skill helps you discover production-ready animations, reference implementations, and open-source code to use or learn from.

Why Hunt for Assets?

• Don't reinvent: Someone likely built what you need
• Learn patterns: Study professional implementations
• Save time: Adapt existing code vs building from scratch
• Quality reference: See how experts solve problems
• Legal clarity: Find properly licensed assets

Core Workflows

Workflow 1: Search CodePen

Best Search Strategies:

Goal	Search Terms
Globe animations	"3d globe webgl", "earth animation three.js"
Scroll effects	"scrolltrigger gsap", "parallax scroll"
Text animations	"text reveal gsap", "split text animation"
Particles	"particles three.js", "particle system webgl"
Loading states	"loading animation css", "skeleton loader"
Micro-interactions	"button hover animation", "toggle animation"
Charts	"animated chart d3", "data visualization"

Evaluating CodePen Quality:

1. Check hearts/views (popularity indicator)
2. Look at code cleanliness
3. Test responsiveness
4. Check for dependencies
5. Verify license (most CodePens are MIT)

Top Animation Authors:

• @GreenSock (GSAP official)
• @aaroniker (micro-interactions)
• @chriscoyier (CSS tricks)
• @sdras (Vue animations)
• @cassie-codes (SVG animations)

Workflow 2: Search GitHub

Search Queries:

# React animation libraries
react animation component stars:>100

# Three.js examples
three.js animation example stars:>50

# GSAP implementations
gsap scrolltrigger example

# Specific effects
"globe animation" react stars:>20
"particle system" typescript stars:>30

Top Repositories:

Repo	Description
pmndrs/drei	R3F helpers with examples
airbnb/lottie-web	Lottie player + examples
greensock/GSAP	GSAP with demos
mrdoob/three.js	Three.js examples folder
animate-css/animate.css	CSS animations
framer/motion	Framer Motion examples

Workflow 3: Curated Animation Libraries

CSS Animation Libraries:

# Animate.css - Classic CSS animations
npm install animate.css

# Hover.css - Hover effects
# Download from https://ianlunn.github.io/Hover/

# Magic.css - Unique animations
npm install magic.css

React Animation Libraries:

# Framer Motion - Production-ready
npm install framer-motion

# React Spring - Physics-based
npm install @react-spring/web

# Auto-Animate - Automatic animations
npm install @formkit/auto-animate

SVG Animation:

# Vivus - SVG drawing animation
npm install vivus

# SVG.js - SVG manipulation
npm install @svgdotjs/svg.js

Workflow 4: Premium Asset Sources

Free Resources:

Source	Type	License
LottieFiles	Lottie animations	Free/Premium
useAnimations	React icons	MIT
Lordicon	Animated icons	Free tier
Rive Community	Rive files	Various
Sketchfab	3D models	Various
Mixamo	Character animations	Free
HDRI Haven	Environment maps	CC0

Premium Resources:

Source	Type	Price
Motion.page	Webflow animations	$$
LottieFiles Pro	Premium Lotties	$/mo
Envato Elements	Various	$/mo
Iconfinder	Animated icons	$$
TurboSquid	3D models	$$$

Workflow 5: Animation Inspiration Sites

Design Galleries:

• Awwwards: Award-winning sites with motion
• Dribbble: UI animation concepts
• Behance: Motion design case studies
• Codrops: CSS/JS experiments

Specific Collections:

• Stripe.com: Globe, gradients, micro-interactions
• Linear.app: Smooth page transitions
• Vercel.com: Subtle, elegant motion
• Apple.com: Scroll-driven storytelling

Workflow 6: Adapting Found Code

Step 1: Evaluate License

MIT License → Free to use commercially
Apache 2.0 → Free with attribution
GPL → Must open-source your code
CC-BY → Attribution required
No License → Contact author

Step 2: Extract Core Logic

// Original CodePen (often vanilla JS)
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// ... animation logic

// Adapted for React
export function Animation() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext('2d');
    if (!ctx) return;

    // ... same animation logic

    return () => {
      // cleanup
    };
  }, []);

  return <canvas ref={canvasRef} />;
}

Step 3: Adapt Styling

// Original colors
const BLUE = '#0066ff';
const WHITE = '#ffffff';

// Your brand colors
const FOREST = '#1a3d2e';
const GOLD = '#b8a361';
const PARCHMENT = '#faf8f3';

// Find/replace in animation code

Step 4: Make Responsive

// Add resize handler
useEffect(() => {
  function handleResize() {
    const canvas = canvasRef.current;
    if (canvas) {
      canvas.width = canvas.offsetWidth * window.devicePixelRatio;
      canvas.height = canvas.offsetHeight * window.devicePixelRatio;
    }
  }

  window.addEventListener('resize', handleResize);
  handleResize();

  return () => window.removeEventListener('resize', handleResize);
}, []);

Quick Reference: Finding Specific Effects

Effect	Best Sources
3D Globe	Three.js examples, Stripe's globe CodePen
Particle systems	Three.js, Pixi.js examples
Text reveals	GSAP CodePens, Codrops
Scroll parallax	GSAP ScrollTrigger demos
SVG morphing	Flubber, GSAP MorphSVG
Chart animations	D3.js gallery, Chart.js
Loading states	LottieFiles, CSS Loaders
Page transitions	Framer Motion, Barba.js
Mouse followers	Codrops, cursor-effects
Noise/gradients	Grainy Gradients, meshgradient.com

Legal Checklist

Before using found code:

• Check license file/header
• MIT/Apache → safe for commercial
• Attribution required? Add comment
• GPL → consult legal
• No license → contact author or don't use
• Modified substantially → document changes

When to Use This Skill

Invoke this skill when:

• Looking for animation inspiration
• Need reference implementations
• Want to find existing solutions
• Evaluating animation libraries
• Need specific effect examples
• Looking for open-source assets

Top Bookmarks

Must-Follow:

• https://codepen.io/GreenSock
• https://codrops.com
• https://tympanus.net/codrops
• https://docs.pmnd.rs/react-three-fiber
• https://www.awwwards.com/websites/animation
• https://dribbble.com/search/animation

Search Engines:

• https://codepen.io/search
• https://github.com/search
• https://lottiefiles.com/search
• https://rive.app/community