| name | decision-room-production |
| description | Production bible for RestoreAssist "Decision Room" episodes — cinematic Remotion compositions at senior production house quality. Use this skill whenever writing, designing, or rendering any Decision Room episode. Covers the full stack: cold open philosophy, frame-precise timing charts, per-act colour grading, kinetic typography, heartbeat emotional arc, real asset pipeline (Playwright screenshots, code reveals, Linear ticket citations), sound design cues, and the Remotion TSX patterns that encode all of it. Do NOT produce generic bullet-card output. Every frame must be intentional.
|
Decision Room — Production Bible
The One Rule
A production team with 15 years behind them does not fill time — they earn every second.
Before writing a single line of Remotion TSX, ask: what is the audience feeling at this frame,
and what do we want them to feel at the next one? If you cannot answer that, the scene is not
ready to write.
This is not a technical guide format. It is a documentary about the craft of building
software for the restoration industry — one major decision per episode, told with the
discipline and intention of a broadcast journalism package.
Episode Structure — 5 Minutes (9,000 frames @ 30fps)
Each episode is built on five acts. The timing below is non-negotiable — it encodes the
emotional arc. Do not flatten it into uniform sections.
ACT 0 — COLD OPEN frames 0 – 270 (0:00 – 0:09)
ACT 1 — PROBLEM frames 270 – 1350 (0:09 – 0:45)
ACT 2 — METHODS frames 1350 – 3600 (0:45 – 2:00)
ACT 3 — SWOT frames 3600 – 5850 (2:00 – 3:15)
ACT 4 — DECISION GRANTED frames 5850 – 7920 (3:15 – 4:24)
ACT 5 — PRODUCT ALIVE frames 7920 – 9000 (4:24 – 5:00)
See references/timing-chart.md for the frame-by-frame beat map of each act.
Act Philosophy
ACT 0 — Cold Open (9 seconds)
No logo. No title. No greeting.
Open on black. A single data point or quote — one line — fades in from nothing.
This is the weight of the problem before the audience knows they are watching anything.
Examples that work:
- "47% of Australian restoration claims are delayed by documentation errors."
- "The floor plan uploaded. The compliance report didn't."
- "It took 4 hours to write a scope that should take 4 minutes."
The line sits for 4 seconds. Then a slow white flash — not a logo reveal — a breath.
The RestoreAssist mark fades in at 8 seconds. Episode number badge, bottom-left, no animation.
ACT 1 — The Problem (36 seconds)
Establish urgency. Do not explain yet.
Two or three facts that make the problem vivid — visual, not abstract.
Use the real industry numbers. Real Linear ticket counts. Real timestamps from the build log.
The headline arrives at frame 540 (18 seconds in) — large, single-colour, full width.
Sub-headline at frame 720 (24 seconds) — muted, half-size, fade-up.
Colour temperature: cold — desaturated navy, cyan at 60% opacity, almost grey.
This is the world before the decision.
ACT 2 — Methods (75 seconds)
One method = one screen. Each gets 20–25 seconds.
Not a list. A reveal. Each method enters from the left at 80% opacity, holds, then dims to 40%
as the next method arrives. The dimming signals "we considered this and moved on."
For 3 methods: 3 screens × 25 seconds = 75 seconds, perfect.
For 2 methods: pad each to 37 seconds with a consequence reveal — what would have happened
if we had chosen this.
Pull real screenshots from public/screenshots/ for relevant methods. Scale to 85%,
apply a 2px cyan border, slight drop shadow. Never use placeholder graphics.
Colour temperature: neutral — full navy, cyan at 100%.
ACT 3 — SWOT (75 seconds)
The tension act. This is the pivot.
Do not use a 2×2 grid. The SWOT is delivered as a four-beat kinetic sequence:
- Strengths enter from the left (warm — lean toward amber undertone)
- Weaknesses enter from the right simultaneously, pushing back (cooler, slight red undertone)
- Opportunities rise from below (this is resolution energy — let it breathe)
- Threats descend from above (brief — 8 seconds only — do not linger on fear)
Each quadrant has one headline and two supporting facts maximum.
The visual tension between left and right entering simultaneously is what makes SWOT feel like
a genuine decision, not a checklist.
Colour temperature: in flux — this is the only act where the grade shifts mid-act.
ACT 4 — Decision Granted (69 seconds)
The release. One sentence. Full bleed.
The decision is stated in a single sentence. No sub-copy. No bullet points.
The sentence enters at 100% scale from 85%, spring-settled, 0.6 second duration.
At frame 6300 (15 seconds into this act), cut to black for 12 frames.
Then: the feature, running live in the product. A real screenshot, full 1920×1080, no border.
The RestoreAssist watermark, bottom-right, 22px, 40% opacity.
The word SHIPPED fades in over the screenshot at 60% opacity in Inter Display 700, tracking
+6, all caps, cyan — centred, bottom third.
Colour temperature: warm — navy pulls toward 20% amber, cyan at full brightness.
ACT 5 — Product Alive (36 seconds)
Show the thing working. Then release the audience.
Real screenshot sequence: 3–4 product screens, cross-dissolving every 8 seconds.
Progress bar depletes. URL badge builds in. Episode badge, bottom-left, same as cold open.
Final frame: black. RestoreAssist mark. restoreassist.com.au. Nothing else.
Colour System
The grade shifts across acts to carry emotional weight. Never use flat values — always
interpolate between act colours at scene transitions (15-frame cross-fade minimum).
BACKGROUND CYAN BODY TEXT
Cold Open: #0a0f1a #0891b2 (60%) #9ca3af
Act 1 Problem: #101827 #06b6d4 (65%) #d1d5db
Act 2 Methods: #152338 (base) #06b6d4 (100%) #f4f5f6
Act 3 SWOT: shifts see below varies
Strengths: warm left half #06b6d4 #f4f5f6
Weaknesses: #1a1020 right half #9333ea (30%) #e2e8f0
Opportunities:#0f2318 #34d399 #f4f5f6
Threats: #1a100f #f87171 (50%) #fca5a5
Act 4 Decision: #1a1508 #06b6d4 (100%) #fef3c7 (warm)
Act 5 Product: #0f172a #06b6d4 #f4f5f6
Full hex values with interpolation keyframes: references/color-system.md
Typography System
Never use Segoe UI as a primary display face. The RestoreAssist Decision Room uses:
Display: Inter Display 800 — headlines, decision statement, cold open stat
size 72–96px, tracking -2.5, line-height 0.95
Heading: Inter 700 — act titles, method names, SWOT quadrant headers
size 40–52px, tracking -1.0, line-height 1.1
Body: Inter 400 — supporting facts, bullet content
size 20–24px, tracking 0, line-height 1.6
Mono: JetBrains Mono 400 — code snippets, ticket numbers, timestamps
size 16–18px, tracking +0.5
Label: Inter 500 ALL CAPS — episode number, act labels, "SHIPPED"
size 12–14px, tracking +3.0, opacity 60–80%
In Remotion, load via CSS @import in the Remotion config or inline style injection.
Fall back to "Inter", "system-ui", sans-serif if font loading fails.
Motion Language
Spring animations should be rare and intentional — not the default. Use them only for
the Decision Granted reveal and CTA scale-in. Everything else uses one of these:
REVEAL (content entering):
easing: cubic-bezier(0.16, 1, 0.3, 1) — fast out, slow settle
duration: 18–24 frames
translateY: 28px → 0, opacity: 0 → 1
EMPHASIS (stat/headline):
easing: cubic-bezier(0.34, 1.56, 0.64, 1) — slight overshoot
duration: 14 frames
scale: 0.92 → 1.0, opacity: 0 → 1
DISMISS (method dimming when next arrives):
easing: linear
duration: 12 frames
opacity: current → 40%
SCENE TRANSITION (act-to-act):
white flash at 8% opacity for 3 frames, then cross-fade 15 frames
Do NOT use the full black wipe — that kills pacing
DECISION SNAP (the moment):
spring({ damping: 14, stiffness: 180 }) — fast, decisive
scale: 0.88 → 1.0
SCREENSHOT REVEAL:
easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
duration: 30 frames
translateY: 16px → 0, opacity: 0 → 1, scale: 0.97 → 1.0
The Heartbeat Map
This is the emotional arc for a complete episode. Every scene should be able to point to a
position on this arc:
0:00 ● Weight (cold open stat lands — silence before the brand)
0:09 ↗ Authority (RestoreAssist mark — "we know this world")
0:20 ↗ Urgency (problem stat 2 — the scale of the issue)
0:40 → Curiosity (methods begin — "how did they approach it?")
1:10 → Consideration (method 2 — the alternative)
1:40 ↘ Doubt (method 3 dimming — "none of these are perfect")
2:00 ↘ Tension (SWOT — strengths and weaknesses in visual conflict)
2:30 ● Maximum tension (weaknesses and threats — the pivot)
2:50 ↗ Resolution energy (opportunities rise)
3:15 ↗↗ Release (decision statement — one sentence, full bleed)
3:30 ●● Satisfaction (the product, running live)
4:10 → Confidence (product screen sequence)
4:45 ↗ Action (URL, final mark)
5:00 ● Silence (black frame — let it land)
Asset Pipeline
Screenshots
The capture-screenshots.ts script captures 1920×1080 PNGs of the live app.
Assets live in public/screenshots/. Use these episode-to-asset mappings:
Episode 1 (Sketch): inspection-sketch-tab.png
Episode 2 (IICRC): inspection-detail.png (moisture tab)
Episode 3 (AI Scope): inspection-detail.png (scope tab)
Episode 4 (Integration): dashboard.png + dashboard-integrations (capture separately)
Episode 5 (Property Data): dashboard-inspections.png
Episode 6 (Mobile): capture mobile simulator screenshots separately
Episode 7 (Dev+AI): dashboard.png + a code editor screenshot
Episode 8 (Moisture Map): inspection-moisture-tab.png
In the composition, load screenshots via Remotion's staticFile():
<Img src={staticFile('/screenshots/inspection-sketch-tab.png')}
style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
Code Snippets
Code shown on screen must be real code from the codebase, not invented.
Pull from actual source files. Apply a dark code block:
background: #0d1117 (GitHub dark)
border-left: 3px solid #06b6d4
border-radius: 8px
padding: 24px 28px
font: JetBrains Mono 16px
Reveal lines one at a time, 4 frames apart, top to bottom. Max 8 lines visible at once.
Linear Ticket Citations
When referencing a build decision, show the ticket as a lower-third source badge:
RA-266 · Moisture Drying Progress Chart · Done 2026-03-30
Font: JetBrains Mono 12px, opacity 55%, bottom-left, 32px from edge.
Fade in at 40% opacity, hold 6 seconds, fade out. Never sits over key content.
Sound Design Cues (for voiceover sync)
Sound is not in scope for Remotion rendering (ElevenLabs handles the voiceover).
However, instruct ElevenLabs with these pacing notes embedded in the script:
[PAUSE 1.5s] — cold open stat (silence after the number)
[PAUSE 0.8s] — between each method
[PAUSE 2.0s] — before decision statement (maximum anticipation)
[PAUSE 1.0s] — after "SHIPPED" moment
[PAUSE 0.5s] — between product screens
[SLOW DOWN] — decision statement should be delivered 20% slower than body
[EMPHASIS] — marks a word that should be louder/stressed
Composition File Structure
D:\Claude-Code-Remotion\RestoreAssist\src\
├── shared\
│ ├── brand.tsx — brand tokens, LogoMark, GlowOrb, GridOverlay, CyanRule
│ ├── motion.ts — all named easing curves and spring configs
│ ├── typography.tsx — Text components (Display, Heading, Body, Mono, Label)
│ └── transitions.tsx — SceneTransition, ActTransition, WhiteFlash
├── boardroom\
│ ├── ColdOpenScene.tsx
│ ├── ProblemScene.tsx
│ ├── MethodScene.tsx — takes method index + content + screenshot path
│ ├── SWOTScene.tsx — four-beat kinetic sequence
│ ├── DecisionScene.tsx — full-bleed statement + SHIPPED reveal
│ └── ProductScene.tsx — screenshot cross-dissolve sequence
├── BoardroomComposition.tsx — assembles all scenes, reads episode JSON
├── VideoGuideComposition.tsx — existing (unchanged)
└── index.ts — registers both compositions
Each scene file is under 200 lines. If it exceeds 200 lines, split into sub-components.
Episode Content Schema
Episode content lives in content/resources/{slug}.json. The Decision Room episodes
extend the existing schema with these new fields:
interface DecisionRoomEpisode {
slug: string
title: string
episodeNumber: number
coldOpenStat: string
problem: {
headline: string
facts: string[]
ticketRef?: string
}
methods: Array<{
name: string
description: string
screenshotName?: string
consequence?: string
}>
swot: {
strengths: [string, string]
weaknesses: [string, string]
opportunities: [string, string]
threats: [string, string]
}
decisionStatement:
:
: []
:
: []
}
The Standard You Are Holding
When producing a Decision Room episode, ask yourself before each scene:
-
Is this earning its screen time? If a 10-second scene could be 6 seconds without losing
anything, cut it to 6.
-
Does this scene know what comes before and after it? Every scene should feel like it was
cut from the same roll as its neighbours.
-
Would someone who has never heard of RestoreAssist understand the weight of this decision?
The audience is restoration professionals — they will feel the IICRC reference, the
compliance burden, the field reality. Write to that.
-
Is the motion serving the story or decorating it? Animation that calls attention to
itself has failed. The best motion is the kind the viewer doesn't consciously notice — they
just feel the pacing is right.
-
Could a 15-year editor defend every cut? If you can't articulate why a transition
happens at frame X rather than frame X+12, the transition is in the wrong place.
Read references/timing-chart.md for the full frame-by-frame beat map before writing any
composition code.
