What problem does it solve? Animation-rich websites often suffer from mobile lag, dropped frames, janky scrolling, and poor Core Web Vitals because decorative effects consume too much main-thread, GPU, and memory budget. This Skill provides a structured framework for building, reviewing, and debugging high-motion sites so they stay smooth on real devices. ## Core Features & Use Cases - Effect Classification & Decision Framework: Maps each animation type (reveals, parallax, shaders, text splits, marquees) to the right rendering strategy across CSS, GSAP, canvas, and WebGL. - Device-Aware Implementation Rules: Covers React/Next.js client boundaries, GSAP matchMedia breakpoint plans, DPR capping, offscreen loop pausing, and reduced-motion fallbacks. - Diagnostic Workflow & Fix Patterns: Provides a production-build profiling process, trace category analysis, and concrete refactors such as replacing per-frame React state with quickSetter, CSS keyframes, or canvas loops. - Use Case: A creative agency landing page stutters when scrolling on phones. Use this Skill to profile the production build, identify a full-screen shader running on every route, gate it by breakpoint and viewport visibility, and verify the fix with before/after trace numbers. ## Quick Start Use the high-motion-web-performance skill to diagnose why my Next.js landing page with GSAP ScrollTrigger animations lags on mobile and propose fixes.
