Motion & Animation
Animation libraries, page transitions, micro-interactions, scroll effects, and shader-based visual effects.
Scenarios 1Skill 12Design 0Collections —
Loading results
Animation libraries, page transitions, micro-interactions, scroll effects, and shader-based visual effects.
| Type | Name | When to use | Tags | Action |
|---|---|---|---|---|
| Skill | Hand-Drawn Diagram Kit | Adding hand-drawn / sketch-style diagrams and whiteboard visuals to apps — flowcharts, wireframes, notes, and collaborative canvases with a human touch. | ReactDiagramSVGCanvasWhiteboard | |
| Skill | Lottie / Rive Player | Embedding Lottie (After Effects) or Rive (vector) animations in web apps — loading states, illustrations, splash screens, and interactive animated icons. | ReactLottieRive | |
| Skill | GSAP ScrollTrigger Kit | Building scroll-driven experiences: hero sections that scrub with scroll, pinned storytelling panels, parallax effects, and scroll-triggered reveals. | ReactAnimationScrollTrigger | |
| Skill | Page Transition Orchestrator | Adding cinematic page transitions to Next.js or React apps — fade/slide route changes, shared element morphs, and a top loading bar during navigation. | ReactNext.jsAnimation | |
| Skill | Framer Motion Kit | Building React interfaces with Framer Motion: gesture-driven UI, spring-physics animations, layout transitions, and enter/exit animations for routed or conditional content. | ReactFramer MotionAnimation | |
| Skill | GSAP React Components | Adding GSAP animations to React apps where lifecycle management (mount/unmount cleanup) matters and you want drop-in animated components. | ReactGSAPAnimation | |
| Skill | Motion Design System | Establishing consistent motion across a product — defining durations, easing curves, and orchestration rules so animations feel like they belong to one design system. | ReactDesign SystemAnimation | |
| Skill | WebGL Shader Effects | Adding high-impact WebGL visuals: animated liquid/fluid hero backgrounds, particle systems, distortion effects, and generative art surfaces. | ReactWebGLShader | |
| Skill | Micro-Interaction Library | Adding the finishing touch to any interface: hover/active states, toggle springs, like-animation, button ripples, and other small interactions that make products feel alive. | ReactAnimationMicro-interaction | |
| Skill | Scroll-Driven Storytelling | Building long-form scroll experiences: product landing pages that tell a story, explainer narratives, data storytelling, and 'Apple-style' scroll pages. | ReactAnimationScroll | |
| Skill | Notification & Toast Motion System | Adding polished toast and notification experiences: success/error toasts, push-style notifications, achievement banners, and priority-stacked alerts with motion. | ReactToastNotification | |
| Skill | GSAP Animation Toolkit | Building any interface that needs high-performance animation — hero reveals, hover effects, progress indicators, or UI micro-animations with precise timing control. | ReactAnimationGSAP |