// scenes_b.jsx — Scene 3 (The 5 S) + Scene 4 (Decisions fact)
// ─── Scene 3 ───────────────────────────────────────────────────────────────
// Five phases revealed in sequence. Each phase is one big circle on left with
// kanji inside, with English name + meaning typeset beside it. The previous
// phase shrinks into a small dot that joins a growing row of 5 at the bottom.
const PHASES = [
{ kanji: '整理', name: 'Sort', meaning: 'keep what matters. let the rest go.', verb: 'seiri' },
{ kanji: '整頓', name: 'Set in order', meaning: 'a place for everything, and everything near hand.', verb: 'seiton' },
{ kanji: '清掃', name: 'Shine', meaning: 'clean, so you can see what is actually there.', verb: 'seisou' },
{ kanji: '清潔', name: 'Standardize', meaning: 'the same small thing, at the same small time.', verb: 'seiketsu' },
{ kanji: '躾', name: 'Sustain', meaning: 'rhythm, not rules. come back when you can.', verb: 'shitsuke' },
];
function SceneFiveS({ start, end }) {
return (
);
}
function FiveSInner() {
const { localTime, duration } = useSprite();
const fade = useSpriteFade({ inDur: 0.5, outDur: 0.5 });
const perPhase = 1.8; // seconds per phase card shown
const introDur = 0.6;
const outroStart = duration - 0.5;
// Which phase is active right now?
const phaseIdx = Math.min(PHASES.length - 1, Math.floor((localTime - introDur) / perPhase));
const phaseClamped = Math.max(0, phaseIdx);
const phaseLocal = (localTime - introDur) - phaseClamped * perPhase; // seconds in current phase
const phaseT = clamp(phaseLocal / perPhase, 0, 1);
// Big circle position (left)
const bigCX = 640;
const bigCY = CY - 20;
const bigR = 300;
// Row of 5 small dots at bottom-right
const rowY = 920;
const rowX0 = 1150;
const rowGap = 120;
return (
{/* scene-wide ledger line at top and bottom */}
{/* Kanji inside the big circle */}
{PHASES.map((p, i) => {
if (i !== phaseClamped) return null;
const inT = Easing.easeOutCubic(clamp(phaseLocal / 0.55, 0, 1));
const outT = phaseLocal > perPhase - 0.3
? Easing.easeInCubic(clamp((phaseLocal - (perPhase - 0.3)) / 0.3, 0, 1))
: 0;
const op = inT * (1 - outT);
return (
{p.kanji}
);
})}
{/* Right-side text */}
{PHASES.map((p, i) => {
if (i !== phaseClamped) return null;
const inT = Easing.easeOutCubic(clamp((phaseLocal - 0.15) / 0.5, 0, 1));
const outT = phaseLocal > perPhase - 0.3
? Easing.easeInCubic(clamp((phaseLocal - (perPhase - 0.3)) / 0.3, 0, 1))
: 0;
const op = inT * (1 - outT);
const ty = (1 - inT) * 28;
return (
phase {String(i + 1).padStart(2, '0')} · {p.verb}
{p.name}.
{p.meaning}
);
})}
);
}
// ─── Scene 4 ───────────────────────────────────────────────────────────────
// "The average adult makes 35,000 decisions a day." Huge mono number that
// counts up, with dots swarming in chaos then resolving into one calm circle:
// "let the rhythm decide."
function SceneDecisions({ start, end }) {
return (
);
}
function DecisionsInner() {
const { localTime, duration } = useSprite();
const fade = useSpriteFade({ inDur: 0.5, outDur: 0.6 });
// Chaos dots — ~120 tiny circles that swarm then settle.
const N = 140;
const dots = React.useMemo(() => {
const out = [];
for (let i = 0; i < N; i++) {
// Random start position, random phase
const a0 = (i * 2.3994) % (Math.PI * 2); // golden angle
const r0 = 60 + (i * 17) % 400;
out.push({
ax: CX + Math.cos(a0) * r0,
ay: CY + Math.sin(a0) * r0 * 0.7,
phase: (i * 0.37) % 1,
size: 3 + ((i * 7) % 4),
});
}
return out;
}, []);
const settleStart = 2.6, settleDur = 1.2;
const settle = Easing.easeInOutCubic(clamp((localTime - settleStart) / settleDur, 0, 1));
return (