Skip to content

REMOTION_VIDEO.md

Latest commit

 

History

History
63 lines (48 loc) · 2.78 KB

REMOTION_VIDEO.md

File metadata and controls

63 lines (48 loc) · 2.78 KB
Raw

Terrascope Aerial — Remotion launch video

Output

  • File: out/terrascope-launch.mp4 (~3 MB)
  • Specs: 1080×1920 (9:16), 30 fps, ~60 seconds, H.264
  • Use: Mobile-first product launch / social (Reels, TikTok, etc.)

Quick start

npm install
npm run start    # Remotion Studio (preview)
npm run render   # Render MP4 to out/terrascope-launch.mp4

Requires: Node 18+, FFmpeg on PATH (ffmpeg.org).

Code layout

Path Role
src/remotion/index.ts Entry: registerRoot(Root)
src/remotion/Root.tsx Registers composition TerrascopeLaunch
src/remotion/config.ts Resolution, FPS, duration, timeline (hook/features/benefits/CTA), brand colors
src/remotion/TerrascopeLaunch.tsx Main comp: sequences the 4 scenes
src/remotion/scenes/HookScene.tsx 0–10s: problem + brand (particles, kinetic type)
src/remotion/scenes/FeaturesScene.tsx 10–35s: 48H, 4K, LiDAR, 8+ (staggered cards)
src/remotion/scenes/BenefitsScene.tsx 35–48s: credentials, “Built for construction”
src/remotion/scenes/CTAScene.tsx 48–60s: “Your site. Documented from above.” + CTA

Editing the video

  1. Copy / timing
    Edit text and timing in each scene file under src/remotion/scenes/.
    Timeline boundaries are in src/remotion/config.ts (HOOK_END, FEATURES_END, BENEFITS_END).

  2. Brand colors
    Update the BRAND object in src/remotion/config.ts (green, greenLight, bg, ink).

  3. Adding music / voiceover

    • Put audio in public/audio/ (e.g. background.mp3).
    • In TerrascopeLaunch.tsx, add: 
      import { Audio, staticFile } from 'remotion';
// inside return:
<Audio src={staticFile('audio/background.mp3')} volume={0.4} />
    • Use Remotion’s <Sequence> and delay for syncing multiple tracks.

  4. Screenshots / website footage
    Use Remotion’s <Img> or <OffthreadVideo> with assets in public/ and reference via staticFile('path/to/asset.png').
    For “live” site capture you’d pre-record and drop the file into public/.

  5. 3D / particles
    Current version uses CSS (particles in HookScene, transforms). For full 3D, add @remotion/three and build scenes with Three.js inside the composition.

How it was built

  • Remotion 4 with React; no external video/audio generation APIs (no ElevenLabs, Stable Diffusion, etc.).
  • Animations: interpolate() and spring() from remotion for opacity, position, scale.
  • Structure: One composition, four <Sequence> segments; each scene uses useCurrentFrame() and its sequence start to compute local time.
  • Assets: No external images/video in the composition; you can add them under public/ and reference with staticFile().