revenoid-video-style

SKILL.md

---
name: revenoid-video-style
description: Use this skill when creating Revenoid product/launch videos, social ads, or any motion content. Establishes the visual vocabulary (MCIP wordmark, concentric ring motif, Cowork chat surface, MCP tool-pill cascades, real-app browser tilts, type system, transition patterns) derived from the MCIP pitch deck and the Cowork product itself. Triggers — "make a Revenoid video", "build an ad", "build a launch trailer", "Remotion composition for", "30s vertical ad", "social cutout", "MCIP video", "MCP product video".
---

# Revenoid Video Style Skill

This skill captures the visual grammar Revenoid videos should use. Apply it whenever building motion content for the brand.

**Style genealogy: derived from Revenoid's own assets only.**
- The **MCIP pitch deck** (slide 1's concentric purple rings + serif wordmark on navy; slide 8's tier stack; slide 11's numbered pill grid).
- The **Cowork product surface** (Claude-like chat UI, sidebar of saved tasks, MCP tool-pill cascade with names like `find_prospects`, `crm_query`, `revenoid-local`).
- **Real third-party app UIs** that Revenoid orchestrates over (Salesforce, Gmail, HubSpot, Outreach, Gong, Calendar) — quoted faithfully when shown, never stylized.

**Hard rule: do not invent character avatars or mascot creatures.** The brand identity is the wordmark + the product itself. No flowers, blobs, faces, or anthropomorphic shapes. The "personality" comes from typography rhythm, color, and the actual product UI in motion — not from a character.

## Companion files in this skill

- **`SCENE_PROMPTS.md`** — copy-pasteable per-archetype animation specs (frame timings, easing, exact transforms, full Remotion code blocks). **Use this when you need to actually build a scene** — don't reinvent.

## Decision flow when the user asks for a video

1. Read `SKILL.md` (this file) for vocabulary, brand floor, pitfalls.
2. Pick an assembly playbook from `SCENE_PROMPTS.md` § "Assembly playbooks" — matches the format/duration the user asked for.
3. For each beat in the playbook, copy the matching archetype's prompt block from `SCENE_PROMPTS.md` into your build.
4. Vary only: copy text, data values, beat duration. Don't mutate the animation specs.
5. Run the pre-ship checklist (§ 11 below).

---

## 1. The 7 scene archetypes

A Revenoid video is a sequence drawn from these seven patterns. Don't invent new archetypes — pick from this list. **None of them require character avatars.**

### A. Hero Number / Stat Card
*Used for*: stop-scroll moments, emotional opening, "$80K/seat/year" reveals, ticker counters.
- Big serif numerals **animating up or down**, full-screen.
- Counters use easing — not linear; settle with a slight bounce.
- Background: navy `#0B0B1A` with a soft purple radial glow at top, OR cream `#F4EFE6`.
- Font: editorial serif italic, 200pt+, white with subtle outer glow.
- Pair with a small pre-numeral lead-in line in spaced caps purple.

### B. App-Logo Stamp Card
*Used for*: "this app you use → we orchestrate" beats, montage of GTM tools.
- Single logo + wordmark, hard centered, plain background.
- Held for **0.6–1.2s only** — fast cuts between multiple logos build a montage.
- Background: warm off-white `#FBF8F3` with subtle blur halo, OR navy with the logo centered.
- The brand mark is **always** the third-party app's real logo — never a stylized version.

### C. 3D-Tilted Browser Window
*Used for*: "we orchestrate this whole product" hero shots; showing a real app under MCIP's control.
- A real-app screenshot rendered in a faux Mac browser window.
- Window tilted in 3D space (~12° rotateX, ~6° rotateY), perspective 1200.
- Floats above a navy or soft cream backdrop.
- **A glowing purple spotlight** highlights the part of the UI MCIP is about to act on (e.g. a dropdown, a button, an inbox row). The spotlight is a soft radial gradient (`radial-gradient(circle, rgba(167,139,250,0.4), transparent 60%)`), 240px wide, faintly pulsing.
- Optional: a small **MCP tool-pill ribbon** floats over the bottom of the window showing `crm_query → search_call_transcripts → find_prospects` lighting up in cascade.

### D. Cowork Product Card
*Used for*: "look how clean our chat surface is" beats; showing the Revenoid product in its own chrome.
- The Cowork app rendered in actual chrome (mobile or desktop).
- White card on a soft navy or cream backdrop.
- Visible chrome: traffic-light dots, page-title bar, sidebar with task list, MCP context panel on the right.
- A **plain cursor** (no name pill, no character) demonstrates the click flow with realistic deceleration.
- The active prompt visibly types in: `Find me prospects to chase this quarter`.

### E. Side-by-Side Orchestration
*Used for*: "Cowork drives this third-party app" — the most powerful demonstration of MCIP.
- Split frame OR picture-in-picture: **left/top** = Cowork chat surface with the prompt + visible MCP tool-pill cascade firing; **right/bottom** = the third-party app (Salesforce, Gmail, Outreach) updating in real time.
- A thin glowing **purple ray** connects the firing tool-pill on the Cowork side to the changing element on the app side.
- Optional: small badge in the lower-corner reads `REVENOID MCIP · live` in monospace caps — this is the only "name pill" the brand uses, and it's a brand badge, not a character.

### F. Hub-and-Spoke Ecosystem
*Used for*: "we plug into everything" capability beat. **Center is the brand, not a character.**
- Central element: a stylized **MCIP chat box** (a rounded rectangle showing the prompt input with a purple send-arrow), OR the concentric purple-ring motif from deck slide 1, OR the literal serif "MCIP" wordmark.
- 6–8 SaaS tool tiles equidistant on a circle around the center (Salesforce, HubSpot, Apollo, Outreach, Gmail, Calendar, Gong, Chorus).
- Each tile shows: the real tool's logo color as a 20px square chip + the tool's name in Inter Bold.
- Connecting **purple rays** from center to each tile, drawn with `stroke-dashoffset` over ~30 frames, then gently pulse opacity 0.6 → 1 → 0.6.
- Background: cream OR navy.

### G. Tool Constellation (group shot)
*Used for*: closing celebration, "the full stack" reveal — replaces any "family of characters" beat.
- Cream or navy background.
- A **grid of 12–18 third-party tool logos** (Salesforce, HubSpot, Apollo, Outreach, Gong, Chorus, Avoma, M365, Gmail, Calendar, Slack, DocuSign, Zoom, Loom, Notion, etc.) arranged in a 4×4 or 6×3 grid.
- Big italic serif headline floats above (e.g. "Forty MCP tools and counting", "Your stack, orchestrated", "All running through one chat").
- Logos pop in one at a time, 3–4 frames apart, each with a small spring scale 0 → 1.
- Optional: a faint purple line draws between random pairs of logos to suggest workflow connectivity.

---

## 2. The brand-mark system

**This is the brand's signature.** The brand identity is carried by these three elements — used across every video.

### a. The MCIP wordmark
- Big serif italic on navy, 240–400pt depending on hierarchy.
- Letterforms: Tiempos / GT Sectra / Iowan Old Style — must be a true editorial serif, not a "modern" font.
- Slight outer glow `0 0 60px rgba(167,139,250,0.45)`.
- This is the closing brand stamp on every CTA.

### b. The concentric-ring motif
- Three to five concentric purple rings (decreasing opacity 1.0 / 0.5 / 0.25), centered on the MCIP wordmark or used as a hero backdrop element.
- Stroke widths: 2–4px outer, 4–8px inner.
- Colors: `#A78BFA` (outer thin) → `#7C3AED` (filled inner core).
- Pulled directly from deck slide 1.

### c. The MCP tool-pill cascade
- This is the **product's** signature — visible in every Cowork screen recording.
- Vertical stack of pills, each one showing a tool name in monospace: `crm_query`, `search_call_transcripts`, `find_prospects`, `revenoid-local`, `lookup_company`, etc.
- Pills light up one after another, 6–10 frames apart, with a small `Result` chip appearing next to each as it completes.
- Use **monospace font** (SF Mono, JetBrains Mono, Menlo) for tool names — this signals "real product, real engineering" and differentiates from generic AI demos.
- Pill background: navy `rgba(11,11,26,0.06)` on light, `rgba(167,139,250,0.12)` on dark; stroke 1px purple.

### Brand badge (the only "name tag" allowed)
When a beat needs an inline brand callout (corner badge during a demo clip), use this badge — never a character pill:

```tsx
<div style={{
  padding: "8px 18px",
  background: "rgba(11,11,26,0.86)",
  color: "#FFFFFF",
  borderRadius: 999,
  fontFamily: "'SF Mono', Menlo, monospace",
  fontWeight: 700,
  fontSize: 22,
  letterSpacing: "0.16em",
}}>REVENOID · MCIP · LIVE</div>
```

---

## 3. Type system

| Use | Family | Weight | Size range (1080w) | Treatment |
|---|---|---|---|---|
| Hero numerals (Archetype A) | Editorial serif (Tiempos / GT Sectra / Ogg) | 400 italic OR 700 | 180–280pt | white, slight outer glow, real-time counter |
| MCIP wordmark on CTA (Archetype A/F) | Same serif | 700 | 320–400pt | white on navy, purple glow |
| Headlines on cream cards | Same serif | 400 italic | 90–140pt | charcoal `#0F172A` |
| Pivot statements ("Claude can't actually do work") | Same serif | 700 | 110–140pt | charcoal on cream |
| Body / app-UI text | Inter (or app's native font) | 500–700 | match real app | match real app |
| MCP tool-pill names (Archetype E + product) | SF Mono / JetBrains Mono | 600 | 22–32pt | navy on light, purple on dark |
| Caption bars (top-anchored) | Inter | 700 | 48–64pt | white on translucent navy bar |
| CTA button URL | Inter | 900 | 40–56pt | navy on white pill |

**Hard rule**: mix exactly two type families per video plus monospace for tool names. Editorial serif for emotional/headline; sans-serif Inter for everything else; monospace ONLY for tool-pill cascades. Never a fourth family.

---

## 4. Color palette

```
NAVY       #0B0B1A  primary dark bg, CTA cards, dramatic moments
NAVY_2     #13132A  navy gradient inner stop
CREAM      #F4EFE6  primary light bg
CREAM_2    #FBF8F3  app-stamp card bg
PURPLE     #A78BFA  brand accent — rays, glows, type highlights
PURPLE_DEEP #7C3AED brand accent (gradients, fills)
GREEN_OK   #34D399  success states, completion ticks
INK        #0F172A  body text on light bg
INK_MUTED  #64748B  subtle text
```

**Don't add a brand red, brand pink, or any "character color".** Variety in the video comes from the **real-app UIs** Revenoid orchestrates over (Salesforce blue, Gmail red, HubSpot orange, etc.) — those are quoted, not part of the brand palette.

Tool category swatches (used ONLY in hub-and-spoke tile chips, sized 20×20px):
```
Salesforce  #00A1E0
HubSpot     #FF7A59
Apollo      #1A2B5F
Outreach    #5951FF
Gmail       #EA4335
Calendar    #34A853
Gong        #8B3FFC
Chorus      #FF6B35
```

---

## 5. Layout / composition rules

1. **Wordmark hierarchy**: when the MCIP wordmark appears, it sits center, takes 60–70% of frame width, and is the largest element on screen. Don't crowd it.
2. **Mac browser chrome** for any "in-app" moment — three traffic-light dots top-left, soft drop shadow `0 30px 80px -20px rgba(0,0,0,0.4)`, rounded corners 14px.
3. **Cursor demos use a plain pointer** — no character name-tag, just an Inter Bold `Click` micro-label or a small purple dot ping when a click lands.
4. **Real-app authenticity** — when showing Gmail/Slack/Calendar/Salesforce etc., reproduce their actual UI faithfully (real fonts, spacing, color). Do not stylize. Do not overlay invented characters.
5. **Cream-to-navy breaks** — every 4–6s of cream/light scenes, cut to a single navy-background moment (Archetype A hero numeral, or the MCIP wordmark stamp) for visual rest.
6. **Burned-in caption rule** — for paid social: white, sans-serif, 56pt+, on translucent navy bar, anchored at **top** of frame (y=130–300 in 1080×1920) — not bottom. LinkedIn UI sits at the bottom on mobile.
7. **Tool-pill cascade as visual rhythm** — when a beat has more than 2 seconds of "abstract messaging" (no real-app footage), drop in a vertical MCP tool-pill cascade as a side-element to keep the eye moving and reinforce "this is real product".

---

## 6. Pacing

- **Stop-scroll moment in first 1.5s** — big numeral, MCIP wordmark animation, OR the concentric-ring motif drawing in.
- **App-logo stamp cards**: 0.6–1.2s each.
- **Cowork product cards**: 2.5–4s each (long enough to read the prompt, not so long you fall asleep).
- **Side-by-side orchestration scenes**: 4–6s each — viewer needs time to recognize the third-party app AND watch it change.
- **Hub-and-spoke**: 4–5.5s — long enough to count the tiles and watch all rays draw in.
- **Tool constellation**: 3–4s — count the logos at a glance.
- **CTA card**: 4–5s.

For a 30s LinkedIn ad: target 6–8 scenes. For a 60–90s launch trailer: 12–18 scenes.

---

## 7. Audio

- Music: warm electronic with a steady rhythm, ~85–100 BPM. Brand reference: `revenoid-videos/public/music.mp3`.
- **Music ducks under VO** to ~18–22% volume; pops back to 60% during transitions.
- **Beat-sync**: every app-logo card, every cut, every wordmark reveal lands on the downbeat. If beats and visuals fall out of sync, retime the visual cuts — the music is the spine.
- Loudnorm to **-14 LUFS** for LinkedIn / IG / TikTok ads. -16 LUFS for YouTube.
- **No SFX whooshes.** No stinger sound effects. Cuts and music carry; on rare occasion, a soft purple-glow `pulse` SFX is acceptable when an MCP tool-pill lights up — but never a "magic sparkle".

---

## 8. Common pitfalls (don't do these)

- ❌ **Inventing a mascot or character avatar.** No flowers, no blobs, no eyes-on-a-shape, no anthropomorphic mark. The brand is wordmark + product + concentric rings. Period.
- ❌ Hard black bars (letterboxing) when reframing landscape→portrait. Always use a blurred copy of the source as the canvas bg.
- ❌ Empty-navy frames at scene boundaries. Animations must start *before* frame 0 of each new scene (use negative `appearAt` offsets so springs are partly complete at the boundary).
- ❌ Loading-state frames as the dominant visual. **Never let a "loader" or "0%" counter linger more than ~0.7s** — the populated result must arrive fast.
- ❌ Captions at the bottom of vertical ads. They collide with platform UI chrome.
- ❌ More than two type families (plus monospace for tool names — that's the cap).
- ❌ A 6th brand color, or any "character" red/pink.
- ❌ Stylizing a third-party app's UI when you show it. Reproduce it faithfully or not at all.
- ❌ Naming the AI agent. There is no "Ash", no "Eva", no character persona. The brand is "Revenoid MCIP". The orchestration is just "MCIP" or "the agent".

---

## 9. Implementation: Remotion recipe

This project (`/Users/rabigupta/revenoid-workspace/revenoid-videos/`) already has the right primitives. Reuse them.

### Composition shell
```tsx
// 1080×1920 vertical:
<Composition
  id="RevenoidAdXX"
  component={RevenoidAdXX}
  durationInFrames={F(30)} // 900 frames
  fps={30}
  width={1080}
  height={1920}
/>
```

### Scene structure — always Series.Sequence
```tsx
<AbsoluteFill style={{ background: NAVY }}>
  <Series>
    <Series.Sequence durationInFrames={D.B0}><Beat0 /></Series.Sequence>
    <Series.Sequence durationInFrames={D.B1}><Beat1 /></Series.Sequence>
    {/* ... */}
  </Series>
</AbsoluteFill>
```

### The boundary fix — content visible at frame 0
```tsx
// Use NEGATIVE appearAt so the spring is already partway complete
// at frame 0 of the new beat. Prevents empty-navy transition flashes.
<TopCaption text="..." appearAt={-8} />
<MobileHeader appearAt={-8} />
<PromptBubble appearAt={-4} />
<AgenticLoader appearAt={6} fadeAt={24} />  // loader visible 0.6s
// Result card lands at frame 28 — viewer sees populated card, not loader.
```

### Concentric-ring motif (the brand's signature backdrop element)
```tsx
const ConcentricRings: React.FC<{ pulse?: boolean }> = ({ pulse = true }) => {
  const frame = useCurrentFrame();
  const breathe = pulse ? 1 + Math.sin(frame / 30) * 0.02 : 1;
  return (
    <svg style={{ position: "absolute", right: -100, top: 80, width: 800, height: 800, transform: `scale(${breathe})` }} viewBox="0 0 800 800">
      <circle cx="400" cy="400" r="380" fill="none" stroke="#A78BFA" strokeWidth="2" opacity="0.35" />
      <circle cx="400" cy="400" r="280" fill="none" stroke="#A78BFA" strokeWidth="3" opacity="0.55" />
      <circle cx="400" cy="400" r="180" fill="none" stroke="#A78BFA" strokeWidth="4" opacity="0.75" />
      <circle cx="400" cy="400" r="100" fill="#7C3AED" opacity="0.85" />
    </svg>
  );
};
```

### MCP tool-pill cascade (the product's signature)
```tsx
const ToolPillCascade: React.FC<{ tools: string[]; appearAt?: number }> = ({ tools, appearAt = 0 }) => {
  const frame = useCurrentFrame();
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10, fontFamily: "'SF Mono', Menlo, monospace" }}>
      {tools.map((t, i) => {
        const start = appearAt + i * 8;
        const opacity = interpolate(frame, [start, start + 6], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
        const slideX = interpolate(frame, [start, start + 8], [-30, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
        const resultOpacity = interpolate(frame, [start + 18, start + 26], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
        return (
          <div key={t} style={{ display: "flex", gap: 8, opacity, transform: `translateX(${slideX}px)`, alignItems: "center" }}>
            <div style={{ padding: "6px 14px", background: "rgba(167,139,250,0.14)", border: "1px solid rgba(167,139,250,0.45)", borderRadius: 999, fontSize: 22, color: "#FFFFFF", fontWeight: 600 }}>{t}</div>
            <div style={{ opacity: resultOpacity, padding: "4px 10px", background: "rgba(52,211,153,0.18)", border: "1px solid #34D399", borderRadius: 999, fontSize: 18, color: "#34D399", fontWeight: 700 }}>Result</div>
          </div>
        );
      })}
    </div>
  );
};
```

### 3D browser tilt with spotlight (no character)
```tsx
<div style={{ perspective: 1400, perspectiveOrigin: "50% 30%" }}>
  <div style={{
    transform: `rotateX(8deg) rotateY(-4deg)`,
    transformStyle: "preserve-3d",
    boxShadow: "0 50px 120px -30px rgba(0,0,0,0.45)",
    borderRadius: 18,
    overflow: "hidden",
    position: "relative",
  }}>
    <BrowserChrome />
    <Img src={appScreenshot} style={{ width: "100%" }} />
    {/* Purple spotlight on the active UI element */}
    <div style={{
      position: "absolute", left: 420, top: 280, width: 240, height: 240,
      background: "radial-gradient(circle, rgba(167,139,250,0.4), transparent 60%)",
      pointerEvents: "none",
    }} />
  </div>
</div>
```

### Hero numeral counter
```tsx
const value = Math.round(
  interpolate(frame, [4, 50], [0, 80000], {
    easing: Easing.out(Easing.cubic),
    extrapolateRight: "clamp",
  })
);
<div style={{
  fontFamily: "'GT Sectra', 'Tiempos', serif",
  fontStyle: "italic",
  fontWeight: 400,
  fontSize: 240,
  color: "white",
  textShadow: "0 0 60px rgba(167,139,250,0.45)",
}}>
  ${value.toLocaleString()}
</div>
```

### Audio handling — same playbook as `RevenoidLiAd30sV3`
1. Render Remotion video silent (`out/foo_pre.mp4`)
2. Build VO via ElevenLabs API; build music bed from `public/music.mp3`
3. Mux + loudnorm + final encode in one ffmpeg pass:
```bash
ffmpeg -i out/foo_pre.mp4 -i vo.mp3 -i music.mp3 \
  -filter_complex "[1:a]volume=1.0[vo];[2:a]volume=0.18,afade=t=in:st=0:d=0.4[mu];[vo][mu]amix=inputs=2:duration=first,loudnorm=I=-14:TP=-1.5:LRA=11[aout]" \
  -map 0:v -map "[aout]" -t 30.0 \
  -vf "scale=1080:1920:in_range=full:out_range=tv,format=yuv420p" \
  -c:v libx264 -profile:v high -level:v 4.0 -preset slow -crf 18 \
  -c:a aac -b:a 192k -ar 48000 -movflags +faststart \
  -y out/foo.mp4
```

### Reusable components in this repo
- `src/launch/Scenes.tsx` — `Scene01a_Hook` (stamp), `Scene01b_HookTwist` (chip strikethrough), `Scene02_Intro`, `Scene07_TierLadder`, `Scene10_CTA`. Use as templates.
- `src/RevenoidLiAd30sV3.tsx` — the `AgenticLoader`, `MobileHeader`, `PromptBubble`, `TopCaption` components. Lift these directly.
- `src/RevenoidMcipAd30s.tsx` — the MCIP ad: hero numeral, real product clips, hub-and-spoke (chat-box center), CTA wordmark.
- `src/dashboard/Shell.tsx` + `ChatUI.tsx` — full Revenoid app chrome (sidebar, conversation list, chat input).
- `src/launch/artifacts/index.tsx` — research, account-plan, email artifacts (real result cards, not loaders).
- `src/TrailerLetterbox.tsx` — letterbox wrapper for landscape-source → vertical canvas.

---

## 10. Implementation: HeyGen recipe (when you need a human host)

Use HeyGen for **speaker shots** when the script needs a real human face. Pipeline:

1. Generate the human VO + face in HeyGen at 1080×1920 (or 1920×1080 if landscape) with the brand background.
2. Export with **transparent or chroma-key-able background** if available, otherwise plain backdrop matching brand cream `#F4EFE6` or navy `#0B0B1A`.
3. In Remotion, place the HeyGen `<OffthreadVideo>` as one layer, and overlay the hero numeral / wordmark / app card on top using `position: absolute`.
4. **Speaker silhouette > overlay** depth — use `zIndex` so numbers visually sit *behind* the speaker.

Use HeyGen ONLY when a human face is essential (founder spot, customer testimonial). For everything else (numerals, app cards, hub-and-spoke, CTA), use Remotion. HeyGen for non-human content is overkill.

---

## 11. Reference checklist before shipping

- [ ] First 1.5s has a stop-scroll moment (numeral counter, MCIP wordmark, or concentric-ring sweep)
- [ ] At least 3 of the 7 archetypes used
- [ ] **No character avatars or invented mascots anywhere** — wordmark + product + rings only
- [ ] MCIP wordmark or concentric-ring motif appears in at least 2 beats (always at CTA)
- [ ] Type system: exactly 2 families + monospace for tool names, never more
- [ ] No empty-navy boundary frames (verified by spot-frame at every beat boundary)
- [ ] No loader/0% frames lasting > 0.7s
- [ ] Captions at TOP of vertical (y=130–300), white-on-translucent-navy bar
- [ ] Audio normalized to -14 LUFS (LinkedIn) / -16 LUFS (YouTube)
- [ ] Cream-to-navy break every 4–6 scenes for visual rest
- [ ] Real third-party apps shown faithfully (real fonts, real colors, no stylization)
- [ ] Final ffprobe checks: 1080×1920 (or 1920×1080), 30fps, h264 High, yuv420p, color_range tv, duration accurate ±50ms

---

## 12. When to use what

| Situation | Use |
|---|---|
| Founder talking-head with overlay | HeyGen + Remotion overlay |
| Stat reveal / hero numeral | Remotion (Counter component, Archetype A) |
| App-logo montage | Remotion (logo cards in Series, Archetype B) |
| Showing a real third-party app | Remotion 3D browser tilt + spotlight (Archetype C) |
| Cowork product demo | Remotion (Archetype D, lift `MobileHeader` from V3) |
| MCIP orchestrating a real app | Remotion side-by-side or PiP (Archetype E) |
| "We connect to everything" | Remotion hub-and-spoke with chat-box / wordmark center (Archetype F) |
| Closing "look at all our integrations" | Remotion tool-logo grid (Archetype G) |
| Letterboxed landscape→vertical | Remotion `TrailerLetterbox` wrapper |
| Reframing existing trailer for ads | ffmpeg "universal reframe pipeline" (blurred bg + sharp center band) |

---

## 13. Don't reinvent — start from the most similar past video

Before building anything, search for the most similar past Revenoid composition in `revenoid-videos/src/`:

- **Vertical 30s ad with real product clips** → start from `RevenoidMcipAd30s.tsx`
- **Vertical 30s ad with mobile-native UI** → start from `RevenoidLiAd30sV3.tsx`
- **Vertical 75s narrative** → start from `DealAccelDemo.tsx`
- **Landscape full trailer** → start from `ProductReleaseLaunchTrailer.tsx`
- **Letterbox wrapper** → start from `TrailerLetterbox.tsx`
- **Square 1:1** → register a new composition with `TrailerLetterbox` at 1080×1080

Copy, then mutate. Most of the type system, color tokens, and component primitives are already in place — your job is to assemble them into the new sequence, not rewrite from scratch.