// scenes-intro.jsx — Scene 1 (intro) and Scene 2 (walker)
// ─────────────────────────────────────────────────────────────────────────────
// Shared palette (declared once, used everywhere)
// ─────────────────────────────────────────────────────────────────────────────
const PAL = {
paper: '#f3ede0', // warm cream
paperDeep: '#e8e0cf',
ink: '#1a1814', // warm black
inkSoft: '#5a544a',
pop: 'oklch(64% 0.16 38)', // terracotta
popSoft: 'oklch(82% 0.07 38)',
leaf: 'oklch(58% 0.09 145)', // muted green
sky: 'oklch(82% 0.04 230)', // pale blue
};
const FONT_DISPLAY = '"Newsreader", "Times New Roman", serif';
const FONT_MONO = '"JetBrains Mono", ui-monospace, monospace';
const FONT_SANS = '"Inter", system-ui, sans-serif';
// ─────────────────────────────────────────────────────────────────────────────
// SCENE 1 — Intro title card (0 → 3s)
// ─────────────────────────────────────────────────────────────────────────────
function SceneIntro() {
const { localTime, progress } = useSprite();
const L = useLang();
// Wordmark drops in
const titleY = animate({ from: -40, to: 0, start: 0, end: 0.6, ease: Easing.easeOutBack })(localTime);
const titleOpacity = animate({ from: 0, to: 1, start: 0, end: 0.5 })(localTime);
// Underline draws
const lineWidth = animate({ from: 0, to: 360, start: 0.5, end: 1.1, ease: Easing.easeOutCubic })(localTime);
// Subtitle reveals
const subY = animate({ from: 12, to: 0, start: 0.7, end: 1.2, ease: Easing.easeOutCubic })(localTime);
const subOp = animate({ from: 0, to: 1, start: 0.7, end: 1.2 })(localTime);
// Tag pills
const pill1 = animate({ from: 0, to: 1, start: 1.1, end: 1.5 })(localTime);
const pill2 = animate({ from: 0, to: 1, start: 1.3, end: 1.7 })(localTime);
const pill3 = animate({ from: 0, to: 1, start: 1.5, end: 1.9 })(localTime);
// Floating word ornaments
const wordsT = localTime;
// Exit
const exitT = animate({ from: 0, to: 1, start: 2.6, end: 3.0, ease: Easing.easeInCubic })(localTime);
const exitY = -exitT * 30;
const exitOp = 1 - exitT;
return (
{/* Paper grain dots */}
{/* Floating German words in background */}
{/* Center stack */}
{/* Vokki logo (real icon) above wordmark */}
{/* Wordmark */}
{L.intro_title}
{/* Underline */}
{/* Subtitle */}
{L.intro_sub}
{/* Pills */}
{text}
);
}
function FloatingWord({ text, x, y, delay, t, color, size = 48, rot = 0 }) {
const op = animate({ from: 0, to: 1, start: delay, end: delay + 0.4 })(t);
const drift = Math.sin((t - delay) * 1.5) * 6;
return (
{text}
);
}
function Grain() {
// CSS-only paper texture — repeating tiny dots
return (
);
}
function FoxMascot({ t = 0, dark = false }) {
// Real Vokki — orange head, dark inner ears, V-tuft, big sparkle eyes,
// white snout/cheeks, tiny smile with fang outline.
const wag = Math.sin(t * 4) * 3;
const blinkPhase = (t * 0.7) % 4;
const blink = blinkPhase > 3.85;
return ;
}
function VokkiFace({ t = 0, wag = 0, blink = false }) {
const FOX = '#ee6a2c'; // bright orange (matches icon)
const FOX_DEEP = '#3d2a5c'; // deep purple-navy inner ear
const WHITE = '#fdfaf2';
const INK = '#1f1736';
const CHEEK = '#f6c280'; // warm tan
const BROW = '#c84d18';
const V_BLUE = '#4258bd';
const eyeY = blink ? 0 : 1;
const eyeH = blink ? 1 : 7;
const eyeRY = blink ? 0.5 : 9;
const eyeOff = blink ? 0 : 0;
return (
);
}
// ─────────────────────────────────────────────────────────────────────────────
// SCENE 2 — Walker in the park (3 → 7s) [localTime 0..4]
// ─────────────────────────────────────────────────────────────────────────────
function SceneWalker() {
const { localTime } = useSprite();
const L = useLang();
const t = localTime;
// Walker walks left → middle, holds, walks off right
const walkerX = interpolate(
[0, 0.6, 3.4, 4.0],
[-200, 760, 760, 2000],
Easing.easeInOutCubic
)(t);
// Bounce while walking
const bouncing = (t < 0.6 || t > 3.4);
const bounce = bouncing ? Math.abs(Math.sin(t * 12)) * 8 : Math.abs(Math.sin(t * 4)) * 2;
// Speech bubble pair appears after walker arrives
const bubble1Op = animate({ from: 0, to: 1, start: 0.9, end: 1.3, ease: Easing.easeOutBack })(t);
const bubble2Op = animate({ from: 0, to: 1, start: 1.5, end: 1.9, ease: Easing.easeOutBack })(t);
const bubble3Op = animate({ from: 0, to: 1, start: 2.1, end: 2.5, ease: Easing.easeOutBack })(t);
const bubble4Op = animate({ from: 0, to: 1, start: 2.7, end: 3.1, ease: Easing.easeOutBack })(t);
// Bubbles fade as walker leaves
const bubblesFade = animate({ from: 1, to: 0, start: 3.3, end: 3.7 })(t);
// Sun rises slightly
const sunY = animate({ from: 220, to: 200, start: 0, end: 4, ease: Easing.linear })(t);
// Caption
const capOp = animate({ from: 0, to: 1, start: 0.4, end: 0.9 })(t) * animate({ from: 1, to: 0, start: 3.2, end: 3.7 })(t);
return (
{/* Sun */}
{/* Distant hills */}
{/* River — winding through middle */}
{/* Trees row — back (more) */}
{/* Ground */}
{/* Trees row — front (more) */}
{/* Walker */}
{/* Speech bubbles */}
{/* Caption */}
{L.walker_caption_l1}
{L.walker_caption_l2}
);
}
function Tree({ x, y, h, color, dim = 1 }) {
return (
{/* trunk */}
{/* foliage = stacked circles */}
);
}
function Bubble({ x, y, text, lang, op, pop = false }) {
return (
);
}
Object.assign(window, { SceneIntro, SceneWalker, PAL, FONT_DISPLAY, FONT_MONO, FONT_SANS, Grain });
{/* Wordmark */}