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 topic-brand-motionkind topicweek —date —campaign brand-pillarpillar brandbeat —asset videoduration 86.2sground blackscenes 14

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 topic-brand-motion 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 SceneReelfamily / template SceneReel
9:16 Reelrendered1:1 Squarepending16:9 Widepending9:16 4Kpending1:1 4Kpending16:9 4KpendingGIF (SMS)pending
▶ open rendered mp4
expected output: 1/7 rendered — same matrix the /media preview surfaces for this asset.

Composition layer × scene 14 scenes · 86.2s · comp_id + rendered still + tier + the script

#Layer (comp_id · still · tier)BeatTimecodeMotionLogoAudioVO / on-screen / caption
1s1
matches intent
shared field
signature-3d		open0–5.6sspatial-parallaxicon·liquid-chrome♪ —
Static logos sit still. Motion is how a brand actually breathes and moves through the world.
on-screen: Motion is how a brand breathes
expected on screen: black ground · icosa hero in the shared Signal Field · Signum leads · node-graph · spatial-parallax · icon·liquid-chrome logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual node-graphshape icosaground blacktreatment liquid-chromemotion spatial-parallaxpower summoninstrument summon→three-mark
2s2
matches intent
NodeGraphCard
template		legacy5.6–11.7scrossfade-8ficon·wireframe♪ —
The old way meant hand-keyframing every frame in heavy software, days of work for ten seconds.
on-screen: Old way: hand-keyframe every frame
expected on screen: black ground · a NodeGraphCard panel over a dimmed Signal Field · Signum leads · crossfade-8f · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id NodeGraphCardshape icosaground blacktreatment wireframemotion crossfade-8fpower morphinstrument decay→three-symboliccurate hub, nodes
3s3
matches intent
NumberedList
template		teach11.7–17.299999999999997skinetic-buildicon·wireframe♪ —
Step one, we storyboard the beats, because motion without a plan is just things wiggling.
on-screen: Step 1: storyboard the beats first
expected on screen: black ground · a NumberedList panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id NumberedListvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→html-in-canvas-panelcurate items, nodes
4s4
matches intent
ChecklistCard
template		teach17.3–24.4skinetic-buildicon·wireframe♪ —
Step two, we build the geometry in code with three.js, so every element is real, lit, and adjustable.
on-screen: Step 2: build the shapes in code
expected on screen: black ground · a ChecklistCard panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id ChecklistCardvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→three-diagramcurate items, nodes
5s5
matches intent
FlowSchematic
template		teach24.4–31.2skinetic-buildicon·wireframe♪ —
Step three, we animate it in Remotion, where the timeline is code and a tweak takes seconds, not hours.
on-screen: Step 3: drive timing with Remotion
expected on screen: black ground · a FlowSchematic panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id FlowSchematicvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→html-in-canvas-codecurate nodes, stages
6s6
matches intent
AnnotatedDiagram
template		teach31.2–37.5skinetic-buildicon·wireframe♪ —
Step four, an image model generates the surface textures, the chrome and the glow, in the brand palette.
on-screen: Step 4: generate textures with a model
expected on screen: black ground · a AnnotatedDiagram panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id AnnotatedDiagramvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→three-flowcurate callouts, nodes
7s7
matches intent
StackTrace
template		teach37.5–43.7skinetic-buildicon·wireframe♪ —
Step five, we score it so the audio lands exactly on the motion, because sound is half the feeling.
on-screen: Step 5
expected on screen: black ground · a StackTrace panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id StackTracevisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→html-in-canvas-panelcurate errMsg, errType, fix, frames, nodes
8s8
matches intent
DiffCard
template		teach43.7–50.5skinetic-buildicon·wireframe♪ —
Step six, one render command outputs vertical, square, and wide together, no re-cropping by hand.
on-screen: Step 6: render every aspect at once
expected on screen: black ground · a DiffCard panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id DiffCardvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→three-diagramcurate lines, nodes
9s9
matches intent
TerminalRun
template		teach50.5–56.0skinetic-buildicon·wireframe♪ —
Step seven, captions burn in on the same timeline, so the piece reads with the sound off.
on-screen: Step 7: burn captions on the timeline
expected on screen: black ground · a TerminalRun panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id TerminalRunvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→html-in-canvas-codecurate nodes
10s10
matches intent
BuildLog
template		teach56.0–62.4skinetic-buildicon·wireframe♪ —
Step eight, because it's all code, every version is saved and a client edit never means starting over.
on-screen: Step 8: version it like software
expected on screen: black ground · a BuildLog panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id BuildLogvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→three-flowcurate lines, nodes
11s11
matches intent
WireframeMock
template		teach62.4–69.5skinetic-buildicon·wireframe♪ —
Step nine, change one rule and the whole library re-renders itself overnight, consistent across every asset.
on-screen: Step 9
expected on screen: black ground · a WireframeMock panel over a dimmed Signal Field · Signum leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id WireframeMockvisual node-graphshape icosaground blacktreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→html-in-canvas-panelcurate nodes
12s12
matches intent
KpiGrid
template		proof69.5–74.5sreceipts-counticon·wireframe♪ —
We show the render itself and the time it took, no hand-waving about the craft.
on-screen: Receipts: ten seconds, rendered openly
expected on screen: black ground · a KpiGrid panel over a dimmed Signal Field · Signum leads · receipts · receipts-count · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id KpiGridvisual receiptsshape icosaground blacktreatment wireframemotion receipts-countpower receiptsinstrument spotlight→html-in-canvas-receiptscurate kpis, statsLabels
13s13
matches intent
shared field
signature-3d		futurist74.5–80.1sspatial-parallaxicon·wireframe♪ —
Soon you describe the motion in a sentence and the system drafts the first render for you to refine.
on-screen: Next: type a brief, get the animation
expected on screen: black ground · icosa hero in the shared Signal Field · Signum leads · spatial-parallax · icon·wireframe logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldshape icosaground blacktreatment wireframemotion spatial-parallaxpower spatial-parallaxinstrument laser-fire→three-forward
14s14
matches intent
shared field
signature-3d		resolve80.1–86.19999999999999scoalescenceicon·liquid-chrome♪ swell
Pick one logo, build it in three.js, and animate it in Remotion this week. Start with one shape.
on-screen: Animate one shape in Remotion
expected on screen: black ground · icosa hero in the shared Signal Field · Signum leads · coalescence · coalescence · icon·liquid-chrome logo · caption bottom-left
spec (the prompt): comp_id shared Signal Fieldvisual coalescenceshape icosaground blacktreatment liquid-chromemotion coalescencepower coalescenceinstrument coalescence→three-coalescence

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

9:16
1080×1920
Stories · TikTok · YouTube Shorts · Reels
1:1
1080×1080
LinkedIn · Facebook · Instagram
16:9
1920×1080
X/Twitter · YouTube · LinkedIn video

Channels 12 destinations

LinkedInX/TwitterYouTubeInstagramFacebookThreadsTikTokPinterestBlueskyEmailSMSBlog

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

tiktokStatic logos sit still. Motion is how a brand actually breathes. (AI-assisted) Here's the move: storyboard the beats first, build the shapes in code with three.js, then drive the timing in Remotion where a tweak takes seconds. One render command outputs vertical, square, and wide at once. Pick one logo and animate one shape this week. Start small.
instagramStatic logos sit still. Motion is how a brand breathes. Storyboard the beats first. Build the shapes in code with three.js. Drive the timing in Remotion. Render vertical, square and wide at once. Pick one logo. Animate one shape this week. #motiondesign #brandmotion #remotion #threejs #animation
linkedinMost brand animation gets skipped because the old way was hand-keyframing every frame: days of work for ten seconds. Here is how we make it repeatable: 1. Storyboard the beats first, because motion without a plan is just things wiggling. 2. Build the geometry in code with three.js, so every element is real, lit, and adjustable. 3. Animate it in Remotion, where the timeline is code and a tweak takes seconds, not hours. 4. Generate the surface textures with an image model, in the brand palette. 5. Score it so the audio lands on the motion. 6. One render command outputs vertical, square, and wide together. Because it is all code, every version is saved and a client edit never means starting over. The takeaway: pick one logo, build it in three.js, and animate one shape this week.
xBrand animation gets skipped because the old way was hand-keyframing every frame. Build the shapes in three.js, drive timing in Remotion where the timeline is code, render vertical/square/wide at once. Start with one shape.
facebookStatic logos sit still. Motion is how a brand actually breathes. The old way meant hand-keyframing every frame, days of work for ten seconds. Here's the method: storyboard the beats first, build the shapes in code with three.js, drive the timing in Remotion where a tweak takes seconds, and render vertical, square, and wide in one command. Pick one logo and animate one shape this week.
threadsStatic logos sit still. Motion is how a brand breathes. Storyboard the beats first. Build the shapes in code with three.js. Drive the timing in Remotion, where a tweak takes seconds, not hours. One render command makes vertical, square and wide at once. Pick one logo. Animate one shape this week.
pinterestBrand motion design method: how to animate a logo with code. Storyboard the beats, build geometry in three.js, drive the timeline in Remotion, generate textures with an image model, and render vertical square and wide aspects from one command. Code-based motion design so every version is saved and edits never start over.
blueskyStatic logos sit still. Motion is how a brand breathes. Storyboard the beats, build the shapes in three.js, drive timing in Remotion where a tweak takes seconds. One command renders vertical, square and wide. Start with one shape.
youtubeBrand Motion in Code: Animate a Logo With three.js and Remotion Static logos sit still. Motion is how a brand actually breathes and moves through the world. The old way meant hand-keyframing every frame in heavy software, days of work for ten seconds. Here is the method we use instead: storyboard the beats first, because motion without a plan is just things wiggling; build the geometry in code with three.js so every element is real, lit, and adjustable; animate it in Remotion, where the timeline is code and a tweak takes seconds; generate the surface textures with an image model in the brand palette; score it so the audio lands on the motion; render vertical, square, and wide together in one command; burn captions on the same timeline; and version it like software, so a client edit never means starting over. Change one rule and the whole library re-renders overnight. Pick one logo, build it in three.js, and animate one shape this week.

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

→ Wireframe · scenes→ Calendar week→ Media (audience preview)→ Storyboard hub→ Day view→ Channel view