Animation debug ladder

Each stage adds one new thing on top of the last. Scroll down. Tell me the number of the first stage where you DON'T see motion. That's the failure point.

OS-level reduced-motion check: checking…

Stage 1: CSS animation on a plain div

Tests: CSS animations work at all in this browser.

Stage 2: CSS transform animation on an SVG element

Tests: SVG + CSS animation interop (transform translateX on a circle).

Stage 3: stroke-dashoffset animation on a straight line

Tests: the exact technique FleetView uses. A short cyan dash should travel left-to-right along the line.

Stage 4: stroke-dashoffset on a curved path

Tests: animation still works on a Q-curve (FleetView uses curves for every edge).

Stage 5: continuous dash stream (FleetView-style)

Tests: stroke-dasharray with two visible dashes streaming continuously (no dead periods).

Stage 6: same stream, but rendered through a CSS variable (uses Tailwind var(--color-accent))

Tests: whether the project's actual CSS variable for cyan is resolving correctly.

Stage 7: multiple paths with staggered delays

Tests: per-element animation-delay via style="" attribute (FleetView sets this).

Stage 8: pulse on a rect (node-pulse equivalent)

Tests: animating fill + stroke + opacity on an SVG rect (FleetView node-pulse).

Stage 9: the real FleetView component, isolated

If everything above moves and this doesn't, the bug is component-specific (layout/parent-opacity/etc).

Open / in a new tab and compare what's on the hero.