Motion Asset Hunter

Description

# 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:** ```bash # 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:** ```bash # 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:** ```bash # 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 Lice

Security Status