Các kỹ thuật

User preference that lets people with vestibular sensitivity opt out of motion. Every recording here demonstrates the fallback.

Declarative time-based animation syntax. Defines named motion curves you attach to elements.

The workhorse of vector graphics. Bezier + cubic curves via M/C/S/T commands let you describe any shape or flight line.

Declarative image processing built into SVG. feGaussianBlur, feDisplacementMap, feTurbulence compose into glow + roughness effects.

Negative animation-delay phase-shifts identical animations along the same timeline. A dozen trail dots, zero extra keyframes.

Make any element follow an SVG path. Combined with offset-rotate:auto, the element rotates to match the heading along the curve.

Control how an element's colors blend with what's behind. 'screen' brightens — perfect for glowing trails on dark backgrounds.

Animate stroke-dashoffset from path-length to 0 to 'draw' an SVG stroke on the fly. A foundational technique for hand-drawn reveals.

rotateY, perspective, preserve-3d turn 2D elements into unfolding planes. Essential for the parchment-unfold effect.

Gradient that radiates from a point. Used for the snitch body highlight, the parchment vignette, and the stage atmosphere.

Snaps an animation to discrete frames instead of interpolating smoothly. The core trick behind sprite-sheet animation — each step jumps one frame.

Pack N frames into one image, then animate background-position across them. 1970s arcade technique, still the lightest way to do pixel-art motion on the web.

Tells the browser to use nearest-neighbor scaling instead of bilinear smoothing. Mandatory for pixel-art — without it, upscaled sprites turn to mush.