664 designed cards for the moments between shots

A PageToVid film mixes real recordings of a website with drawn scenes: a title, a list of features, a figure that counts up, a closing card. Those drawn scenes came from a few dozen visuals we had built by hand. They were reliable, and they were familiar far too quickly.

Meanwhile another of our projects held 665 ready-made motion templates, built on exactly the same stack as PageToVid: Remotion, React and 30 frames per second. Same tools, same frame rate, a far wider range of looks. The question was how to bring them in.

We could have asked another service to draw each card while a film was being made. We chose to copy the templates into PageToVid and draw them in the same renderer that draws everything else.

• A film never waits on another service, and never fails because of one.
• Each card is drawn in the same pass as its neighbours, so timing and colours match.
• A card is code, not AI generation, so it costs nothing extra.

That last point mattered most to us. Because the cards are code, they are available on every plan, the free one included, from the first film.

A template that shines in its own demo can stumble in a real film. Ours come in three shapes (16:9, 9:16 and 1:1), carry captions at the bottom, and hold your words, which are rarely the length of sample copy.

So we drew all 664 templates in all three shapes, with captions on and full-length copy, and wrote down what passing means: no blank frame, no text cut off or sitting under the captions, nothing too small to read, no labels on top of each other. 651, 650 and 641 passed, depending on the shape. A template that cannot pass in a shape is simply never offered in it.

Inside a film, a card sits above the captions, lasts exactly its share of the voice, and wears your brand's colours, swapped when they would not read. Sample copy never reaches a film, and a card's picture is the scene's own image or a brand gradient.

A library nobody can see might as well not exist, so the same day we made the cards visible everywhere.

We drew a real poster of every template in every shape it passes, 1,301 small images. The animations catalogue became one grid of 817 animations, built-in and designed side by side, with search and filters. In the editor, every scene gained a designed-card picker with a form built from the template's own fields, free on every plan.

The planner uses them with restraint: one card in a short film, two from five scenes, three from nine, and never two in a row. Recordings of the real site stay the heart of the film.

A feature that looks right on the first render and quietly vanishes on the first edit is not finished. So before calling it done, we followed the cards through every path that changes a film.

• The AI review and the length pass keep every field of a card.
• Switching a film's shape turns a card that cannot draw there into a plain statement of the scene's line, with a note.
• Translating a film translates a card's text field by field, never its links, pictures or figures.
• Restoring an older revision brings it up to date before it plays.

Assistants connected over MCP can list the cards too, read a template's fields and poster, and ask for one by name. A test walks every one of these paths and checks that the cards come out intact.

Your next film has far more ways to say "here is a number" or "here are three reasons" than it did yesterday, in your colours, sized for your shape, and still built around the real recordings of your site. You can start one now and pick a designed card on any scene you want to dress up.

For us, the lesson is the shape of the work: a wide library is only useful behind narrow gates. Deciding what passing means, and refusing what does not, is what lets the variety in without letting the mistakes in.