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-W27-Monkind longformweek W27date 2026-07-06campaign longform-youtubepillar strategic_relationsbeat asset videoduration 132.6sground redscenes 6

Checklist the per-video bar — engine/sim

98.0/100
plain languagevo coverageno dead airuniquenesscaption fitcompletenesscleanliness
quantitative quality · weights learn from your reviews (engine.sim.memory review longform-W27-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 6 scenes · 132.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·liquid-chrome♪ bed_in
This week the hub is opening, and the first thing anyone touches is the website. So today is only about web design. By the end you will know how to build a site that updates itself instead of rotting the day after you launch it. No mystery, just the moves we used on our own front door.
on-screen: Web design, the front door
expected on screen: red ground · tetra hero in the shared Signal Field · Nexus leads · node-graph · spatial-parallax · icon·liquid-chrome logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual node-graphshape tetraground redtreatment liquid-chromemotion spatial-parallaxpower summoninstrument summon→Web design, the front door
2s2
matches intent
NumberedList
template
teach20.9–42.9skinetic-buildicon·white-knockout♪ node_lock
First move. Stop thinking in pages, start thinking in sections. A header, a service block, a footer. Each one is written a single time as a component. You feed it words and it draws itself. When the same service block appears on ten pages, you are not editing it ten times. You edit the one block, and all ten follow.
on-screen: Design a section once
expected on screen: red ground · a NumberedList panel over a dimmed Signal Field · Nexus leads · node-graph · kinetic-build · icon·white-knockout logo · caption bottom-left
spec (the prompt): comp_id NumberedListvisual node-graphshape tetraground redtreatment white-knockoutmotion kinetic-buildpower morphinstrument morph+laser→Design a section oncecurate items, nodes
3s3
matches intent
ChecklistCard
template
teach42.9–66.3skinetic-buildicon·liquid-chrome♪ node_lock
Second move. Keep your content in a plain file, not buried inside the design. A list of services, prices, hours, sits in one source file. The page reads from it. So a client changes their hours once, in one place, and every page that shows hours is correct. The old way scatters the same fact across a dozen files and lets one go stale.
on-screen: Feed the page real data
expected on screen: red ground · a ChecklistCard panel over a dimmed Signal Field · Nexus leads · node-graph · kinetic-build · icon·liquid-chrome logo · caption bottom-left
spec (the prompt): comp_id ChecklistCardvisual node-graphshape tetraground redtreatment liquid-chromemotion kinetic-buildpower morphinstrument morph+laser→Feed the page real datacurate items, nodes
4s4
matches intent
CodeWindow
template
teach66.3–90.8skinetic-buildicon·white-knockout♪ node_lock
Third move. The repetitive markup is a job for a coding agent in the terminal. You describe the section in plain words, it writes the clean code, you check it in the browser. You stay the editor with taste. The agent is the fast pair of hands. That is how one person ships a full site in a day without cutting corners on the parts that show.
on-screen: Let the agent build the boring parts
expected on screen: red ground · a CodeWindow panel over a dimmed Signal Field · Nexus leads · node-graph · kinetic-build · icon·white-knockout logo · caption bottom-left
spec (the prompt): comp_id CodeWindowvisual node-graphshape tetraground redtreatment white-knockoutmotion kinetic-buildpower morphinstrument morph+laser→Let the agent build the boring partscurate codeLines, nodes, windowTitle
5s5
matches intent
KpiGrid
template
proof90.8–111.69999999999999sreceipts-counticon·liquid-chrome♪ node_lock
Here is the proof, and it is honest. The site you would visit for the hub is built exactly this way. One source file, sections that render themselves, an agent doing the typing. When we change the week, the whole site changes with it. We are not selling you a method we do not run on ourselves.
on-screen: Our own site proves it
expected on screen: red ground · a KpiGrid panel over a dimmed Signal Field · Nexus leads · receipts · receipts-count · icon·liquid-chrome logo · caption bottom-left
spec (the prompt): comp_id KpiGridvisual receiptsshape tetraground redtreatment liquid-chromemotion receipts-countpower receiptsinstrument spotlight→Our own site proves itcurate kpis, statsLabels
6s6
matches intent
shared field
signature-3d
resolve111.7–132.6scoalescenceicon·liquid-chrome♪ bed_out
So that is web design the way the hub does it. Sections written once, content in one file, an agent for the heavy lifting. Your step today is small. Go see it live at office.temerarii.xyz, then take your own worst page, the one with the wrong hours, and rebuild it as one section reading from one file.
on-screen: Look, then rebuild one page
expected on screen: red ground · tetra hero in the shared Signal Field · Nexus leads · coalescence · coalescence · icon·liquid-chrome logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual coalescenceshape tetraground redtreatment liquid-chromemotion coalescencepower coalescenceinstrument coalescence→Look, then rebuild one page

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 as the Front Door: Design a Section Once, Feed It Real Data Your site is the front door, and this video shows how to build it the way we build everything: design a section once, then let the agent fill the boring parts from real data. What you will learn: - Design a section once: build one good section, like a card or a feature block, as a reusable piece instead of hand-coding every page. - Feed the page real data: pull the content from a real source so the page reflects current numbers and copy, not hardcoded placeholders. - Let the agent build the boring parts: hand the repetitive layout work to the agent so a person spends time on the decisions that matter. Then the proof: our own site proves it. The office is built from reusable sections fed by one source, in public, so you can look at it and check the claim. Look, then rebuild one page the same way. Keywords: web design, reusable components, data-driven pages, front door, site automation. See the whole system run in public at temerarii.xyz.

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