Captions that sit on the picture, not on a grey slab

A 9:16 film is a phone frame, and on a phone the captions live near the bottom. That is also where the pages we film are busiest: buttons, cookie bars, sticky footers. So we had built a stage. The recorded footage stopped above a caption band, and the words sat in that band, away from the page.

The band showed our brand glow on near-black. It kept every caption readable, on every site. It also put a dark slab under every shot, and that slab was the first thing a viewer saw, before the product itself.

We wanted both: words you can always read, and a picture that belongs entirely to the site being filmed.

On November 2 we replaced the dark glow with the scene's own picture, blurred into soft fields of colour, the way our designed cards already use a page as their backdrop. The site's palette now carried on below the footage instead of stopping at a black edge.

A light page brought the next lesson. Behind a bike shop's booking shot, the blurred backdrop was the shop's white grid, and white captions need something darker than white behind them. So the band got its own shade: clear over the picture, then a flat 0.55 from the stage's lower edge down.

That value is not taste. It is the shade that keeps white type at a 4.5 to 1 contrast ratio over pure white, the common accessibility bar, and a test recomputes it every time.

Readable was not yet beautiful. Looking at the films side by side the next morning, the brief we gave ourselves was short: no grey behind the subtitles, make them perfect. Two changes followed the same day.

First, the rounded plate under our house captions went. The words now sit on the footage itself. Only the word being spoken keeps its small brand-coloured highlight, because that is the one place colour helps the eye follow the voice.

Then the stage went too. The picture no longer stops above a band: the footage fills the whole frame, and the captions sit on it, the way they do in the videos people choose to watch.

Without a band, legibility has to come from the letters and from a light touch on the picture:

• bold white words with a thin dark outline and a tight shadow, so every letter carries its own contrast;
• a soft shade at the very bottom of the frame, a gentle gradient rather than a block;
• a little more shade behind a caption that has moved up, never a slab;
• a lighter edge and wider word spacing for our minimal style;
• a caption that would cover a control low on the page moves above it, and the free-film badge keeps out of its way.

One small change made this possible. Our renderer had always drawn the same hairline edge, whatever a caption style asked for. It now reads each style's own outline and shadow, so every style can set its edge.

The same review looked at the designed cards that sit between recordings. Our template library includes themed designs: a theatre curtain, an awards stage, a wedding, a game screen, sport, a podcast chapter. Beautiful in the right film, puzzling in a repair shop's tutorial.

Those themed templates are now offered only when the page or the brief speaks of that world. A tutorial gets cards that look like a tutorial. You can browse the library on /animations.

We had treated legibility and looks as a trade, and chosen legibility with a big, safe block. The better answer was to put the contrast in the letters instead of behind them.

Now a white landing page, a blue dashboard and a dark hero each keep their own picture right to the bottom edge of the frame, and the words stay readable on all three. That is what a vertical film should feel like: the site, full screen, with a voice you can also read.