Back Office · office.temerarii.xyz
One asset, all the way in — composition, the wireframe + storyboard, the output format stack, and the template, all read from the SAME content-index record. The expected output matches what /media surfaces for this post.
post longform-W41-Wedkind longformweek W41date 2026-10-14campaign longform-youtubepillar multimediabeat asset videoduration 152.6sground whitescenes 7

Checklist the per-video bar — engine/sim

100.0/100
plain languagevo coverageno dead airuniquenesscaption fitcompletenesscleanliness
quantitative quality · weights learn from your reviews (engine.sim.memory review longform-W41-Wed good|bad)
✓ all static checks pass — one-focal/scene · tier-by-beat · one-track caption · colorway · cast+shape correct · no banned/fabricated. (audio + visual tiers verify on the rendered finals — Phase 2)

Composition comp · template family · expected output

composition LongFormChaptersfamily / template LongFormChapters
9:16 Reelpending1:1 Squarepending16:9 Widepending9:16 4Kpending1:1 4Kpending16:9 4KpendingGIF (SMS)pending
render pending — silent master not yet on disk
expected output: 0/7 rendered — same matrix the /media preview surfaces for this asset.

Composition layer × scene 7 scenes · 152.6s · comp_id + rendered still + tier + the script

#Layer (comp_id · still · tier)BeatTimecodeMotionLogoAudioVO / on-screen / caption
1s1
matches intent
shared field
signature-3d
open0–20.9sspatial-parallaxicon·wireframe♪ bed_in
One system across surfaces. Today, the surface that moves. Motion graphics. Most people think motion is a separate craft you hand off to a specialist. We treat it as the same brand, just running at thirty frames a second. I will show you how to build motion in code so it stays exactly on brand every time.
on-screen: Motion is the brand, moving
expected on screen: white ground · octa hero in the shared Signal Field · Lumen leads · node-graph · spatial-parallax · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual node-graphshape octaground whitetreatment wireframemotion spatial-parallaxpower summoninstrument summon→Motion is the brand, moving
2s2
matches intent
NumberedList
template
teach20.9–43.9skinetic-buildicon·color♪ node_lock
First, build it in code, not by dragging keyframes by hand. We use Remotion, which lets you write video as React components. Every shape, every fade, every move is a line of code. That sounds harder, but it means a model can read it, change it, and re-render it. A timeline in a black-box app cannot be edited by an agent. Code can.
on-screen: Build the animation in React
expected on screen: white ground · a NumberedList panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·color logo · caption bottom-left
spec (the prompt): comp_id NumberedListvisual node-graphshape octaground whitetreatment colormotion kinetic-buildpower morphinstrument morph+laser→Build the animation in Reactcurate items, nodes
3s3
matches intent
ChecklistCard
template
teach43.9–66.9skinetic-buildicon·color♪ node_lock
Second, the animation pulls its colors and fonts from the same token file as everything else. The red in your moving logo is the identical red on your business card, because both read brand-red from one source. You are not matching colors by eye between a video tool and a print tool. They drink from the same well, so they cannot drift apart.
on-screen: Pull motion from the same tokens
expected on screen: white ground · a ChecklistCard panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·color logo · caption bottom-left
spec (the prompt): comp_id ChecklistCardvisual node-graphshape octaground whitetreatment colormotion kinetic-buildpower morphinstrument morph+laser→Pull motion from the same tokenscurate items, nodes
4s4
matches intent
NodeGraphCard
template
teach66.9–89.2skinetic-buildicon·color♪ node_lock
Third, define your motion rules as numbers too. How fast things ease, how long a beat holds on screen, the minimum seconds before a cut. We keep those as values the model honors on every render. So a fast clip and a calm one still feel like the same brand moving, because the timing rules are shared, not re-invented per video.
on-screen: Write timing as numbers
expected on screen: white ground · a NodeGraphCard panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·color logo · caption bottom-left
spec (the prompt): comp_id NodeGraphCardvisual node-graphshape octaground whitetreatment colormotion kinetic-buildpower morphinstrument morph+laser→Write timing as numberscurate hub, nodes
5s5
matches intent
StackTrace
template
teach89.2–111.9skinetic-buildicon·color♪ node_lock
Fourth, because it is code, you render in bulk from the command line. One command renders a whole week of motion pieces, each pulling the same tokens and timing. No one is sitting in an editor exporting clips one at a time. The machine renders the batch overnight, and every file comes out on brand because they all read the same rules.
on-screen: Render the whole batch at once
expected on screen: white ground · a StackTrace panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·color logo · caption bottom-left
spec (the prompt): comp_id StackTracevisual node-graphshape octaground whitetreatment colormotion kinetic-buildpower morphinstrument morph+laser→Render the whole batch at oncecurate errMsg, errType, fix, frames, nodes
6s6
matches intent
RankList
template
proof111.9–132.1sreceipts-counticon·color♪ node_lock
Proof, plainly. Every moving piece in our public calendar is built in code this way, from the same tokens that drive the static surfaces. That is why the motion does not look like a different company made it. It is the same brand file, animated. You are watching the output, not a promise about it.
on-screen: Our motion runs on code
expected on screen: white ground · a RankList panel over a dimmed Signal Field · Lumen leads · receipts · receipts-count · icon·color logo · caption bottom-left
spec (the prompt): comp_id RankListvisual receiptsshape octaground whitetreatment colormotion receipts-countpower receiptsinstrument spotlight→Our motion runs on codecurate rows, statsLabels
7s7
matches intent
shared field
signature-3d
resolve132.1–152.6scoalescenceicon·wireframe♪ bed_out
So motion graphics is just your brand built in code and rendered in bulk. Write the animation in React, pull colors from your tokens, set your timing as numbers, and render the whole batch with one command. You can see ours moving across every surface at office.temerarii.xyz. That is The Big T-M, on brand, in motion.
on-screen: See the brand in motion
expected on screen: white ground · octa hero in the shared Signal Field · Lumen leads · coalescence · coalescence · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual coalescenceshape octaground whitetreatment wireframemotion coalescencepower coalescenceinstrument coalescence→See the brand in motion

Format stack 1 aspects · same scenes[], re-cropped

16:9
1920×1080
X/Twitter · YouTube · LinkedIn video

Channels 2 destinations

YouTubeBlog

Social captions supplemental published copy · per channel (comp_id level)

youtubeHow to build motion graphics in code so the brand never drifts Most people think motion is a separate craft you hand off to a specialist. We treat it as the same brand, just running at thirty frames a second. This video shows how to build motion in code so it stays exactly on brand every time. The method: Build the animation in React. Use Remotion, which lets you write video as React components. Every shape, fade, and move is a line of code. That sounds harder, but it means a model can read it, change it, and re render it. A timeline in a black box app cannot be edited by an agent. Code can. Pull motion from the same tokens. The animation reads its colors and fonts from the same token file as everything else. The red in your moving logo is the identical red on your business card, because both read brand-red from one source. You are not matching colors by eye between a video tool and a print tool. Write timing as numbers. How fast things ease, how long a beat holds, the minimum seconds before a cut. Keep those as values the model honors on every render. So a fast clip and a calm one still feel like the same brand moving, because the timing rules are shared, not re invented per video. Render the whole batch at once. Because it is code, one command renders a whole week of motion pieces, each pulling the same tokens and timing. No one sits in an editor exporting clips one at a time, and every file comes out on brand. Every moving piece in our public calendar is built this way, from the same tokens that drive the static surfaces. See it at office.temerarii.xyz. Keywords: motion graphics, Remotion, React video, design tokens, brand animation, programmatic video.

Cross-links every lens is a view on this one record