// scenes/intro.jsx // Brand opener, kinetic punchline, stats grid, and outro CTA scenes. // ───────────────────────────────────────────────────────────────────────── // SCENE 1 — OPENER (0–6s) // Slashes sweep in → ALDENE wordmark assembles → "L'IA AU SERVICE DE VOTRE MÉTIER" reveals // ───────────────────────────────────────────────────────────────────────── function SceneOpener() { const { localTime, duration } = useSprite(); const t = localTime; // Wordmark draw progress (slowed for a less rushed open) const drawP = Math.max(0, Math.min(1, (t - 0.9) / 1.8)); // Dot pop at t=2.8s with overshoot const dotPop = (() => { const lt = Math.max(0, Math.min(1, (t - 2.8) / 0.55)); return Easing.easeOutBack(lt); })(); // Subtitle fade in at t=3.6 const subA = Math.max(0, Math.min(1, (t - 3.6) / 0.7)); // Tagline reveal at t=4.6 const tagA = Math.max(0, Math.min(1, (t - 4.6) / 0.7)); // Service icons row reveal at t=6.0 const chipsA = Math.max(0, Math.min(1, (t - 6.0) / 0.7)); // Exit at last 0.5s const exit = Math.max(0, Math.min(1, (t - (duration - 0.5)) / 0.5)); const exitOp = 1 - exit; return (
{/* Top-right slash cluster */}
{/* Bottom-left slash cluster */}
{/* Centered wordmark + tagline */}
{/* Eyebrow */}
V O S   S U C C È S
{/* Wordmark */} {/* IA badge — appears with wordmark */}
I A  ·  A U T O M A T I S A T I O N
{/* Tagline */}
L'IA au service
de votre métier.
{/* Service chips row */}
); } // ───────────────────────────────────────────────────────────────────────── // SCENE 2 — HOOK (5.5–11.5s, ~6s) // Short kinetic hook positioning Aldene IA before the app showcase. // ───────────────────────────────────────────────────────────────────────── function ScenePromise() { const { localTime, duration } = useSprite(); const t = localTime; // Three short statements, then landing // 0.0–1.0 : "Pas de l'IA pour faire de l'IA." // 1.0–2.0 : "De l'IA qui tourne." // 2.0–3.0 : "Tous les jours. Pour de vrai." // 2.5–3.0 : flash // 3.0–6.0 : landing "23 applications. Un aperçu." const statements = [ { txt: 'Pas de l\u2019IA', emph: 'pour faire de l\u2019IA', tail: '.' }, { txt: 'De l\u2019IA', emph: 'qui tourne', tail: '.' }, { txt: 'Tous les jours.', emph: 'Pour de vrai', tail: '.' }, ]; const slot = 1.7; const idx = Math.floor(t / slot); const activePhase = idx < 3; const localT = t - idx * slot; // Yellow flash on transition to landing const flashStart = 4.85; const flashEnd = 5.35; const flashAlpha = t >= flashStart && t < flashEnd ? (1 - Math.abs((t - (flashStart + flashEnd) / 2) / ((flashEnd - flashStart) / 2))) : 0; // Final tagline appears at t=5.1 const finalA = Math.max(0, Math.min(1, (t - 5.1) / 0.9)); // exit fade const exit = Math.max(0, Math.min(1, (t - (duration - 0.5)) / 0.5)); const exitOp = 1 - exit; return (
{/* Statement stack */} {activePhase && (
{statements.map((_, i) => (
))}
)} {/* Yellow flash */}
{/* Final landing */} {finalA > 0 && (
A L D E N E   I A
23 applications.
Un aperçu.
Ce que nos équipes utilisent au quotidien,
et ce qu'on peut bâtir pour vous.
)}
); } // Helper: a single PromiseLine that wipes in function PromiseLine({ prefix, emph, tail, localT, slot }) { const inA = Math.max(0, Math.min(1, localT / 0.45)); const outStart = slot - 0.4; const outA = localT > outStart ? Math.max(0, Math.min(1, (localT - outStart) / 0.4)) : 0; const ty = (1 - Easing.easeOutCubic(inA)) * 40 + outA * -20; const op = Easing.easeOutCubic(inA) * (1 - outA); return (
N O T R E   A P P R O C H E
{prefix}
{emph}{tail}
); } // ───────────────────────────────────────────────────────────────────────── // SCENE 6 — STATS GRID (44–52s) // Four big stat cards reveal with counters // ───────────────────────────────────────────────────────────────────────── function SceneStats() { const { localTime, duration } = useSprite(); const t = localTime; const stats = [ { value: '23', label: 'applications IA', sub: 'développées et déployées en interne', color: ALD.svc.ia }, { value: '200+', label: 'workflows n8n', sub: 'actifs en production · 65 423 exéc.', color: ALD.svc.cyber }, { value: '27h', label: 'économisées /sem', sub: 'rendues à nos équipes chaque semaine', color: ALD.yellow }, ]; const headA = Math.max(0, Math.min(1, (t - 0.1) / 0.6)); const exit = Math.max(0, Math.min(1, (t - (duration - 0.5)) / 0.5)); const exitOp = 1 - exit; return (
{/* Header */}
A L D E N E   ·   E N   C H I F F R E S
Du concret. Pas du buzz.
{/* Grid */}
{stats.map((s, i) => { const inDelay = 0.8 + i * 0.18; const inA = Math.max(0, Math.min(1, (t - inDelay) / 0.55)); const e = Easing.easeOutBack(inA); return (
{s.value}
{s.label}
{s.sub}
); })}
); } // ───────────────────────────────────────────────────────────────────────── // SCENE 7 — OUTRO (52–60s) // Logo center, 3 pillars, contact, CTA // ───────────────────────────────────────────────────────────────────────── function SceneOutro({ contact }) { const { localTime, duration } = useSprite(); const t = localTime; const drawP = Math.max(0, Math.min(1, (t - 0.2) / 1.2)); const dotPop = (() => { const lt = Math.max(0, Math.min(1, (t - 1.3) / 0.5)); return Easing.easeOutBack(lt); })(); const tagA = Math.max(0, Math.min(1, (t - 1.7) / 0.6)); const pillarsA = Math.max(0, Math.min(1, (t - 2.4) / 0.7)); const ctaA = Math.max(0, Math.min(1, (t - 3.2) / 0.6)); const contactA = Math.max(0, Math.min(1, (t - 3.8) / 0.6)); const qrA = Math.max(0, Math.min(1, (t - 3.4) / 0.7)); return (
{/* Logo */} {/* tagline */}
Vos succès · Nos hommes, nos solutions
{/* pillars */}
F I A B I L I T É · D Y N A M I S M E · H U M A I N
{/* CTA + QR row */}
{/* Left: CTA pill */}
Discutons de votre projet IA.
{/* Right: QR panel */}
QR code aldene.ai
S C A N N E Z   →
aldene.ai
Diagnostic IA gratuit en 4 minutes
{/* Contact */}
{contact.phone} · {contact.web} · {contact.cities}
); } Object.assign(window, { SceneOpener, ScenePromise, SceneStats, SceneOutro });