);
}
// ═════════════════════════════════════════════════════════════
// S1 — Splash (5-slide narrative carousel)
// Each slide has its own bespoke visualisation. The two forms
// (orange = data, blue = felt) journey from separated → fused.
// ═════════════════════════════════════════════════════════════
// Splash-only soft palette (not the full app token set)
const SP = {
orange: '#F0A090', // corps / data
blue: '#90B8F0', // esprit / ressenti
mauve: '#8A5B95', // résonance
};
// Shared rectangle (data) — used in slides 1–4 with offset/sync overrides
function DataRect({ size, x = 0, pulseSync = false }) {
return (
);
}
// Shared blob (felt) — slides 1–4
function FeltBlob({ size, x, syncBreath = false }) {
return (
);
}
// — Slide 1 : La fissure ——————————————————————————————————————
function FissureViz({ size = 240 }) {
return (
{/* dashed crack */}
);
}
// — Slide 2 : La trace ———————————————————————————————————————
// horizontal cartography line forms across the middle, with tick
// marks dropping side-by-side from each form
function TraceViz({ size = 240 }) {
const cy = size * 0.5;
// Pre-compute deterministic tick positions
const dataTicks = [0.10, 0.20, 0.30].map(p => size * p);
const feltTicks = [0.62, 0.74, 0.86].map(p => size * p);
return (
{/* horizontal trace line drawing across — stroke-dashoffset reveal */}
{/* dashed crack remains, lighter */}
);
}
// — Slide 3 : La voix ————————————————————————————————————————
// sound wave emanates from blue (right) and travels LEFT, crossing
// the fissure. Data side reacts with a subtle bloom when it arrives.
function VoiceViz({ size = 240 }) {
return (
{/* concentric voice arcs — emit from blob centre, travel left */}
{/* data-side bloom — reacts when wave arrives */}
{/* crack — almost gone */}
);
}
// — Slide 4 : La rencontre ————————————————————————————————————
// forms move closer and OVERLAP. mauve blooms in contact zone.
// pulse + breath now share rhythm.
function EncounterViz({ size = 240 }) {
return (
{/* shifted positions — they meet in the middle */}
{/* mauve bloom in contact zone — synced with shared rhythm */}
);
}
// — Slide 5 : La résonance ————————————————————————————————————
// single mauve orb, calm deep breath. fissure invisible.
function ResonanceOrb({ size = 240 }) {
return (
);
}
// ═════════════════════════════════════════════════════════════
// S3b — Conversation IA
// ═════════════════════════════════════════════════════════════
function S3b_Conversation({ go }) {
const [step, setStep] = useState(0);
const turns = [
{ who: 'ai', text: <>Bonjour 👋 Je suis Résonance.
Je suis là pour t'aider à mieux comprendre ce que tu ressens dans ta pratique. },
{ who: 'ai', text: <>Raconte-moi : comment s'est passée ta dernière séance ?, prompt: true },
{ who: 'user', text: « Un 10k tranquille ce matin. Je me sentais étonnamment léger, alors que j'ai mal dormi… » },
{ who: 'ai', text: <>Je t'entends. Ton corps t'a porté malgré la fatigue — c'est précieux à remarquer.
Qu'est-ce qui t'amène vers Résonance ?, prompt: true },
{ who: 'user', text: « J'en ai marre des scores qui me disent que je suis 'en retard'. Je veux écouter autrement. » },
{ who: 'ai', text: <>Merci de me faire confiance.
Je commence à te connaître. On va construire quelque chose ensemble. 🌊 },
];
const visible = turns.slice(0, step + 1);
const done = step >= turns.length - 1;
const current = turns[step];
return (
go('S2_Choice')} title="Conversation" subtitle={`${Math.min(step+1, turns.length)} / ${turns.length}`}/>
Je lis tes activités. Je n'écris rien sur ton compte Strava.
Tes activités restent privées. Rien n'est partagé avec Strava ou qui que ce soit.
go(ctx?.from === 'settings' ? 'S15_Settings' : 'S5_Journal')}>
Connecter Strava
go('S5_Journal')} style={{ alignSelf: 'center', marginTop: 6 }}>
Pas maintenant — je le ferai plus tard