// MontageHero — plays a sequence of short clips with captions tied to each. // Problem → recognition → calm. Loops once, holds on final frame. // // Clips live in `videos/` and are referenced by filename. The user will drop // 30 .mp4 files into that folder. Until they do, we render a placeholder // "scene" per beat (animated SVG) so the layout and pacing are real. const { useState, useEffect, useRef, useMemo } = React; // --------------------------------------------------------------------------- // SCRIPTS — each is a sequence of beats. A beat = one clip + one caption. // duration is in seconds. `src` points to a file in videos/. If the file is // missing, we fall back to a SVG placeholder of the same `placeholder` kind. // --------------------------------------------------------------------------- // Real footage. Filenames describe the clip — captions are written to fit. const SCRIPTS = { // Frustration → recognition → calm problem_relief: { label: "Problem → relief", beats: [ { src: "videos/01-frustrated-man-sofa.mp4", placeholder: "squint", caption: "You wanted to take a photo.", dur: 2.6, anchor: "tl" }, { src: "videos/02-frustrated-young-man.mp4", placeholder: "fullmsg", caption: "Storage full.", dur: 2.4, anchor: "tl" }, { src: "videos/03-woman-shocked-laptop.mp4", placeholder: "scroll", caption: "You've seen this before.", dur: 2.6, anchor: "tr" }, { src: "videos/07-senior-man-phone.mp4", placeholder: "settings", caption: "It's not the phone.", dur: 2.6, anchor: "tl" }, { src: "videos/06-senior-woman-laptop.mp4", placeholder: "kitchen", caption: "It's that no one showed you.", dur: 3.0, anchor: "tl" }, { src: "videos/10-granddaughter-grandmother.mp4", placeholder: "class", caption: "So we'll show you.", dur: 2.8, anchor: "tr" }, { src: "videos/16-man-child-phone.mp4", placeholder: "hands", caption: "On the device you actually use.", dur: 2.8, anchor: "tl" }, { src: "videos/13-grandparents-laughing.mp4", placeholder: "smile", caption: "Patiently. In person.", dur: 2.8, anchor: "bl" }, { src: "videos/22-senior-woman-phone.mp4", placeholder: "library", caption: "At a library down the street.", dur: 3.0, anchor: "tr" }, { src: "videos/19-gray-hair-bench.mp4", placeholder: "hold", caption: "You are not behind.", dur: 3.0, anchor: "tl" }, ], }, community: { label: "Community", beats: [ { src: "videos/11-grandfather-grandson-laughing.mp4", placeholder: "library", caption: "Saturday morning.", dur: 2.6, anchor: "tl" }, { src: "videos/12-grandmother-child-couch.mp4", placeholder: "kitchen", caption: "Someone you trust nearby.", dur: 2.8, anchor: "br" }, { src: "videos/17-man-laughing-kitchen.mp4", placeholder: "class", caption: "A question, asked out loud.", dur: 2.8, anchor: "tr" }, { src: "videos/23-two-women-phone.mp4", placeholder: "hands", caption: "Someone leaning in to help.", dur: 3.0, anchor: "bl" }, { src: "videos/14-happy-family-selfie.mp4", placeholder: "smile", caption: "It clicks.", dur: 2.6, anchor: "tl" }, { src: "videos/15-three-gen-laughing.mp4", placeholder: "scroll", caption: "You laugh at how simple it was.", dur: 2.8, anchor: "br" }, { src: "videos/24-three-gen-selfie.mp4", placeholder: "settings", caption: "Three generations, one phone.", dur: 2.8, anchor: "tr" }, { src: "videos/21-senior-young-sofa.mp4", placeholder: "fullmsg", caption: "No product pitches.", dur: 2.6, anchor: "bl" }, { src: "videos/25-woman-tablet-home.mp4", placeholder: "squint", caption: "Just the things you wanted to ask.", dur: 3.0, anchor: "tl" }, { src: "videos/20-senior-man-relaxing.mp4", placeholder: "hold", caption: "Cherokee County.", dur: 2.6, anchor: "mr" }, ], }, confidence: { label: "Confidence", beats: [ { src: "videos/08-woman-photographs.mp4", placeholder: "hands", caption: "You already know more than you think.", dur: 3.0, anchor: "tl" }, { src: "videos/04-man-speaking-phone.mp4", placeholder: "settings", caption: "Settings is just a list.", dur: 2.6, anchor: "br" }, { src: "videos/05-woman-laptop-phone.mp4", placeholder: "scroll", caption: "Storage is just a drawer.", dur: 2.8, anchor: "tr" }, { src: "videos/09-adult-tablet-desk.mp4", placeholder: "fullmsg", caption: "Wi-Fi is just a signal in the air.", dur: 3.0, anchor: "bl" }, { src: "videos/26-woman-couch-phone.mp4", placeholder: "kitchen", caption: "None of this is a mystery.", dur: 2.8, anchor: "tl" }, { src: "videos/27-woman-couch-tablet.mp4", placeholder: "library", caption: "It was just never explained.", dur: 2.8, anchor: "br" }, { src: "videos/28-woman-phone-couch.mp4", placeholder: "class", caption: "We'll explain it.", dur: 2.4, anchor: "tr" }, { src: "videos/29-woman-tablet-park.mp4", placeholder: "smile", caption: "Plainly. Without rushing.", dur: 2.8, anchor: "bl" }, { src: "videos/30-woman-laptop-office.mp4", placeholder: "squint", caption: "Until it makes sense.", dur: 2.6, anchor: "tl" }, { src: "videos/18-man-relaxes-sofa.mp4", placeholder: "hold", caption: "You've got this.", dur: 3.0, anchor: "mr" }, ], }, }; // --------------------------------------------------------------------------- // PLACEHOLDER SCENES — animated SVGs that stand in for missing video files. // Each represents an actual beat from the brief (squinting at a notification, // kitchen-table laptop, etc.). They are intentionally illustrative, not // realistic, so they read as placeholders. // --------------------------------------------------------------------------- const PlaceholderScene = ({ kind, treatment, t }) => { // t is 0..1 within the beat — drives subtle motion so the placeholder // doesn't look frozen. const tones = treatmentTones(treatment); const common = { width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid slice', viewBox: '0 0 800 600' }; // Subtle ken-burns drift on every scene const drift = `translate(${(t - 0.5) * 12}px, ${(t - 0.5) * -6}px) scale(${1.04 + t * 0.02})`; const scenes = { squint: () => ( {/* hand holding a phone, glow on screen */} {/* fingertip */} ), fullmsg: () => ( ), scroll: () => ( {[0,1,2,3,4,5,6,7].map(i => ( ))} ), settings: () => ( {[0,1,2,3,4,5].map(i => ( ))} ), kitchen: () => ( {/* table */} {/* laptop */} {/* coffee */} {/* steam */} ), class: () => ( {/* heads in a room */} {[[140,420],[260,440],[400,420],[540,440],[660,420],[200,360],[340,370],[480,360],[620,370]].map(([x,y], i) => ( ))} {/* instructor area */} ), hands: () => ( {/* two hands meeting on a tablet */} ), smile: () => ( {/* head */} {/* eyes */} {/* mouth — slight smile */} {/* shoulders */} ), library: () => ( {/* shelves */} {[0,1,2].map(row => ( {Array.from({length: 14}).map((_, i) => ( ))} ))} ), hold: () => ( {/* a quiet final frame: phone face down on a notebook on a table */} ), }; return ( {scenes[kind] ? scenes[kind]() : } ); }; function treatmentTones(treatment) { // Returns a palette appropriate to the chosen color treatment. const natural = { bg: '#F4B58E', // sandy apricot surface: '#FFFDF5', surfaceDeep: '#A0452D', accent: '#A0452D', fg: '#333333', skin: '#E8B594', }; const clayDuotone = { bg: '#A0452D', surface: '#F4B58E', surfaceDeep: '#762F1D', accent: '#FFFDF5', fg: '#FFFDF5', skin: '#F4B58E', }; const desaturated = { bg: '#E8E2D4', surface: '#FFFDF5', surfaceDeep: '#8A8A8A', accent: '#5C5C5C', fg: '#333333', skin: '#C8B8A8', }; return { natural, clay: clayDuotone, desaturated }[treatment] || natural; } // --------------------------------------------------------------------------- // MontageHero — orchestrates the timeline. // --------------------------------------------------------------------------- const MontageHero = ({ tweaks }) => { const { script, treatment, speed, captionsOn, layout } = tweaks; const beats = SCRIPTS[script].beats; // We scale every beat duration by `speed`. Total runtime is dur * speed. const scaledBeats = useMemo( () => beats.map(b => ({ ...b, dur: b.dur * speed })), [beats, speed] ); const totalDur = scaledBeats.reduce((s, b) => s + b.dur, 0); const [elapsed, setElapsed] = useState(0); // seconds since start const [playing, setPlaying] = useState(true); const [muted, setMuted] = useState(true); const [done, setDone] = useState(false); const startRef = useRef(performance.now()); const rafRef = useRef(null); // Reset clock when script or speed changes useEffect(() => { startRef.current = performance.now(); setElapsed(0); setDone(false); setPlaying(true); }, [script, speed]); useEffect(() => { if (!playing || done) return; const tick = (now) => { const e = (now - startRef.current) / 1000; if (e >= totalDur) { setElapsed(totalDur); setDone(true); return; } setElapsed(e); rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [playing, done, totalDur]); // Find current beat index + local progress 0..1 const { beatIdx, localT } = useMemo(() => { let acc = 0; for (let i = 0; i < scaledBeats.length; i++) { const next = acc + scaledBeats[i].dur; if (elapsed < next || i === scaledBeats.length - 1) { return { beatIdx: i, localT: Math.min(1, (elapsed - acc) / scaledBeats[i].dur) }; } acc = next; } return { beatIdx: scaledBeats.length - 1, localT: 1 }; }, [elapsed, scaledBeats]); const beat = scaledBeats[beatIdx]; // Restart handler const restart = () => { startRef.current = performance.now(); setElapsed(0); setDone(false); setPlaying(true); }; // Caption fade — in for first 200ms of beat, out for last 300ms const captionOpacity = (() => { const fadeIn = Math.min(1, localT / 0.08); const fadeOut = Math.min(1, (1 - localT) / 0.12); return Math.min(fadeIn, fadeOut); })(); // Color treatment applied to actual