Captions that hold still while the words light up

Until today we had tested each stage on its own: reading the page, writing the storyboard, recording the browser, voicing the script, rendering the video. This morning we chained them for real. A live web address went in, and a plan, a recording, a narration, a rendered MP4 and a designed thumbnail came out.

The structure held. The film mixed its scene types the way we wanted, with a timeline, a big number and a title card, each moving with an energy that matched its line. Then our automatic quality check, which watches every film we make, flagged the captions.

We did not take the score on faith. We pulled the frames one by one and looked.

Our captions are karaoke style. The phrase sits at the bottom of the frame, and the word being spoken lights up inside a small pill. That pill gave the active word a little extra padding on each side.

So every time the highlight moved, the line rearranged itself. A phrase that fit while a short word was lit could grow just wide enough to touch the edge when a long word took its turn.

It lasted a few frames at a time, which is why a paused player almost always looked fine. But those few frames are exactly when the viewer is reading.

The idea behind the fix is simple: while the picture moves, the layout must not. We made two changes.

• Every word now carries the same padding, lit or not. Moving the highlight changes only how a word is painted, its background, its scale, a slight tilt, and none of that can shift the line. We tightened the gap between words to give back the space.
• Long phrases scale down gently. Past about 30 characters the caption shrinks, never below 0.72 of its normal size, so even a long compound word fits the safe area with its pill around it.

We checked it the way that counts: we rendered the very phrase that had touched the edge, through the real pipeline, and read every frame. One line, centred, fully inside the picture, including every frame where the highlight passes from one word to the next.

The same film showed a second detail worth fixing. In a statement scene, the emphasised word was hard to see.

We paint key words with a gradient made from the site's own brand colours, because a film should look like the company it presents. But a dark site gives a dark pair of colours, and a dark gradient on a dark background is no emphasis at all. Our own site, pagetovid.com, is a dark site, so we saw it first-hand.

We added one guard, textGradient, and used it everywhere words are painted this way: statement emphasis, stat figures, the big hero number, counters and the quote mark. When the brand colours cannot stand out against the scene, a readable pair takes their place. The check compares the brightness of the colours with the scene behind them, so a dark brand on a dark theme, or a pale one on a light theme, steps aside for the moment it would disappear.

For anyone making a video, the result is quiet, which is the point. The line you read stays where it is, the highlight follows the voice, and the words a film leans on are always visible, whatever colours your site uses.

It also set two habits we keep. An automatic score tells us where to look; the frames tell us why. And anything that changes during playback, a highlight, a zoom, a transition, gets tested in motion, frame by frame, not on a paused picture.

You can see how captions, voice and footage come together on the features page, or paste your own address on /new and watch the words light up.