// scenes-1-2.jsx — Intro + Step 1 (Photograph) + Step 2 (ChatGPT) // ─────────────────────────────────────────────────────────── // INTRO (0–2.2s) // Bold title reveal. Four colored cards pop in sequence behind it. // ─────────────────────────────────────────────────────────── function SceneIntro() { const { progress, localTime } = useSprite(); // Four step badges fly up from bottom, staggered const badges = [ { tool: 'camera', color: TOKENS.blue, delay: 0.15 }, { tool: 'chatgpt', color: TOKENS.tan, delay: 0.30 }, { tool: 'banana', color: TOKENS.coral, delay: 0.45 }, { tool: 'kling', color: TOKENS.lavender, delay: 0.60 }, ]; return (
{/* Background grid dots for texture */} {/* Title */}
Process  ·  4 Steps
AI Hairstyle
Morph Videos
How I made them — my workflow
{/* Badge row fly-in */}
{badges.map((b, i) => { const t = clamp((localTime - b.delay) / 0.4, 0, 1); const eased = Easing.easeOutBack(t); return (
); })}
); } // ─────────────────────────────────────────────────────────── // STEP 1 — Photograph subject (2.2–6s, duration 3.8s) // A "camera viewfinder" zeros in on a silhouette, flash, label "BEFORE". // ─────────────────────────────────────────────────────────── function SceneStep1() { const { localTime, duration } = useSprite(); // Timing (relative to this scene) const T = { cardIn: 0.0, // step card + title slide in viewfinderIn: 0.4, shutter: 1.6, // flash happens here polaroidOut: 2.0,// photo pops out and rotates beforeLabel: 2.6, }; // Flash flash const flashT = clamp((localTime - T.shutter) / 0.4, 0, 1); const flashOpacity = flashT < 0.15 ? flashT / 0.15 : 1 - (flashT - 0.15) / 0.85; // Camera zoom/closing-in const vfProgress = clamp((localTime - T.viewfinderIn) / 0.9, 0, 1); const vfEased = Easing.easeOutCubic(vfProgress); // Polaroid pop const polT = clamp((localTime - T.polaroidOut) / 0.7, 0, 1); const polEased = Easing.easeOutBack(polT); return (
{/* Step header top-left */} {/* Main stage — viewfinder closing in on silhouette */}
{/* Silhouette (grows/settles) */}
{/* Viewfinder corners closing in */} {vfProgress > 0 && polT < 0.2 && ( )}
{/* Polaroid photo flying out */} {polT > 0 && (
)}
{/* Camera flash overlay */} {flashT > 0 && flashT < 1 && (
)}
); } function ViewfinderBrackets({ progress, color }) { // Corner brackets that close in from the corners const offset = (1 - progress) * 80; // starts far out, closes to 0 const opacity = progress; const bracketStyle = { position: 'absolute', width: 60, height: 60, borderColor: color, borderStyle: 'solid', opacity, }; return ( <>
); } function Polaroid({ children, label, accent }) { return (
{children}
{label}
); } // ─────────────────────────────────────────────────────────── // STEP 2 — ChatGPT writes hairstyle prompt (6–10s, duration 4s) // A chat window. User question typed on right; AI response types on left. // ─────────────────────────────────────────────────────────── function SceneStep2() { const { localTime } = useSprite(); const T = { cardIn: 0.0, userBubble: 0.3, aiBubble: 1.3, caretEnd: 3.6, }; const userMsg = "A new hairstyle for this subject — describe it for an image generator."; const aiMsg = "Sleek platinum bob, chin-length, center part, glossy finish, soft studio lighting, photoreal."; // Reveal user message word-by-word const userWords = userMsg.split(' '); const userProg = clamp((localTime - T.userBubble) / 0.9, 0, 1); const userShown = Math.floor(userProg * userWords.length); // AI typing — chars const aiProg = clamp((localTime - T.aiBubble) / 1.8, 0, 1); const aiShown = Math.floor(aiProg * aiMsg.length); return (
{/* Chat window */}
{/* Window chrome */}
ChatGPT — hairstyle prompt
{/* Messages */}
{/* User bubble (right) */} {userProg > 0 && (
{userWords.slice(0, userShown).join(' ')} {userShown < userWords.length && }
)} {/* AI bubble (left) */} {aiProg > 0 && (
Prompt suggestion "{aiMsg.slice(0, aiShown)} {aiShown < aiMsg.length && } {aiShown >= aiMsg.length && '"'}
)} {/* Copy button appears when done */} {aiShown >= aiMsg.length && localTime > T.aiBubble + 1.9 && (
COPIED
)}
); } function Dot({ color }) { return
; } function Caret() { const time = useTime(); const on = Math.floor(time * 2.5) % 2 === 0; return ; } // Step header (top-left): Step N · Title · tool chip function StepHeader({ n, title, tool, color, startLocal = 0 }) { const { localTime } = useSprite(); const t = clamp((localTime - startLocal) / 0.5, 0, 1); const eased = Easing.easeOutBack(t); return (
{/* Step number chip */}
{n}
Step {n} · {tool}
{title}
); } function BgDots({ opacity = 0.4 }) { return (
); } Object.assign(window, { SceneIntro, SceneStep1, SceneStep2, Polaroid, ViewfinderBrackets, StepHeader, BgDots, Caret, Dot, });