const { useState, useRef, useEffect, Reveal, Icon } = window; const PACK_BADGE = { starter: { label: 'Starter', color: '#8b8b8b', bg: 'rgba(139,139,139,0.12)', border: 'rgba(139,139,139,0.25)' }, pro: { label: 'Pro', color: '#3b82f6', bg: 'rgba(59,130,246,0.12)', border: 'rgba(59,130,246,0.3)' }, premium: { label: 'Premium', color: '#f97316', bg: 'rgba(249,115,22,0.12)', border: 'rgba(249,115,22,0.3)' }, }; const TOOLS = [ { id: 'web', name: 'VIZION WEB', pack: 'starter', title: 'Ta page de vente, en ligne en 10 minutes.', desc: 'Pages de vente et link-in-bio intégrés. Pas de code, pas de plugin — juste l\'éditeur, ta charte, ton offre.', bullets: ['Link-in-bio', 'Landing page', 'Templates prêts à vendre'], }, { id: 'flow', name: 'VIZION FLOW', pack: 'pro', title: 'Le focus, quand tu en as besoin.', desc: 'Lance une session, coupe le bruit, avance sur ce qui compte. Un pomodoro pensé pour les créateurs qui veulent livrer.', bullets: ['Sessions chronométrées', 'Objectif de session', 'Historique & streaks'], }, { id: 'planner', name: 'VIZION PLANNER', pack: 'pro', title: 'Une semaine claire, zéro bazar.', desc: 'Pose tes priorités, répartis tes tâches, coche au fur et à mesure. Une vue calendrier simple, synchronisée avec Flow.', bullets: ['Vue semaine', 'Priorités automatiques', 'Sync avec Flow'], }, { id: 'tracker', name: 'VIZION TRACKER', pack: 'pro', title: 'Tes habitudes, en vue claire.', desc: 'Coche tes routines quotidiennes, visualise tes streaks, repère ce qui fait réellement avancer ton business. Pas un simple to-do.', bullets: ['Tracking par habitude', 'Streaks & statistiques', 'Moods quotidiens'], }, { id: 'ai', name: 'VIZION IA', pack: 'premium', title: 'Ton copywriter, toujours prêt.', desc: 'Scripts, hooks, légendes, analyses vidéo. Entraîné sur les formats qui fonctionnent en 2026 sur TikTok, Instagram et YouTube.', bullets: ['Scripts courts / longs', 'Hooks testés', 'Analyse vidéo IA'], }, { id: 'trend', name: 'VIZION TREND', pack: 'premium', title: 'Tu gagnes 2 heures par jour.', desc: 'Fini la veille TikTok chronophage. VIZION Trend affiche directement les meilleures vidéos MRR du moment. Tu vois ce qui marche, tu t\'en inspires, tu passes à l\'action.', bullets: ['Trending par niche', 'Mise à jour quotidienne', 'Exports one-click'], }, ]; // Durées approximatives d'un cycle complet par outil (pour l'auto-play) const TOOL_CYCLE_MS = { web: 7200, flow: 13000, planner: 24000, // le plus long : drops + édition + drag tracker: 9500, ai: 11000, trend: 10500, }; function PackBadge({ pack }) { const b = PACK_BADGE[pack]; if (!b) return null; return ( Pack {b.label} ); } function Demo() { const [active, setActive] = useState('web'); const tool = TOOLS.find(t => t.id === active); const handleTabClick = (id) => { setActive(id); }; return (

Des fonctionnalités pour
performer dans le digital.

Tout ce dont tu as besoin pour créer, publier et convertir. Intégré, cohérent, sans friction.

{/* Tabs pleine largeur */}
{TOOLS.map(t => { const isActive = active === t.id; return ( ); })}
{/* Card outil — style pillar minimaliste */}
{tool.name} {tool.pack && }

{tool.title}

{tool.desc}

{tool.bullets.map((b, i) => ( {b} ))}
{active === 'web' && } {active === 'flow' && } {active === 'planner' && } {active === 'ai' && } {active === 'trend' && } {active === 'tracker' && }
); } /* ══════════════════════════════════════════════════════════════════════ VISUELS MINIMALISTES par outil — avec animations humaines (cursor, drag, typing) ══════════════════════════════════════════════════════════════════════ */ // Curseur SVG animé réutilisable — z-index 30 pour passer au-dessus des popups // Prop `instant` désactive la transition CSS (pour les animations RAF lerp fluides) const Cursor = ({ style, clicking = false, instant = false }) => (
{clicking && (
)}
); /** * Helper universel : positionne le wrapper du Cursor pour que le TIP du SVG (pt 2,2) * tombe pile au centre de l'élément cible. Compatible avec tout conteneur local. */ function cursorTipFor(targetEl, rootEl, ox = 0, oy = 0) { if (!targetEl || !rootEl) return { x: 0, y: 0 }; const a = targetEl.getBoundingClientRect(); const b = rootEl.getBoundingClientRect(); return { x: (a.left - b.left) + a.width / 2 - 2 + ox, y: (a.top - b.top) + a.height / 2 - 2 + oy, }; } /** * Chrome macOS — barre titre avec 3 dots (fermer/réduire/agrandir) + URL centrée. * Accepte `rootRef` pour que le parent puisse utiliser `containerRef` et positionner * correctement le Cursor via `cursorTipFor`. */ function MacChrome({ title, children, maxWidth = 460, contentStyle = {}, rootRef, compact = false, contentRef }) { return (
{/* Barre chrome façon macOS */}
{title}
{/* Spacer symétrique aux 3 dots pour centrer le titre */} {/* Contenu */}
{children}
); } function WebVisual() { const [activeLink, setActiveLink] = useState(-1); const [cursorPos, setCursorPos] = useState({ x: 200, y: 30 }); const [clicking, setClicking] = useState(false); const [activeTheme, setActiveTheme] = useState(0); const [panelOpen, setPanelOpen] = useState(false); const containerRef = useRef(null); const linkRefs = useRef([]); const themeCardRefs = useRef([]); const themeBtnRef = useRef(null); const THEMES = [ { name: 'Émeraude', emoji: '🟢', primary: '#2DCD93', bg: '#0a1410', card: '#0f2018', text: '#e8faf3', muted: '#5a9c7a', line: '#1e3828' }, { name: 'Minuit', emoji: '🔵', primary: '#3b82f6', bg: '#090f1a', card: '#0d1628', text: '#e0eeff', muted: '#4a72b0', line: '#162240' }, { name: 'Aurora', emoji: '🩷', primary: '#ec4899', bg: '#1a0910', card: '#280f1c', text: '#ffe0ee', muted: '#a0406e', line: '#3a1428' }, { name: 'Lumière ☀️', emoji: '⬜', primary: '#2DCD93', bg: '#f5f7f5', card: '#ffffff', text: '#111a14', muted: '#6b8878', line: '#d8e8dd' }, ]; const LINKS = [ { title: 'Formation MRR 2.0', sub: '12 h de vidéos · accès à vie', icon: '🎓' }, { title: 'Pack de ressources', sub: 'Templates, scripts, prompts IA', icon: '📦' }, { title: 'Réserver un call', sub: '30 min · 1-to-1 · offert', icon: '📅' }, ]; const theme = THEMES[activeTheme]; const isLight = activeTheme === 3; useEffect(() => { let cancelled = false; const sleep = (ms) => new Promise(r => setTimeout(r, ms)); const run = async () => { while (!cancelled) { // Phase 1 : clic sur le bouton "Changer de thème" if (themeBtnRef.current && containerRef.current) { setCursorPos(cursorTipFor(themeBtnRef.current, containerRef.current)); } await sleep(800); setClicking(true); await sleep(150); setClicking(false); setPanelOpen(true); await sleep(500); // Phase 2 : souris parcourt les cartes de thème dans le panel for (let t = 0; t < THEMES.length; t++) { if (cancelled) return; if (themeCardRefs.current[t] && containerRef.current) { setCursorPos(cursorTipFor(themeCardRefs.current[t], containerRef.current)); } await sleep(600); setClicking(true); setActiveTheme(t); await sleep(150); setClicking(false); await sleep(800); } // Phase 3 : ferme le panel setPanelOpen(false); await sleep(600); // Phase 4 : souris clique sur les liens for (let i = 0; i < LINKS.length; i++) { if (cancelled) return; if (linkRefs.current[i] && containerRef.current) { setCursorPos(cursorTipFor(linkRefs.current[i], containerRef.current)); } await sleep(800); setClicking(true); setActiveLink(i); await sleep(150); setClicking(false); await sleep(900); } setActiveLink(-1); await sleep(600); } }; run(); return () => { cancelled = true; }; }, []); return ( {/* ── Fond global du thème ── */}
{/* ── Barre outils en haut ── */}
{/* Indicateur thème actif */}
{theme.name}
{/* Bouton Changer de thème */}
{/* ── Panel de sélection de thème (popup) ── */}
Sélectionner un thème
{THEMES.map((t, i) => (
themeCardRefs.current[i] = el} onClick={() => setActiveTheme(i)} style={{ borderRadius: 8, overflow: 'hidden', border: `2px solid ${activeTheme === i ? t.primary : (isLight ? '#e0e0e0' : '#222')}`, cursor: 'pointer', transform: activeTheme === i ? 'scale(1.04)' : 'scale(1)', boxShadow: activeTheme === i ? `0 0 0 2px ${t.primary}44` : 'none', transition: 'all 0.25s cubic-bezier(.2,.7,.2,1)', }} > {/* Mini preview du thème */}
{/* Avatar mini */}
R
{/* Lignes simulées */} {[0.9, 0.6, 0.4].map((op, j) => (
))}
{/* Nom du thème */}
{t.name.replace(' ☀️','')} {activeTheme === i && ( )}
))}
{/* ── Bio preview ── */}
{/* Avatar + profil */}
R
Rémy Digit
{/* Bio description — plus grande, plus lisible */}
Marketing digital · Business MRR
Créateur de contenu · 4.8K abonnés
{/* Liens */}
{LINKS.map((l, i) => { const isActive = activeLink === i; return (
linkRefs.current[i] = el} style={{ display: 'grid', gridTemplateColumns: '30px 1fr 12px', gap: 10, alignItems: 'center', padding: '9px 11px', borderRadius: 10, background: isActive ? theme.card : 'transparent', border: `1px solid ${isActive ? theme.primary : theme.line}`, boxShadow: isActive ? `0 0 0 3px ${theme.primary}28, 0 8px 20px -8px ${theme.primary}` : 'none', transform: isActive && clicking ? 'scale(0.98)' : 'scale(1)', transition: 'all 0.28s cubic-bezier(.2,.7,.2,1)', }} >
{l.icon}
{l.title}
{l.sub}
); })}
); } function FlowVisual() { const [secs, setSecs] = useState(25 * 60); const [running, setRunning] = useState(false); const [cursor, setCursor] = useState({ x: 80, y: 260 }); const [clicking, setClicking] = useState(false); const containerRef = useRef(null); const bodyRef = useRef(null); const playBtnRef = useRef(null); // Positionne le curseur pile sur le bouton — ref = div interne (containing block réel du Cursor) const moveCursorToButton = () => { setCursor(cursorTipFor(playBtnRef.current, bodyRef.current)); }; // Scénario joué en boucle : clique play → décompte → clique pause → reset useEffect(() => { let cancelled = false; const sleep = (ms) => new Promise(r => setTimeout(r, ms)); const run = async () => { while (!cancelled) { moveCursorToButton(); await sleep(900); setClicking(true); await sleep(180); setRunning(true); setClicking(false); // Sort du cadre pour laisser voir le décompte setCursor({ x: 340, y: 220 }); await sleep(5000); if (cancelled) return; moveCursorToButton(); await sleep(900); setClicking(true); await sleep(180); setRunning(false); setClicking(false); await sleep(1400); setSecs(25 * 60); await sleep(400); } }; run(); return () => { cancelled = true; }; }, []); useEffect(() => { if (!running) return; const t = setInterval(() => setSecs(s => (s > 0 ? s - 1 : 25 * 60)), 1000); return () => clearInterval(t); }, [running]); const m = String(Math.floor(secs / 60)).padStart(2, '0'); const s = String(secs % 60).padStart(2, '0'); const pct = 1 - secs / (25 * 60); const R = 118; const C = 2 * Math.PI * R; return (
{/* Halo pulsant quand actif */}
{/* Timer + label (display bold) — remonté légèrement pour laisser place au bouton */}
{running ? 'EN COURS' : 'FOCUS'}
{m}:{s}
SESSION 1/4
{/* Bouton play/pause intégré en bas du cercle (overlap) */}
); } function PlannerVisual() { // Semaine de travail : 5 jours → cases plus larges, texte lisible const DAYS = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven']; // Palette de couleurs pour simuler différentes catégories utilisateur const COLORS = { accent: { bg: 'var(--accent)', fg: '#fff' }, blue: { bg: '#3b82f6', fg: '#fff' }, orange: { bg: '#f59e0b', fg: '#0a0a0b' }, violet: { bg: '#8b5cf6', fg: '#fff' }, soft: { bg: 'color-mix(in oklab, var(--accent) 22%, transparent)', fg: 'var(--accent)' }, }; // Tâches fixes validées (catégories variées) // IMPORTANT : Tournage (Jeu) sera DRAGGÉ vers Ven en fin de cycle const initialStatic = [ { id: 's1', d: 0, row: 0, t: 'Script', c: 'accent' }, { id: 's2', d: 1, row: 1, t: 'Deep work', c: 'blue' }, { id: 's3', d: 3, row: 0, t: 'Tournage', c: 'orange' }, ]; // Tâches ajoutées par le curseur (avec typing) const DROP_SEQUENCE = [ { id: 'd1', d: 2, row: 2, initial: 'Publi', edited: 'Publication', c: 'violet', editable: true }, { id: 'd2', d: 4, row: 2, initial: 'Review', edited: 'Review', c: 'accent', editable: false }, ]; // Tâche à drag & drop (existante) : Tournage passe Jeu → Ven const DRAG_MOVE = { id: 's3', fromD: 3, fromRow: 0, toD: 4, toRow: 0 }; const [typed, setTyped] = useState(''); const [phase, setPhase] = useState('idle'); // idle | typing | editing | dragging const [placed, setPlaced] = useState([]); const [staticTasks, setStaticTasks] = useState(initialStatic); const [editOpen, setEditOpen] = useState(false); const [editInput, setEditInput] = useState(''); const [validHover, setValidHover] = useState(false); const [cursor, setCursor] = useState({ x: 440, y: 20 }); const [clicking, setClicking] = useState(false); // Drag state : { ghostX, ghostY, task } const [dragGhost, setDragGhost] = useState(null); const containerRef = useRef(null); const bodyRef = useRef(null); const slotRefs = useRef({}); const editInputRef = useRef(null); const validBtnRef = useRef(null); useEffect(() => { let cancelled = false; const sleep = (ms) => new Promise(r => setTimeout(r, ms)); const run = async () => { while (!cancelled) { // Reset complet à chaque cycle setPlaced([]); setStaticTasks(initialStatic); setEditOpen(false); setValidHover(false); setDragGhost(null); setTyped(''); setPhase('idle'); setCursor({ x: 440, y: 20 }); await sleep(600); // ══ PHASE 1 : drop + typing + (édition pour 1ère) ══ for (let i = 0; i < DROP_SEQUENCE.length; i++) { if (cancelled) return; const task = DROP_SEQUENCE[i]; const slot = slotRefs.current[`${task.row}-${task.d}`]; setCursor(cursorTipFor(slot, bodyRef.current)); await sleep(850); setClicking(true); await sleep(160); setClicking(false); setPhase('typing'); setTyped(''); const full = task.initial; for (let j = 0; j <= full.length; j++) { if (cancelled) return; setTyped(full.slice(0, j)); await sleep(45); } setPlaced(prev => [...prev, { ...task, t: task.initial, valid: false }]); setTyped(''); setPhase('idle'); await sleep(380); if (task.editable) { setCursor(cursorTipFor(slot, bodyRef.current, 0, -4)); await sleep(500); setClicking(true); await sleep(160); setClicking(false); setEditOpen(true); setEditInput(task.initial); setPhase('editing'); await sleep(350); setCursor(cursorTipFor(editInputRef.current, bodyRef.current)); await sleep(550); setClicking(true); await sleep(140); setClicking(false); for (let k = task.initial.length; k <= task.edited.length; k++) { if (cancelled) return; setEditInput(task.edited.slice(0, k)); await sleep(55); } await sleep(350); setCursor(cursorTipFor(validBtnRef.current, bodyRef.current)); await sleep(600); setValidHover(true); await sleep(160); setClicking(true); await sleep(160); setClicking(false); setPlaced(prev => prev.map((p, idx) => idx === i ? { ...p, t: task.edited, valid: true } : p )); setEditOpen(false); setValidHover(false); setPhase('idle'); } else { await sleep(260); setPlaced(prev => prev.map((p, idx) => idx === i ? { ...p, valid: true } : p )); } setCursor({ x: 440, y: 20 }); await sleep(700); } // ══ PHASE 2 : drag & drop d'une tâche existante (Tournage Jeu → Ven) ══ await sleep(500); const fromSlot = slotRefs.current[`${DRAG_MOVE.fromRow}-${DRAG_MOVE.fromD}`]; const toSlot = slotRefs.current[`${DRAG_MOVE.toRow}-${DRAG_MOVE.toD}`]; if (fromSlot && toSlot) { // 1. Curseur arrive sur la tâche à déplacer setCursor(cursorTipFor(fromSlot, bodyRef.current)); await sleep(750); // 2. Clic → effet de pression visible sur la tâche setClicking(true); // Le ghost apparaît déjà (avec scale-up pour simuler la "saisie") const draggedTask = staticTasks.find(t => t.id === DRAG_MOVE.id) || initialStatic.find(t => t.id === DRAG_MOVE.id); setPhase('dragging'); setDragGhost({ task: draggedTask, grabbed: true }); // La tâche disparaît de son emplacement source setStaticTasks(prev => prev.filter(t => t.id !== DRAG_MOVE.id)); await sleep(220); setClicking(false); await sleep(220); // 3. Déplacement fluide via requestAnimationFrame (easing cubic ease-out) const fromPos = cursorTipFor(fromSlot, bodyRef.current); const toPos = cursorTipFor(toSlot, bodyRef.current); await new Promise((resolve) => { const duration = 1100; const start = performance.now(); const tick = (now) => { if (cancelled) { resolve(); return; } const elapsed = now - start; const t = Math.min(1, elapsed / duration); // Ease out cubic : commence rapide, ralentit en fin const e = 1 - Math.pow(1 - t, 3); setCursor({ x: fromPos.x + (toPos.x - fromPos.x) * e, y: fromPos.y + (toPos.y - fromPos.y) * e, }); if (t < 1) requestAnimationFrame(tick); else resolve(); }; requestAnimationFrame(tick); }); if (cancelled) return; // 4. Drop : petite pause sur la target, puis dépose la tâche await sleep(240); setStaticTasks(prev => [ ...prev, { ...draggedTask, d: DRAG_MOVE.toD, row: DRAG_MOVE.toRow }, ]); setDragGhost(null); setPhase('idle'); await sleep(1400); } setCursor({ x: 440, y: 20 }); await sleep(1800); } }; run(); return () => { cancelled = true; }; }, []); const renderCell = (col, row) => { const ev = staticTasks.find(e => e.d === col && e.row === row); const dropped = placed.find(e => e.d === col && e.row === row); const beingDrawn = phase === 'typing' && placed.length < DROP_SEQUENCE.length && DROP_SEQUENCE[placed.length].d === col && DROP_SEQUENCE[placed.length].row === row; // Target du drop en cours de drag const isDropTarget = phase === 'dragging' && dragGhost && DRAG_MOVE.toD === col && DRAG_MOVE.toRow === row; let shown = null; let valid = true; if (ev) { shown = ev; valid = true; } else if (dropped) { shown = dropped; valid = dropped.valid; } else if (beingDrawn) { const t = DROP_SEQUENCE[placed.length]; shown = { ...t, t: typed || '|' }; valid = false; } const color = shown ? (COLORS[shown.c] || COLORS.accent) : null; const slotKey = `${row}-${col}`; return (
{ slotRefs.current[slotKey] = el; }} style={{ height: 48, borderRadius: 8, border: (beingDrawn || isDropTarget) ? '1.5px dashed var(--accent)' : '1px solid var(--line)', background: (beingDrawn || isDropTarget) ? 'color-mix(in oklab, var(--accent) 6%, transparent)' : 'transparent', position: 'relative', transition: 'border-color 0.2s ease, background 0.2s ease', }}> {shown && (
{shown.t}
)}
); }; return (
Semaine 16 ● {staticTasks.length + placed.length} tâches
{DAYS.map((d, i) => (
{d}
))} {[0, 1, 2].map(row => DAYS.map((_, col) => renderCell(col, row)))}
{/* Popup d'édition de tâche */}
Éditer la tâche
{/* Ghost de la tâche pendant le drag — suit le curseur, pop on grab */} {dragGhost && (
{dragGhost.task.t}
)} ); } function AIVisual() { const LINES = [ '→ "J\'ai gagné 4 800€ ce mois…"', '→ "3 erreurs qui tuent ton MRR"', '→ "De 0 à 1 000€ en 30 jours"', ]; const [shown, setShown] = useState([]); const [typing, setTyping] = useState(''); useEffect(() => { let cancelled = false, li = 0, ci = 0; const tick = () => { if (cancelled) return; if (li >= LINES.length) { setTimeout(() => { if (!cancelled) { setShown([]); setTyping(''); li = 0; ci = 0; tick(); } }, 1800); return; } const cur = LINES[li]; if (ci <= cur.length) { setTyping(cur.slice(0, ci)); ci++; setTimeout(tick, 32); } else { setShown(s => [...s, cur]); setTyping(''); li++; ci = 0; setTimeout(tick, 280); } }; tick(); return () => { cancelled = true; }; }, []); return (
IA · Scripts Génération
{shown.map((l, i) =>
{l}
)} {typing &&
{typing}
}
); } function TrendVisual() { const POOL = [ { hook: 'POV: t\'es en cours et tu fais 1 800 € 🫠', views: '343k', tag: '#mrr' }, { hook: '3 erreurs qui tuent ton MRR en 2026', views: '198k', tag: '#business' }, { hook: 'De 0 à 1 000 € en 30 jours', views: '121k', tag: '#digital' }, { hook: 'Ce script IA a fait 340k vues', views: '287k', tag: '#hook' }, { hook: 'Le setup qui convertit à 8 %', views: '156k', tag: '#setup' }, { hook: 'J\'ai testé VIZION pendant 30 jours', views: '412k', tag: '#vizion' }, ]; const [list, setList] = useState(POOL.slice(0, 3)); const [flash, setFlash] = useState(false); useEffect(() => { let cancelled = false, i = 0; const sleep = (ms) => new Promise(r => setTimeout(r, ms)); const run = async () => { while (!cancelled) { await sleep(3200); if (cancelled) return; // Nouveau trending pop au #1, les autres descendent const next = POOL[(i + 3) % POOL.length]; i++; setList(prev => [next, ...prev.slice(0, 2)]); setFlash(true); await sleep(800); if (!cancelled) setFlash(false); } }; run(); return () => { cancelled = true; }; }, []); return (
Trending · TikTok 24 h · #mrr
{/* Badge "nouvelle tendance" qui flash */}
✦ NOUVELLE TENDANCE
{list.map((v, i) => (
#{i + 1}
{v.hook}
{v.tag}
↗ {v.views}
))}
); } /* ══════════════════════════════════════════════════════════════════════ TRACKER — curseur qui coche des habitudes du jour + stats ══════════════════════════════════════════════════════════════════════ */ function TrackerVisual() { const HABITS = [ { id: 0, icon: '🏃', name: 'Sport', streak: 12 }, { id: 1, icon: '📚', name: 'Lecture', streak: 8 }, { id: 2, icon: '💧', name: 'Hydratation', streak: 23 }, { id: 3, icon: '✍️', name: 'Contenu', streak: 5 }, { id: 4, icon: '🧘', name: 'Méditation', streak: 17 }, ]; const [checked, setChecked] = useState([false, false, false, false, false]); const [cursor, setCursor] = useState({ x: 380, y: 20 }); const [clicking, setClicking] = useState(false); const containerRef = useRef(null); const bodyRef = useRef(null); const checkboxRefs = useRef([]); // Positionne le curseur pile sur la checkbox — bodyRef = containing block réel du Cursor const moveCursorToCheckbox = (i) => { setCursor(cursorTipFor(checkboxRefs.current[i], bodyRef.current)); }; useEffect(() => { let cancelled = false; const sleep = (ms) => new Promise(r => setTimeout(r, ms)); const run = async () => { while (!cancelled) { setChecked([false, false, false, false, false]); await sleep(800); for (let i = 0; i < HABITS.length; i++) { if (cancelled) return; moveCursorToCheckbox(i); await sleep(700); setClicking(true); await sleep(140); setChecked(prev => { const next = [...prev]; next[i] = true; return next; }); setClicking(false); await sleep(320); } await sleep(2200); } }; run(); return () => { cancelled = true; }; }, []); const completedCount = checked.filter(Boolean).length; return ( {/* Header : progression du jour */}
Mardi · aujourd'hui
{completedCount} / {HABITS.length}
{/* Mini progress ring */}
{Math.round((completedCount / HABITS.length) * 100)}%
{/* Liste des habitudes */}
{HABITS.map((h, i) => { const done = checked[i]; return (
{h.icon}
{h.name}
🔥 {h.streak}j {/* Checkbox */} checkboxRefs.current[i] = el} style={{ width: 22, height: 22, borderRadius: 6, border: done ? 'none' : '1.5px solid var(--line-strong)', background: done ? 'var(--accent)' : 'transparent', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', boxShadow: done ? '0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent)' : 'none', transition: 'all 0.3s cubic-bezier(.2,.7,.2,1)', transform: done ? 'scale(1.05)' : 'scale(1)', }}> {done && ( )}
); })}
); } Object.assign(window, { Demo });