maddexritter-rgb/vibe-editing-promo

---

name: promo description: THE branded video-promo skill (run as /promo). Makes premium branded videos with Remotion + Claude Code, picking ONE OF TWO MODES at the start. MODE A — ANIMATED EXPLAINER / DEMO — fully animated, brand-tokenized motion graphics (the LIQUID-GLASS kit in templates/glass: brand sting, hook cards, content-flywheel ring, terminal+screen-recording side-by-side, channel feeds, clip grids, escalation, payoff outro; or the SaaS-animation kit in templates/saas) for deck demos, feature launches, flywheel videos, branded explainers. MODE B — ARCHIVE / ORIGIN-STORY FILM — take a long ASSEMBLY CUT whose chapters are separated by black frames, auto-map the chapters, add branded era/chapter CARDS between them, a scene-matched music bed per chapter, flash transitions, and a climactic exponential GROWTH-CURVE payoff, then assemble + loudness-normalize via assemble.py. Renders to MP4. Use when user says make a promo video, /promo, create a SaaS demo, make a premium demo video, liquid glass video, presentation video for the deck, flywheel video, branded explainer, make a history film, origin story video, company timeline video, "X years in Y minutes", era cards, chapter cards, growth curve payoff, turn my assembly cut into a film, or hands over a deck / URL / brand / assembly-cut asking for a polished branded video.

/promo — branded video generator (Remotion + Claude Code)

Makes two kinds of premium branded video. Powered by Remotion (React-based video) + Claude Code + the remotion-best-practices skill.

🎬 PICK THE MODE FIRST (ask the user if it's not obvious)

• MODE A — ANIMATED EXPLAINER / DEMO. Fully animated, no real long-form footage as the spine. Deck demos, feature launches, the content-flywheel video, SaaS promos, branded explainers. → built from templates/glass/ (premium liquid-glass) or templates/saas/. See the glass section below. Worked example: ~/Downloads/engine/2026-06-12_WorkflowDemo (the FlywheelFilm composition).
• MODE B — ARCHIVE / ORIGIN-STORY FILM. The user hands you a long assembly cut (their own edit — real footage, chapters separated by black frames) and wants it turned into a branded film: chapter cards between sections, scene-matched music per chapter, flash transitions, and a growth-curve payoff. → era cards + assemble.py. See the MODE B section below. Worked example: ~/Downloads/engine/2026-06-14_BrandHistory (a "4.5 years in ~5 minutes" origin film).

Both modes share the same brand-tokenized glass kit (sting, GlassBG, era cards, growth curve, brand constants.ts), so they look like one family. Rebrand per brand in constants.ts + public/ logos — never hard-code a brand name into a component.

When to use this (vs other video skills)

• ✅ Use this: standalone promo videos, SaaS demos, course teasers, feature launch videos, animated explainers from a URL
• ❌ Don't use this: talking-head clips, face-tracked reframing, filler-word surgery, captioning existing video (use shortform / caption-clips instead)

Ready-made SaaS animation templates

Three production-ready Remotion components for the "SaaS animation style" (the $1-2k/video style dominating tech-brand Instagram/TikTok in 2026). Drop them into any Remotion project:

• templates/saas/SaasTextPopup.tsx — 4s branded intro with pop-in text + logo reveal
• templates/saas/SaasGlassReveal.tsx — 6s glass-UI feature cards with backdrop-blur
• templates/saas/SaasDashboardTour.tsx — 8s 3D dashboard tour with animated cursor

Full technique reference at editing-styles/saas-animation-style.md. Chained orchestrator at saas-animation-video — trigger with "make a saas animation video".

See templates/saas/README.md for wiring + brand customization.

---

🟣 PREMIUM LIQUID-GLASS DEMO / EXPLAINER VIDEOS — templates/glass/

The system behind the high-end, brand-native "holy shit" presentation video (the kind that drops into a slide deck as a live demo). Use this — not the saas templates — when the brief is a polished, deck- or concept-driven explainer/demo with real footage, real product UI, and bold on-screen text instead of a voiceover. Worked example: ~/Downloads/engine/2026-06-12_WorkflowDemo (the FlywheelFilm composition — a content-flywheel demo). 1920×1080 @ 30fps, bold lower-thirds, no VO.

BRAND-AGNOSTIC. The kit is brand-tokenized. Set the brand in src/constants.ts (COLORS + font) and drop the brand's logo PNGs in public/. The example uses Speaker / company.com (Sambucus #131628, Electric Indigo #6f00ff, Lavender #a08bec, Poppins) — swap those tokens per brand; never hard-code a brand name into a component.

What's in the kit (templates/glass/src/)

• constants.ts — brand tokens (COLORS, FPS, WIDTH, HEIGHT, spring presets). THE one place to rebrand.
• components/GlassBG.tsx — persistent drifting-orb gradient background (the continuous-flow base; sits behind every beat).
• components/GlassPanel.tsx — the frosted "liquid glass" panel (backdrop-filter blur + sheen + depth). dark variant for text legibility. backdrop-filter DOES render in Remotion's headless Chrome.
• components/GlassBeats.tsx — the beat primitives: GlassTitle (hook card), GlassFrame/SceneDemo (UI-in-a-glass-window + narration), GlassOutro (payoff card + logo), PayoffCard.
• components/BrandSting.tsx — ~1.5s logo sting (streaks → flash → mark bloom → wordmark).
• components/CreateShots.tsx — NarratorChip (the bold lower-third caption = the "bold text, no VO" layer) + media-player shots.
• components/Flywheel.tsx — signature beats: ContentFlywheel (the compounding loop RING), FlywheelEscalation (stacking deck-line payoff), AutoPostScheduler (live terminal + real screen-recording, side by side), RawSessionPlayer, HeroClipPlayer (clip in a phone frame), Tier1Prompt/Tier1Pipeline (command + steps).
• components/ChannelScroll.tsx — a real channel feed scrolling (thumbnails + durations). RealClipShowcase.tsx — a grid of real vertical clips playing. GlassBrowser.tsx — app UI in a browser frame. ScaleWall/Odometer/Stopwatch — volume + number drama. FXOverlay — grain/vignette.
• audio/index.tsx — AudioBed (music, low) + Sfx (whoosh/braam/riser/tick…) with a MASTER gain map.
• compositions/FlywheelFilm.tsx — the worked example: sting → hook → raw-proof → command → pipeline → (mids: channel + auto-post terminal/recording) → (shorts: hero + grid) → flywheel ring → escalation → outro.

The production playbook (the order that works)

1. Read the source material FIRST (the deck / brief). Extract the concept AND the brand's own language — pull verbatim lines for the beats so the video feels native to their talk. (Don't invent generic copy.)
2. Set brand tokens in constants.ts; drop logos in public/ (see gotcha #5 on logo PNGs).
3. Storyboard the beats with TransitionSeries (sting → hook → demo beats → payoff loop → escalation → outro). Keep it tight (~38–45s) — fast beats, bold lower-thirds. ("Too slow" is the #1 note.)
4. Wire real assets (see patterns below) — real footage/UI > mockups, every time.
5. Render: npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=16 (append "use Remotion best practices" when prompting edits).
6. QC BY EXTRACTING FRAMES — never trust it blind (gotcha #1).
7. Deliver to the project's 20_DELIVER/ (Brand-named). Local only unless told otherwise.

Real-asset patterns

• Footage → <OffthreadVideo muted startFrom={..} playbackRate={..} /> inside a glass player/phone/browser frame. Make proxies (720×1280 / 1080) so the studio + render stay fast.
• Screen recordings → crop to JUST the app UI (kill the browser tab/address bar/banner): ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4. Speed up (playbackRate 2–3.5×) so it visibly progresses through steps, not dwells.
• Terminal + recording side-by-side (the killer beat): a styled terminal whose log mirrors the REAL script's stdout (read the actual skill/script to get authentic lines) next to the actual screen recording — the two reading the same names sells it as one system. See AutoPostScheduler.
• Real data/thumbnails → pull live: yt-dlp "https://youtube.com/@CHANNEL/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s", then thumbnails from https://i.ytimg.com/vi/<id>/maxresdefault.jpg (fallback mqdefault.jpg). For Speaker clip data, the your analytics MCP.

🛑 THE GOTCHAS — every one is a real fix from building this; read before you render

1. QC by frames, never blind. After every render, ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg across EVERY beat and actually look. Render the first half early with --frames=0-540 while assets finish.
2. Transition text-salad. Two text beats that crossfade overlap into unreadable garbage. FIX: fade each text beat's content OUT over its last ~14 frames (an exit = interpolate(f,[dur-16,dur],[1,0]) multiplied into opacity) so it's gone before the next crossfades in. (Or hard-cut text beats.)
3. Sting/logo bleed-through. A sting (or any beat) that ends on a bright logo bleeds THROUGH the next translucent glass card during the crossfade. FIX: fade the sting's logo out at its OWN end so it hands off on a clean dark frame.
4. Scrim-over-text dimming (subtle!). An <AbsoluteFill> scrim is a positioned sibling, so it paints ABOVE static text and dims it — bright white survives, lavender/secondary text gets crushed and looks faint. FIX: put the scrim at zIndex:0 and wrap the text in a position:relative; zIndex:1 container. (Then a high-opacity scrim kills the drifting-orb "glow-then-unglow" pulse without dimming the text.)
5. Invisible logos. A square logo PNG with transparent padding renders the actual mark tiny/invisible. FIX: trim the PNG to its content first, then size by WIDTH (<Img style={{ width: 600, height: 'auto' }} />).
6. Audio clipping. Unmapped SFX play at 1.0 → full-scale clip. FIX: a MASTER gain (~0.5) + a full per-SFX VOL map + music ~0.2 under the voice; loudnorm I=-14:TP=-1.5 on the final deliverable. Verify volumedetect max ≤ ~−3 dB.
7. zsh word-split. for x in $VAR does NOT split in zsh (one iteration with the whole string). Use a literal list or ${=VAR}. (Bit me batch-downloading thumbnails.)
8. Keep the last frame live (not black) — outros end on the logo card; verify last-frame luma > ~10.
9. Fonts via @remotion/google-fonts (Poppins, JetBrainsMono). Numbers/keywords glow with a constant textShadow (don't rely on the bg for glow — see #4).

---

🧊 3D + 2.5D PARALLAX + ☁️ CLOUD SCALE (MODE A power-ups)

Worked example: ~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo (a a sample SaaS demo — parallax hero, floating glass dashboard cards, 3D bar chart + a true-WebGL variant).

3D — two paths

• CSS 3D (default, no deps, renders anywhere). Wrap a scene in perspective + transformStyle:'preserve-3d'; place layers at different translateZ and animate the world's Z with useCurrentFrame() = a camera dolly where near layers move more than far (real 2.5D parallax). Floating glass cards, extruded bar charts (front/side/top faces), receding grid floors all come from CSS transforms. Reach for this first — it's bulletproof in headless Chrome.
• True WebGL — @remotion/three + React Three Fiber. Real meshes, lighting, shadows, materials. Use only when CSS-3D can't (true geometry/lighting/DOF). Install @remotion/three + @react-three/fiber@^9 + three (R3F v9 is required for React 19; v8 is React 18). Drive animation with Remotion's useCurrentFrame(), NOT R3F's useFrame (Remotion renders frame-by-frame). Wrap in `<ThreeCanvas width