The animation that never ran

The hero at the top of my site is a small deck I call the fleet. It has a row of agent glyphs that are supposed to pulse, and a six-step pipeline with a highlight that walks from one step to the next. On the live site, none of it was moving. The glyphs and the pipeline both sat still, and the deck looked like a screenshot of itself.

Every check I had run said it was fine. The type check passed, the build passed, and the prerender passed. Those were the checks I wrote down as verification, and each one is honest about what it tests. None of them watches an element change on the hydrated page in a browser. I had confirmed that the code compiled and rendered. I had not confirmed that it animated, and for an animation that difference is the whole feature.

The site is React, built with Vite, prerendered, and then hydrated in the browser. So there are two versions of the page: the static one the build writes, and the live one the browser takes over. The motion only had to work on the second one, and that was the one I had not looked at.

The pipeline highlight ran on a timer. A useEffect started an interval every 680 milliseconds while the deck was playing, and each tick advanced an activeStep counter, modulo six, one for each pipeline step. This is the line that did it:

setInterval(() => setActiveStep((s) => (s + 1) % 6), 680)

That state lived at the root of the deck, so every tick re-rendered the whole component, glyphs included.

On the live page, opacity was pinned to the first keyframe. Each re-render restarted every element from frame zero, so nothing got far enough into its cycle to look like motion. The glyphs were being reset more than once a second. From the outside that reads as frozen, and it was a good enough explanation that I took it to be the only one.

I fixed that half by deleting the timer. I removed the activeStep state, the effect, and its import. Each pipeline node got a CSS class and an animation delay based on its position, so one 4.2 second keyframe cycle, with the glow peaking at seven percent of the cycle, walks across the six nodes by itself. Nothing in React has to happen for the highlight to advance. I shipped it.

About twenty minutes later I shipped a second fix, because the first one had removed only one cause. With the re-renders gone, the glyphs should have pulsed. They did not. This time I read the same element on the live page twice, at two different moments, and compared the two readings. They were identical: opacity at the first keyframe and transform set to none.

The glyphs were framer-motion spans. Each had animate arrays for opacity, scale, background color and box shadow, and a transition that asked for the loop to run forever:

transition={{ duration: 1.7, delay: (i * 0.3) % 2.2, repeat: Infinity, ease: "easeInOut" }}

I had a suspect ready, because framer cannot animate a CSS var(). But a comment above that component already warned about exactly that, and every animated value in it was concrete. So the values were not the cause.

What narrowed it was a control group I already had. The same file held other animations, trace pulses, the new pipeline glow, and an activity spark, all written as plain CSS keyframes. All of them were moving on the live page. They shared the page and the hydration with the glyphs. The only thing that was dead was the loop that framer was driving.

I replaced each motion span with a plain span, a class, and an animation delay, driven by a 1.7 second CSS keyframe that takes opacity from .25 to 1 and back with a slight scale. The framer import left the deck. Pausing now comes from a class on the parent that sets animation-play-state to paused, and a reduced-motion media query turns the animation off. Then I ran the two-sample check on the live page again.