Skip to content
Fractal Integrations
← IndexCreative Technology / 2026
02Case study

Generative Content Engine

Programmatic video from a brand system held in code

A rendering pipeline that turns raw assets into finished video, with brand rules enforced as code rather than as a style guide.

Note — Built for a two-person act I am half of. The source material — photography, flyers and recorded audio — is owned jointly by the act, half each. The engine is mine: specified and reviewed by me, implemented largely by AI coding agents.

Architecture diagram: one brand-token file and a set of per-record data blocks feed seven composition components, which compose into thirty-seven registered renders; a has-face flag routes stills through a safety component that cannot crop the source unless an operator overrides it, renders land as MP4 drafts that never publish, and the operator's brand-boundary review feeds corrections back into the single token file.
The loop on the right is the whole point: a brand mistake is one file, so correcting it re-skins all thirty-seven renders at once.
Role
Design + Engineering
Year
2026
Category
Creative Technology

Stack

  • Remotion 4
  • React 18
  • TypeScript
  • Bun

02The problem

A two-person act feeds Instagram forever. Every track, every show, every shoot wants a Reel, a Story, a square feed post, a portrait post, a carousel and a show announcement, across four aspect ratios, on a schedule that does not stop.

Cut by hand in an editor, that is per-asset labour. Nothing learned on the thirtieth export makes the thirty-first any cheaper. And the output drifts: the logo lands a little differently, the type is a size off, and the face gets cropped by whatever aspect ratio it was exported into. For an act whose entire position is that the quality is what makes the name work, the drift is the damage. The hours are just the bill.

03The idea

A style guide is a document somebody has to remember to follow. A token file is a constraint the renderer cannot route around.

So the brand became code: one file holding colour, type, motion timing and platform-safe margins, read by every composition. The rules that carry real risk get stronger treatment than a token. They become components whose defaults make the wrong outcome structurally impossible rather than merely discouraged.

The second decision was to keep the shapes and the content apart. A composition is a shape. What goes into it is data. That split is the whole question of whether the fortieth asset is cheap or is the same work over again.

04Build

Seven composition components: Reel, Story, square and portrait feed posts, carousel, still-to-motion b-roll, and show announcement. Thirty-seven registered renders, which are those same seven components fed different data across two records and three edits of each. An eighth variant is a data block, not a component.

The no-crop rule is a component, not a note. FaceFrame defaults to object-fit contain over a brand letterbox, which cannot crop a pixel of the source. The override exists, but it requires the operator to have checked that clip against the target aspect, and it stamps the frame with which mode produced it so a later audit can tell.

Instagram's own chrome is encoded as normalized safe bands, so the handle, clock, caption and CTA never land on top of the hero line. Every still carries a has-face flag and the engine routes on it: faces are held in FaceFrame untouched, face-free plates get Ken Burns motion. Audio offsets are set per composition, so five assets cut from one record each pull a different window of it instead of all opening on the same bar.

Renders land in an output folder as MP4. Nothing publishes from the repository, on purpose. The engine makes drafts; a person decides what ships.

  • Creative Development
  • Brand Systems
  • Interactive Experiences

05Result

It renders. Five finished MP4s: a nine-second reel, a fourteen-second b-roll cut, a plates test, and two six-second show announcements built off real dated flyers. 2,440 lines of TypeScript against a library of 29 source assets.

Then it caught its own mistake, which is the part worth keeping. The palette the engine was built on had drifted into a mood the act's brand boundary explicitly excludes, and it had drifted there in the token file, which meant every composition inherited it. The token file now carries a hold at the top, and nothing renders off it until it is re-skinned. The newest composition routes around the token palette entirely.

The architecture is what makes that survivable. The error is one file, and fixing it re-skins all thirty-seven registered renders at once. Written the obvious way, with the colours living in each composition, the same wrong call would be a seven-component, thirty-seven-instance rewrite instead of an afternoon.

There are no reach or engagement numbers here. The renders are drafts pending approval and the palette hold is still open.

06Contribution

Split five ways on purpose. Overstated authorship is the fastest way to fail a follow-up question, so what was conceived, designed, built, AI-assisted, and taken off the shelf is stated separately.

Conceived
  • Brand as code rather than as a document: one token file every composition reads, so restyling the whole engine is one edit.
  • Separating the shape from the content, so the fortieth asset is a data block instead of the same work again.
  • Promoting the rule that carries real risk from a token to a component, so the wrong outcome is structurally impossible rather than discouraged.
  • The engine renders drafts and never publishes, so a person stays between the machine and the audience.
Designed
  • The no-crop policy and its escape hatch: contain-by-default over a brand letterbox, an override that requires the operator to have checked the clip against the target aspect, and a stamp on the frame recording which mode produced it.
  • The composition set and its aspect matrix, covering reel, story, square and portrait feed, carousel, still-to-motion b-roll and show announcement.
  • Instagram's own chrome encoded as normalized safe bands, so platform furniture never lands on the hero line.
  • Per-composition audio offsets, so five assets cut from one record open on different bars.
Built
  • The token file, the safety component and the composition registry, specified to the point of being testable.
  • The has-face routing rule that holds faces untouched and gives only face-free plates motion.
  • Review and acceptance of every render against the brand boundary — which is how the palette itself was caught as off-brand and put on hold.
AI assisted
  • Most of the implementation code was written by AI coding agents working from my specifications and under my review.
  • The face-consistent source clips are AI-generated video, produced from approved reference stills and reviewed before they enter the pipeline.
External systems
  • Remotion 4, React 18, TypeScript, Bun.
  • Press photography, show flyers and the act's own recorded audio as source material, jointly owned by the act.