When it looks wrong

The worst failures are silent. The browser accepts your input, does something else, and renders a plausible frame. Run bin/vawe check anim-traps films/<name>/page.html first. It finds the traps below that it can see.

It moves wrong, or not at all

A live clock. Date.now() or a requestAnimationFrame loop instead of t. The frame must be a function of the seek. See Determinism.

State between frames (x += dx). Frame 400 must not need frame 399.

Math.random() on a still element, so it boils. Use rng(seed) from core/motion/springs.js and seed it per element.

var() inside the animation shorthand. This Chromium drops the whole declaration, with no error and no animation. Write the longhands.

No end keyframe. A @keyframes rule with no 100% or to has no defined value after it ends, and the element can slide back. A Web Animations keyframe list needs an offset: 1 stop.

A selector that matches nothing. An :nth-child also resets its count in every parent, so it hits one position in every repeated group.

A delay past the end of the film. It never plays one frame.

Two animations on one element write the same property. The later one wins the whole overlap, or its backwards fill covers the earlier one's end state for all time.

One easing across three or more keyframes. The top-level easing of element.animate() stretches over the whole effect. Give each keyframe its own easing.

A late move shows at frame 0. fill: both or backwards on an animation with a delay shows its first keyframe from the start. Use forwards unless the element should sit there before it starts.

Opacity or a filter on a preserve-3d element flattens it. Fade its wrapper.

It renders, but it looks off

Type in the wrong face. A browser does not complain about a font it cannot load. It paints a generic face. Bundle the face in films/<name>/assets/ and load it with @font-face. The renderer waits for document.fonts and stops with the family name when a face fails to load. page-check reports font-fallback.

Type is tiny or the layout breaks at another aspect. --vw and --vh hold a unit. Write calc(var(--vh) * 0.11), never * 0.11px. Draft --aspect 9:16 once. See Aspect ratios.

A capture has lost its type. A capture scaled below 0.6 loses its type. Crop instead.

Text leaves before it can be read. Add a hold: the read time is in rule readable-hold. Do not slow the move.

A reveal cuts the glyphs. page-check reports text-clipped. Pad the clip box below the baseline and above the cap height.

The check refused it

An em dash on screen. The validator rejects it. Use a comma, a period or a middot.

A waiver with no reason. A rule broken for cause is declared in the page with a _why. See The page.

ship refuses a recreation. Run bin/vawe critique <page> --ref <ref.mp4> until it passes.

Still stuck

Run bin/vawe --help for the verbs and bin/vawe check for the gates. Run bin/vawe doctor to check the tools.