// Scenes 1-3: Problem, Intro, Magic
// ─────────────────────────────────────────────────────────────
// SCENE 1 — The Problem (0-5s)
// Awkward laptop translator scene
// ─────────────────────────────────────────────────────────────
function Scene1Problem() {
const { localTime, duration, progress } = useSprite();
const t = localTime;
// typed text reveals char by char (0 → ~1.2s)
const typed = "how do i flirt in japanese";
const typeP = clamp((t - 0.25) / 1.0, 0, 1);
const typedShown = typed.slice(0, Math.floor(typed.length * typeP));
// translator output appears at 1.6s
const outputT = clamp((t - 1.6) / 0.6, 0, 1);
// girl's reaction — long silent stare, then close laptop
const reactionT = clamp((t - 2.6) / 0.5, 0, 1);
const closeT = clamp((t - 3.6) / 0.9, 0, 1);
// tagline pops in last
const tagT = clamp((t - 4.0) / 0.5, 0, 1);
// overall camera: slow zoom-in
const camScale = 1 + 0.04 * Easing.easeOutQuad(progress);
return (
{/* Chapter chip — small pill, top-center.
Replaces the earlier heavy double-bordered stamp which
(a) competed with the central translator UI for attention
and (b) duplicated the SceneMarker at bottom-left. */}
BEFORE
THE OLD WAY
{/* SPLIT — guy laptop left, girl laptop right */}
{/* LEFT — guy's translator */}
translate.totally-not-google.com
ENGLISH
{typedShown}
{typeP < 1 && |}
↓
JAPANESE (ROMAJI)
"honorable potato, your eyes resemble moonlight"
↳ confidence: 12% · tone: alarming
{/* RIGHT — girl receiving, slowly closing */}
{/* "laptop" — collapses on close */}
Yuki
online · Tokyo
3:42 AM
{/* incoming message */}
敬愛するじゃがいも、君の瞳は月光のよう
↳ translated from english · ??? confidence
{/* her reaction sticker */}
……えっ？
"…huh?"
{/* Punchline tagline */}
talking across languages
{' is hard.'}
);
}
// ─────────────────────────────────────────────────────────────
// SCENE 2 — Phone lights up: Huggie incoming (5-10s)
// ─────────────────────────────────────────────────────────────
function Scene2Intro() {
const { localTime, progress } = useSprite();
const t = localTime;
// 0.0-0.4 black hold
// 0.4-1.4 huggie wordmark BIG, fades in centered
// 1.4-2.0 logo shrinks + moves up; phone slides in from bottom
// 2.0-3.4 phone holds with ringing animation
// 3.4-5.0 "or... just talk." callout, then bleed
const logoBigT = clamp((t - 0.3) / 0.7, 0, 1);
// logo transitions to small/top between 1.4 and 2.0
const logoMoveT = clamp((t - 1.3) / 0.7, 0, 1);
// phone enters with logo move
const phoneIn = clamp((t - 1.5) / 0.7, 0, 1);
const phoneScale = 0.85 + 0.15 * Easing.easeOutBack(phoneIn);
const phoneY = (1 - phoneIn) * 240;
// logo position blend: centered/large → top/small
const logoScale = 1.0 - 0.78 * Easing.easeInOutCubic(logoMoveT);
const logoTop = 480 - 410 * Easing.easeInOutCubic(logoMoveT); // px from center area to near-top
const ringStartT = 1.8;
// tagline beat
const tagT = clamp((t - 3.2) / 0.5, 0, 1);
return (
{/* warm gradient glow */}
{/* HUGGIE LOGO — starts huge centered, shrinks + parks at top */}
{/* tagline below, fades out as it shrinks */}
every call, in the language of your heart.
{/* PHONE — slides up + scales in once logo parks */}
{/* Left-side problem statement — balances the right callout
so the canvas reads edge-to-edge instead of pooling all
composition into the centre + right. The two pieces of text
plus the phone together tell the full Scene 2 micro-story:
problem (left) → trigger (phone) → resolution (right) */}
3:42 AM
she calls. you don't speak japanese.
{/* "Or… just talk." callout — only appears once phone is in */}
{/* Chapter chip — mirrors the BEFORE chip in Scene 1.
Top-center placement keeps it clear of the phone-side
"on the guy's phone" / "on yuki's phone" annotations. */}
WITH
A REAL CONVERSATION
{/* Connecting "thread" between phones — lowered so it sits
BELOW the caption stack (which occupies roughly y=200–680)
and forms a calm lens near the phone bottoms instead of
slicing through the middle of the conversation. */}
{/* LEFT PHONE — Yuki (the one being shown to "us", the guy) */}
↓ on the guy's phone
{/* RIGHT PHONE — Guy's voice, Yuki's view */}
on yuki's phone ↓
{/* CENTER stack — captions, latency, headlines */}
{/* Latency */}
{/* Yuki caption (JP → EN) */}
{yukiCapAlive && (
{"\"hey… your voice is really gentle.\""}
)}
{/* Guy caption (EN → JP) */}
{guyCapAlive && (
);
}
// ── Single phone call screen used inside Scene 3 ─────────────────────────────
function CallScreen({ name, lang, langName, avatarLabel, time, speaking, dark }) {
return (