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-W49-Monkind longformweek W49date 2026-12-07campaign longform-youtubepillar multimediabeat asset videoduration 134.5sground whitescenes 7

Checklist the per-video bar — engine/sim

98.2/100
plain languagevo coverageno dead airuniquenesscaption fitcompletenesscleanliness
quantitative quality · weights learn from your reviews (engine.sim.memory review longform-W49-Mon good|bad)
⚠ 1 flag(s) — not yet ship-ready: copy_generic · see docs/strategy/VIDEO-CHECKLIST.md

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 · 134.5s · comp_id + rendered still + tier + the script

#Layer (comp_id · still · tier)BeatTimecodeMotionLogoAudioVO / on-screen / caption
1s1
matches intent
shared field
signature-3d
open0–21.3sspatial-parallaxicon·color♪ bed_in
Yesterday we built the engine. Today, under the same banner, run it and see it, we open web design. By the end you will know how to build a site where one source file feeds every page, so the machine does the typing and you do the thinking. This is the part most agencies hand-make and overcharge for.
on-screen: Build the site that runs you
expected on screen: white ground · octa hero in the shared Signal Field · Lumen leads · node-graph · spatial-parallax · icon·color logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual node-graphshape octaground whitetreatment colormotion spatial-parallaxpower summoninstrument summon→Build the site that runs you
2s2
matches intent
NumberedList
template
teach21.3–40.8skinetic-buildicon·wireframe♪ node_lock
The first move is to put your real content in one structured file. A simple data file, the kind a person and a machine can both read. Your services, your prices, your pages, all of it lives in that one place. Stop scattering the truth across a dozen hand-typed pages where it rots.
on-screen: One source file, every page
expected on screen: white ground · a NumberedList panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id NumberedListvisual node-graphshape octaground whitetreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→One source file, every pagecurate items, nodes
3s3
matches intent
ChecklistCard
template
teach40.8–61.699999999999996skinetic-buildicon·wireframe♪ node_lock
The second move is to point your coding agent at that file and tell it to generate the pages from it. The agent reads the data, then writes the actual web pages around it. Change one line in the source file and every page that uses it updates. You edit the truth once, not in twenty spots.
on-screen: Let the model build the pages
expected on screen: white ground · a ChecklistCard panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id ChecklistCardvisual node-graphshape octaground whitetreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→Let the model build the pagescurate items, nodes
4s4
matches intent
CheatSheet
template
teach61.7–80.1skinetic-buildicon·wireframe♪ node_lock
The third move is to name your design choices. Your red, your black, your spacing, your font, written as plain settings the agent reuses everywhere. These are called design tokens. Now the site looks like one studio, not ten different moods, because every page pulls from the same short list.
on-screen: Design with real tokens
expected on screen: white ground · a CheatSheet panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id CheatSheetvisual node-graphshape octaground whitetreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→Design with real tokenscurate nodes, points, uses
5s5
matches intent
CodeWindow
template
teach80.1–99.89999999999999skinetic-buildicon·wireframe♪ node_lock
The fourth move is to actually look. Have the agent open the page in a headless browser, a browser with no window, and take a screenshot. Then you both stare at the picture. A model can write a page that is technically fine and still ugly. Looking at it catches what the code cannot.
on-screen: Open it in a real browser
expected on screen: white ground · a CodeWindow panel over a dimmed Signal Field · Lumen leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id CodeWindowvisual node-graphshape octaground whitetreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→Open it in a real browsercurate codeLines, nodes, windowTitle
6s6
matches intent
StatScoreboard
template
proof99.9–117.2sreceipts-counticon·wireframe♪ node_lock
The proof is the office site itself. Every page you see at our public office is built from that one source file, by the agent, checked in the browser. Nobody hand-types the pages. When we add a service, we add a line, and the site grows itself.
on-screen: Our office runs on this
expected on screen: white ground · a StatScoreboard panel over a dimmed Signal Field · Lumen leads · receipts · receipts-count · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id StatScoreboardvisual receiptsshape octaground whitetreatment wireframemotion receipts-countpower receiptsinstrument spotlight→Our office runs on thiscurate pillar, stats, statsLabels
7s7
matches intent
shared field
signature-3d
resolve117.2–134.5scoalescenceicon·color♪ bed_out
That is web design done by the machine: one source of truth, generated pages, shared tokens, eyes on the result. Tomorrow we make the boring work run on its own. Until then, open office.temerarii.xyz and notice how the pages all rhyme. That is the source file talking.
on-screen: Go look at office.temerarii.xyz
expected on screen: white ground · octa hero in the shared Signal Field · Lumen leads · coalescence · coalescence · icon·color logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual coalescenceshape octaground whitetreatment colormotion coalescencepower coalescenceinstrument coalescence→Go look at office.temerarii.xyz

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)

youtubeWeb design where one source file feeds every page Most agencies hand-build every page and charge you for it. This video shows how to build a site where one source file feeds every page, so the machine does the typing and you do the thinking. The four moves: - One source file, every page. Put your real content in one structured data file a person and a machine can both read. Your services, prices, and pages all live in that one place. Stop scattering the truth across a dozen hand-typed pages where it rots. - Let the model build the pages. Point your coding agent at that file and tell it to generate the pages from it. Change one line in the source file and every page that uses it updates. You edit the truth once, not in twenty spots. - Design with real tokens. Name your design choices: your red, your black, your spacing, your font, written as plain settings the agent reuses everywhere. These are called design tokens. Now the site looks like one studio, not ten different moods. - Open it in a real browser. Have the agent open the page in a headless browser, a browser with no window, and take a screenshot. Then you both stare at the picture. A model can write a page that is technically fine and still ugly. Looking at it catches what the code cannot. The proof: every page on our public office is built from one source file, by the agent, checked in the browser. Nobody hand-types the pages. When we add a service, we add a line, and the site grows itself. Go look at office.temerarii.xyz and notice how the pages all rhyme. That is the source file talking. Keywords: data-driven web design, single source of truth, design tokens, headless browser screenshot QA, generate pages from data, AI web build

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