What problem does it solve? Adding decorative canvas effects to a website often leads to unbounded animation loops, hidden content, accessibility failures, and runaway resource use. This Skill provides a disciplined workflow for building particles, ripples, glyph scenes, shader distortion, and interactive 3D that respect lifecycle, reduced-motion, and performance budgets. ## Core Features & Use Cases - Bounded effect recipes: Guidance for ripples, particles, glyph/ASCII scenes, WebGL distortion, fluid, glass, transitions, and interactive 3D, each with explicit resource limits and fallback behavior. - Reusable runtime foundation: Original dependency-free ES module examples (host scheduler, foliage and pointer-trail renderers) with hard caps on DPR, pixel area, entity counts, and run duration. - Verification discipline: Node test suites and browser-check guidance that separate rendered-pixel evidence from source reasoning, plus motion-profiling recipes for diagnosing animation leaks. - Use Case: A designer asks for a falling-leaves hero section. The Skill guides choosing Canvas2D over WebGL, baking leaf sprites once, capping leaf count by viewport area, honoring reduced motion with a static composition, and verifying the result with an authorized browser screenshot. ## Quick Start Ask the agent to add a bounded canvas particle or ripple effect to a specific page section with Play/Stop controls and a static reduced-motion fallback.
