Files
Sportstime/docs/STORYBOARD_PRODUCTION.md
2026-02-10 18:15:36 -06:00

22 KiB

SECTION 3: REUSE MATRIX

Rows = Clip IDs, Columns = Videos. Cell = timecode range where used. Empty = not used.

Clip ID V01 V02 V03 V04 V05 V06 V07 V08 V09 V10 Total Uses
CLIP-001 0.0-1.5 0.0-1.0 0.0-1.0 3
CLIP-002 1.5-2.5 1.0-2.0 0.0-1.0 5.0-6.0 6.0-7.0 1.0-2.0 6
CLIP-003 2.0-3.0 2.0-3.0 2
CLIP-004 3.0-4.5 6.0-7.0 2
CLIP-005 2.5-4.0 4.5-5.5 1.0-2.0 6.0-7.0 7.0-8.0 8.5-9.5 6
CLIP-006 5.5-7.0 2.0-3.0 2
CLIP-007 7.0-8.5 7.0-8.0 2
CLIP-009 4.0-6.0 8.5-10.5 3.0-5.5 8.0-10.0 10.5-12.0 7.0-9.0 0.0-1.5 8.0-10.0 0.0-2.0 9.5-11.0 10
CLIP-010 5.5-7.0 9.5-11.0 2.0-3.5 3
CLIP-011 6.0-8.0 10.0-12.0 9.0-10.5 1.5-3.5 11.0-13.0 4.5-7.5 7 (tied 2nd)
CLIP-012 3.5-5.5 7.5-10.0 2
CLIP-013 11.0-12.0 10.5-11.5 11.5-12.5 12.0-12.5 12.0-13.0 10.5-11.5 13.0-13.5 11.0-12.0 8
CLIP-014 10.0-11.5 13.0-14.5 2
CLIP-015 0.0-1.5 0.0-1.5 2
CLIP-016 1.5-3.5 1.5-4.5 2
CLIP-017 3.5-5.0 4.5-6.0 2
CLIP-018 8.0-9.5 0.0-2.0 2
CLIP-019 2.0-4.0 1
CLIP-020 4.0-5.5 1
CLIP-021 9.5-11.0 5.5-7.5 2
CLIP-022 7.5-9.0 1
CLIP-023 0.0-1.5 1
CLIP-024 1.5-3.5 1
CLIP-025 3.5-5.0 1
CLIP-026 5.0-7.0 1
CLIP-027 5.5-8.0 1
CLIP-028 9.0-10.5 8.0-9.5 2
CLIP-029 3.0-4.5 1
CLIP-030 4.5-6.0 1
CLIP-031 7.0-8.5 1
CLIP-034 8.5-10.0 11.5-13.0 2
CLIP-035 7.0-8.5 10.0-11.5 2
CLIP-037 10.0-11.0 3.5-4.5 2

Summary Stats

Metric Value
Total unique clips 33
Clips used in 2+ videos 22 (67%)
Clips used in 1 video only 11 (33%)
Total shot placements 83
Reused placements (from multi-use clips) 72 (87%)
Total video duration 143s
Seconds from shared clips ~124s (87%)
Seconds from single-use clips ~19s (13%)
Footage reuse rate 87% (target was 70%)
Most reused clip CLIP-009 (map hero) — all 10 videos
2nd most reused CLIP-013 (save heart) — 8 videos
3rd most reused CLIP-011 (itinerary scroll) — 7 videos

Net New Clips Per Video

Video Total Clips Used Net New (single-use) % Shared
V01 8 0 100%
V02 9 0 100%
V03 9 0 100%
V04 9 0 100%
V05 8 3 (019,020,022) 63%
V06 7 4 (023,024,025,026) 43%
V07 6 1 (027) 83%
V08 9 0 100%
V09 8 0 100%
V10 10 3 (029,030,031) 70%

SECTION 4: CAPTURE DAY SHOT LIST

Record in app-flow order to minimize navigation. Grouped by screen to batch efficiently.

Group A: Home Tab (3 clips)

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
1 CLIP-001 1. Open app, ensure Home tab selected. 2. Scroll to top if needed. 3. Wait for animated background to cycle. 4. Record 4s with finger off screen. Normal 2 Don't touch screen. No notifications. Ensure hero card text fully visible.
2 CLIP-002 1. Position so hero card "Start Planning" button is centered. 2. Tap button cleanly in center. 3. Hold recording through sheet rise animation. Normal 3 Don't tap edge of button. Wait for full spring animation. Don't dismiss the sheet yet.
3 Dismiss wizard sheet (prep for next group).

Group B: Trip Wizard - Date Range Mode (5 clips)

Start fresh: Tap "Start Planning" from home, then record each step.

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
4 CLIP-003 1. Wizard open, no mode selected. 2. Tap "Date Range" radio button. 3. Hold 0.5s showing blue highlight. Normal 2 Ensure all modes deselected at start. Single clean tap.
5 CLIP-004 1. Scroll to Dates step. 2. Tap start date picker, scroll to target month, tap day. 3. Tap end date picker, scroll, tap day. 4. Dates should be 10-14 days apart. Slow 3 Smooth date picker scrolling. Don't overshoot months. Pick dates with games (e.g., late June for MLB).
6 CLIP-005 1. Scroll to Sports step. 2. Tap MLB chip (pause 0.3s). 3. Tap NBA chip (pause 0.3s). 4. Tap NHL chip. Normal 2 Even spacing between taps. Tap center of chips. All 3 should show selected state.
7 CLIP-031 1. Scroll to Regions step. 2. Tap "East" chip. 3. Tap "Central" chip. Normal 2 Clean taps. Both chips highlighted after.
8 CLIP-006 1. Scroll to Review step. 2. Verify all fields valid (no red text). 3. Tap orange "Plan Trip" button. 4. Hold through loading spinner. Normal 2 All fields must be valid. Get button press animation + spinner. Don't stop recording until spinner visible.

Group C: Trip Wizard - Game First Mode (2 clips)

Dismiss and re-open wizard for fresh state.

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
9 CLIP-029 1. Wizard open, no mode selected. 2. Tap "Game First" radio button. Normal 2 Must be different recording from CLIP-003.
10 CLIP-030 1. Game picker visible. 2. Tap search field, type "Yankees" (or similar popular team). 3. Wait for results. 4. Tap first game (checkmark appears). 5. Tap second game. Slow 3 Type slowly for readability. Pause after each selection. Get checkmark animations.

Group D: Trip Options (1 clip)

Let the planning engine complete from Group B's recording, or trigger a fresh plan.

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
11 CLIP-007 1. Planning completes. 2. Trip Options screen loads. 3. Record the staggered card entrance (3+ options). Normal 2 Ensure planning produces 3+ options (use broad date range + multiple sports). Capture entrance animation.

Group E: Trip Detail - Map & Header (5 clips)

Select a trip with 4-6 stops, multiple sports, 1000+ miles, EV charging enabled.

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
12 CLIP-009 1. Open trip detail. 2. Let map render fully (golden polylines + all markers). 3. Record 5s of settled map. Normal 3 Critical clip. Wait for ALL polylines. Let map zoom settle. No touch. Use trip with 4-6 stops for visual density.
13 CLIP-010 1. Scroll to show stats row (just below map). 2. Hold with stats centered and readable. Normal 2 All 5 stat pills visible. Numbers should be impressive (5+ cities, 8+ games).
14 CLIP-037 1. Sport badges row visible below header. 2. Hold showing colored capsules. Normal 1 Use multi-sport trip (3+ sports).
15 CLIP-014 1. Scroll to trip score card. 2. Hold showing letter grade + 4 sub-scores. Normal 2 Trip must score A or A+. All sub-scores readable.
16 CLIP-013 1. Scroll back up so heart button visible. 2. Tap heart. 3. Hold through spring animation + red fill. Normal 3 Heart must start unfilled. Clean single tap. Full spring animation (0.5s).

Group F: Trip Detail - Itinerary Scroll (5 clips)

Same trip as Group E. Record as one continuous take, then cut in post.

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
17 CLIP-011 1. Start at itinerary top. 2. Scroll slowly downward. 3. Pass Day 1 header, then 2-3 game cards with sport color bars. Slow 3 Constant scroll speed. Don't pause. Different sports for color variety. Record as part of continuous scroll.
18 CLIP-012 1. Continue scrolling from CLIP-011. 2. Travel segment appears (car icon, city>city). 3. Day 2 header + games. Slow (same take) Maintain same speed. Get travel card clearly visible.
19 CLIP-035 1. Pause scroll on a travel segment. 2. Hold with card centered: "Boston > New York, 215 mi, 3h 45m". Normal 2 Recognizable cities. Card fully readable.
20 CLIP-034 1. Find travel segment with EV chargers (collapsed). 2. Tap expand chevron. 3. Green dots + charger names + type badges appear. Normal 2 Trip must have EV enabled and segment with 2+ chargers. Get expand animation.

Group G: Trip Detail - Export (1 clip)

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
21 CLIP-027 1. Tap export button in toolbar. 2. Progress overlay appears: ring fills, step text changes ("Preparing..." > "Rendering..." > percentage). 3. Record until ~50-100% or complete. Normal 2 Must be Pro. Capture ring fill animation + changing text. Don't dismiss until good footage captured.

Group H: Schedule Tab (3 clips)

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
22 CLIP-015 1. Tap Schedule tab. 2. Sport chips load + game list populates. 3. Record initial loaded state with MLB pre-selected. Normal 2 Ensure games loaded. Get chips + first 2-3 game rows.
23 CLIP-016 1. Starting with MLB selected. 2. Tap NBA chip (pause 0.8s, list updates). 3. Tap NHL chip (pause 0.8s, list updates). 4. Tap MLS chip (pause 0.8s). Slow 3 Pause long enough for list refresh animation. Get team color dots changing. Record one continuous take.
24 CLIP-017 1. One sport selected, game list visible. 2. Scroll down through 5-6 game rows. 3. Try to have a "TODAY" badge visible. Normal 2 Reading-speed scroll. Badges, times, stadiums readable.

Group I: Progress Tab (3 clips)

Ensure 5-10 stadium visits logged beforehand.

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
25 CLIP-018 1. Tap Progress tab. 2. League selector loads with progress rings filling. 3. Record the ring fill animation. Normal 3 Must be Pro. Rings need visible fill (not empty, not 100%). Capture the animation on load.
26 CLIP-019 1. Scroll to stadium map. 2. Green dots (visited) + gray dots (unvisited) across US. 3. Hold. Normal 2 Visits in different regions. Let map settle.
27 CLIP-020 1. Scroll to visited stadiums section. 2. Horizontal scroll through chips (green checkmarks, names). Normal 2 4+ visited for visual content. Slow left scroll on chips.

Group J: Achievements (2 clips)

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
28 CLIP-021 1. Navigate to Achievements list. 2. Record grid: gold-ringed earned badges + locked badges. Normal 2 2-3 earned. Gold glow visible. Mix of earned + locked.
29 CLIP-022 1. Tap one earned achievement badge. 2. Detail sheet slides up: large badge, description, "Earned on [date]". Normal 2 Tap visually appealing badge. Capture full sheet animation.

Group K: Polls (4 clips)

Create poll with 3 trip options + 4 votes beforehand.

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
30 CLIP-023 1. Tap My Trips tab. 2. Record showing 3+ saved trip cards + "Group Polls" section. Normal 2 3+ trips visible. Poll section in frame.
31 CLIP-024 1. Tap "+" to create poll. 2. Select 2-3 trips (checkmark per selection). Normal 2 Pause between taps. Get checkmark animation.
32 CLIP-025 1. Open existing poll detail. 2. Share code card: "AB3K7X" in large orange text. Normal 1 Code clearly readable at 9:16 scale.
33 CLIP-026 1. Scroll to results section. 2. Progress bars fill, rank medals visible. Normal 2 Need 3+ votes for animated bars. Trophy/medal icons visible. Capture fill animation.

Group L: Share (1 clip)

# Clip ID Recording Steps Speed Takes Mistakes to Avoid
34 CLIP-028 1. From Progress tab, tap Share button. 2. Share preview card renders. 3. Hold showing card preview + "Share" button. Normal 2 Get a clean rendered card. Alternatively trigger from Trip Detail share.

Total recordings: 34 clips across ~12 screen groups Estimated recording time: 45-60 minutes (with setup, navigation, retakes)


SECTION 5: REMOTION HANDOFF NOTES

V01: "The Full Play"

Attribute Specification
Composition name the-full-play
Background Dark gradient base (#0D0D0D to #1A1A2E), subtle animated particles
Type style Bold sans-serif (Inter Black or SF Pro Display Heavy). Hook text: 48px, centered. Feature labels: 24px, positioned above clip.
Transitions Whip-pan (fast horizontal slide, 4-6 frame duration). Between map/itinerary: zoom-through.
Overlays Feature name labels fade in 0.2s before clip, persist during clip. Orange (#FF6B35) accent underline on each label.
Audio Upbeat electronic, 120-130 BPM. Bass drop at 4.0s (map reveal). Bell ding at 12.0s (CTA).

V02: "Zero to Trip"

Attribute Specification
Composition name zero-to-trip
Background Clean dark (#111111), minimal distractions — let app speak
Type style Monospaced step counter in top-right corner (SF Mono, 16px, white 60% opacity). "Step 1", "Step 2" etc. Hook: casual handwritten feel (36px).
Transitions Direction-matched swipes: each clip enters from the direction of wizard flow (bottom-up for sheet, left-right for steps). 6-8 frame duration.
Overlays Step counter persistent. "3 routes found!" text pops in with scale animation at 7.0s.
Audio Building momentum track. Each step gets a click. Swell builds through steps. Pop SFX at 7.0s. Bass at 8.5s.

V03: "Route Revealed"

Attribute Specification
Composition name route-revealed
Background Deep navy (#0A1628) to suggest nighttime/maps aesthetic
Type style Elegant serif (Playfair Display or NYT Cheltenham). Hook: 40px, centered, letter-spaced +2px. Feature labels: 20px italic.
Transitions Slow dissolves (12-15 frame crossfade). Map reveal: slow iris-open or expanding circle.
Overlays "Optimizing..." text with pulsing opacity during CLIP-006. Minimal text — let visuals breathe. Gold route line motif in lower third.
Audio Cinematic ambient, slow build. Soft piano or strings. Bass swell at 3.0s (map). No hard beats until score reveal.

V04: "Every Game"

Attribute Specification
Composition name every-game
Background Dark with sports broadcast aesthetic — subtle grid lines, ticker feel
Type style Condensed sports font (Oswald Bold or ESPN-style). Hook: 52px, caps. "Browse 1000+ games": scrolling ticker at bottom.
Transitions Horizontal swipes matching sport filter direction. Quick cuts (3-4 frames) between schedule and planning.
Overlays Sport color bar at top edge that changes color with each sport filter tap (MLB red > NBA orange > NHL blue). "1000+" counter animates up.
Audio Sports broadcast energy, stadium crowd ambience layer. Whoosh per sport switch. Scoreboard-style ticking for game scroll.

V05: "Stadium Quest"

Attribute Specification
Composition name stadium-quest
Background Dark with gold particle effects (#FFD700 particles floating)
Type style Achievement-unlock style: bold rounded (Nunito Black). Hook: 44px. Badge labels: pop-in scale animation. Gold color for earned text.
Transitions Pop/bounce (spring curve, overshoot 1.2x then settle). Scale-in for each new section.
Overlays Gold ring motif around clip borders when showing achievements. Sparkle particles on earned badges. Progress bar graphic overlaid at bottom during map shot.
Audio Gamification music — playful, achievement-y (think mobile game victory). Ring fill SFX (ascending tone). Unlock jingle at 7.5s.

V06: "Squad Goals"

Attribute Specification
Composition name squad-goals
Background Dark with gradient purple-to-blue social vibe (#2D1B69 to #1B3A69)
Type style Rounded friendly (Poppins SemiBold). Hook: 44px. Labels in chat-bubble containers (rounded rect, white bg, dark text).
Transitions Slide-in from alternating sides (left, right, left) like a conversation. Share code: pop-in with bounce.
Overlays Chat-bubble-style containers for text labels. Share code gets highlighted glow. Vote bars use gradient fills (gold for winner). Confetti particle burst on "Winning trip".
Audio Upbeat social/fun track. Message "sent" SFX at 3.5s. Drum roll building at 5.0s. Celebration SFX at 7.0s.

V07: "Your Playbook"

Attribute Specification
Composition name your-playbook
Background Warm dark cream/paper tone (#1C1A17), suggests printed document
Type style Serif editorial (Georgia or Lora). Hook: 38px, centered, elegant. "Export as PDF" in small caps.
Transitions Page-turn effect (3D perspective rotation) between itinerary clips. Slide-reveal for export overlay.
Overlays Subtle paper texture overlay at 5% opacity. Magazine crop-mark motif in corners. PDF icon graphic animates in during export clip.
Audio Premium/sophisticated — soft jazz or lo-fi. Paper turn SFX. Completion chime at export finish.

V08: "All Sports"

Attribute Specification
Composition name all-sports
Background Dark base, full-screen color-wipe transitions using sport brand colors
Type style Bold condensed (Bebas Neue or Impact). Hook: 56px, caps, white on sport-color bg. Sport names: 36px in sport's color.
Transitions Color-wipe: each sport transition wipes screen in that sport's brand color (MLB red wipe > NBA orange wipe > NHL blue wipe). Fast, 4-5 frames.
Overlays Sport color bar across full top during each sport section. Sport icon (SF Symbol) animates in corner during filter taps. "One trip. Every sport." fades in over badges.
Audio High-energy, fast tempo (140+ BPM). Stadium horn hit per sport switch. Bass drop at map reveal.
Sport brand colors MLB: #E31937, NBA: #F58426, NHL: #0038A8, NFL: #013369, MLS: #80B214, WNBA: #BF2F38, NWSL: #0D5C63

V09: "Day by Day"

Attribute Specification
Composition name day-by-day
Background Clean dark (#111827), calendar/planner aesthetic
Type style Clean sans-serif (Inter Regular). Hook: 36px serif for contrast. "Day 1" / "Day 2" labels: 20px, monospaced, left-aligned with calendar icon.
Transitions Continuous vertical scroll simulation — each clip enters from bottom, exits top. No hard cuts in itinerary section. Slow dissolves for non-itinerary clips.
Overlays Day number labels appear pinned to left edge as itinerary scrolls. Subtle dotted timeline line along left side connecting days. Green accent dot on EV section.
Audio Calm, organized — ambient electronic or lo-fi beat. Soft "day change" chime at 7.5s. Green ding at 11.5s (EV).

V10: "Your Rules"

Attribute Specification
Composition name your-rules
Background Dark with split-screen capability (#0F0F0F), morph-ready
Type style Variable weight (Inter Thin to Inter Black). Hook: 42px, weights animate thin>bold. "Pick dates?" / "Pick games?": toggle-switch style labels that flip.
Transitions Morph/crossfade: each planning mode morphs into the next (shared elements stay, different elements cross-dissolve). 8-10 frame duration. Mode switch uses flip animation.
Overlays Toggle-switch graphic that flips between mode names. Region selection gets a mini-map outline overlay. "Built your way" text morphs letter-by-letter.
Audio Empowering/confident track. Toggle "click" SFX at each mode switch. Build through options. Bass drop at map (9.5s).

Global Remotion Notes

Shared across all compositions:

  • All clips are <OffthreadVideo> components with startFrom and endAt for trimming
  • CTA end card is a shared <CTAEndCard> component accepting headlineText and ctaStyle props
  • Text overlays use <spring> for entrance animations (config: damping 12, mass 0.5)
  • All text should have slight text-shadow for readability over app footage (0 2px 8px rgba(0,0,0,0.8))
  • Background audio per video: separate audio file, normalized to -14 LUFS
  • SFX layer: separate track, timed to frame
  • Export at 30fps, 1080x1920, H.264 for social, ProRes for archival
  • Each composition accepts clipDirectory prop pointing to recorded footage folder

Composition ID naming: All IDs use lowercase + hyphens only (Remotion constraint). No underscores.

Suggested project structure:

src/
  compositions/
    TheFullPlay.tsx
    ZeroToTrip.tsx
    RouteRevealed.tsx
    EveryGame.tsx
    StadiumQuest.tsx
    SquadGoals.tsx
    YourPlaybook.tsx
    AllSports.tsx
    DayByDay.tsx
    YourRules.tsx
  components/
    shared/
      CTAEndCard.tsx
      TextOverlay.tsx
      ClipPlayer.tsx
      SportColorWipe.tsx
    transitions/
      WhipPan.tsx
      ColorWipe.tsx
      PageTurn.tsx
      MorphFade.tsx
  clips/          <- recorded footage
  audio/
    music/        <- per-video background tracks
    sfx/          <- shared SFX library