Animation libraries, page transitions, micro-interactions, scroll effects, and shader-based visual effects.
When to use:Adding hand-drawn / sketch-style diagrams and whiteboard visuals to apps — flowcharts, wireframes, notes, and collaborative canvases with a human touch.
When to use:Embedding Lottie (After Effects) or Rive (vector) animations in web apps — loading states, illustrations, splash screens, and interactive animated icons.
When to use:Building scroll-driven experiences: hero sections that scrub with scroll, pinned storytelling panels, parallax effects, and scroll-triggered reveals.
When to use:Adding cinematic page transitions to Next.js or React apps — fade/slide route changes, shared element morphs, and a top loading bar during navigation.
When to use:Building React interfaces with Framer Motion: gesture-driven UI, spring-physics animations, layout transitions, and enter/exit animations for routed or conditional content.
When to use:Adding GSAP animations to React apps where lifecycle management (mount/unmount cleanup) matters and you want drop-in animated components.
When to use:Establishing consistent motion across a product — defining durations, easing curves, and orchestration rules so animations feel like they belong to one design system.
When to use:Adding high-impact WebGL visuals: animated liquid/fluid hero backgrounds, particle systems, distortion effects, and generative art surfaces.
When to use: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.
When to use:Building long-form scroll experiences: product landing pages that tell a story, explainer narratives, data storytelling, and 'Apple-style' scroll pages.
When to use:Adding polished toast and notification experiences: success/error toasts, push-style notifications, achievement banners, and priority-stacked alerts with motion.
When to use:Building any interface that needs high-performance animation — hero reveals, hover effects, progress indicators, or UI micro-animations with precise timing control.