// Process v6 — 4 steps, 2×2 grid, redesigned dioramas + animation level switcher // V1 = mild (Audit-B, Production-B, Revize-C) // V4 = full (Audit-C, Production-C, Revize-C) const { useEffect: useProcessEffect, useRef: useProcessRef, useState: useProcessState } = React; // ============ DIORAMAS ============ // Step 1: Audit — Winner creative + 4 metrics with bars (concept C) function DioramaAudit({ level = 'B', inView = true }) { const metrics = [ { label: 'CTR', numeric: 5.8, suffix: '%', decimals: 1, fill: 0.85 }, { label: 'ROAS', numeric: 4.2, suffix: 'x', decimals: 1, fill: 0.92 }, { label: 'SPEND', numeric: 24, suffix: 'K Kč', decimals: 0, fill: 0.45 }, { label: 'FREQ', numeric: 1.8, suffix: '', decimals: 1, fill: 0.40 }, ]; const showC = level === 'C'; return (
{/* Header */}
AUDIT · NEJVÝKONNĚJŠÍ KREATIVA
{/* LEFT — winner 9:16 placeholder + breathing (B+) */}
{/* scanlines drift (B+) */}
{/* WINNER stamp — impact entry, then static */} ● WINNER {/* Center play triangle + ratio (C: pulsing) */}
9:16
hook_03.mp4
{/* RIGHT — 4 metric rows + footer */}
{metrics.map((m, i) => (
{m.label}
))}
⌇ Vyrobíme variace téhle.
); } // Step 2: AI produkce — 3 progress bars + level B (glitch + dot pulse), C (ETA loop + done glow) function DioramaProduction({ level = 'B', inView = true }) { const variants = [ { label: 'Variant A · video 9:16', pct: 100, state: 'DONE' }, { label: 'Variant B · banner 1080×1080', pct: 64, state: 'RUN' }, { label: 'Variant C · avatar UGC', pct: 32, state: 'RUN' }, ]; const showC = level === 'C'; return (
3 VARIANTY PARALELNĚ / 30 HOTOVO
{variants.map((v, i) => (
{v.label} {v.pct}%
{v.state === 'RUN' && (
)}
))}
); } // Step 3: Revize — REAL diff with arrow, level C: BEFORE fades, moving >>> chevrons, AFTER lift function DioramaRevize({ level = 'C', inView = true }) { const showC = level === 'C'; const showB = level === 'B' || level === 'C'; return (
● REVIZE · KOLO 01/01
{/* BEFORE — fades on level C */}
PŘED
logo
slabý hook
CTA
{/* ARROW: chain of >>> chevrons flowing left → right */}
{[0, 1, 2].map(idx => ( › ))}
{/* AFTER — slide-in entry + glow pulse + lift */}
PO
LOGO
SILNÝ HOOK
CTA →
); } // Step 4: Handover — scrolling file tree (loop, masked edges) function DioramaHandover() { const files = [ { name: 'campaign-launch/', folder: true, depth: 0 }, { name: 'video/', folder: true, depth: 1 }, { name: '01_hook_9x16.mp4', depth: 2, size: '12 MB' }, { name: '02_hook_1x1.mp4', depth: 2, size: '8 MB' }, { name: '03_hook_16x9.mp4', depth: 2, size: '14 MB' }, { name: 'banners/', folder: true, depth: 1 }, { name: '01_static_1080.png', depth: 2, size: '1.2 MB' }, { name: '02_motion_1080.gif', depth: 2, size: '4 MB' }, { name: '03_static_1200x628.png', depth: 2, size: '0.9 MB' }, { name: 'avatars/', folder: true, depth: 1 }, { name: 'ugc_v1.mp4', depth: 2, size: '22 MB' }, { name: 'ugc_v2.mp4', depth: 2, size: '18 MB' }, ]; return (
● MASTER FILES
Bez další úpravy.
{/* Scrolling list with edge mask */}
{[...files, ...files].map((f, i) => (
{f.folder ? '▾' : '·'} {f.name} {f.size && ( {f.size} )}
))}
); } const dioramaShell = { position: 'relative', height: '220px', background: 'rgba(10, 10, 12, 0.6)', border: '1px solid var(--border-subtle)', borderRadius: '10px', overflow: 'hidden', }; // ============ STEP CARD ============ function StepCard({ num, title, desc, Diorama, dioramaProps, delay }) { const [hover, setHover] = useProcessState(false); const [inView, setInView] = useProcessState(false); const cardRef = useProcessRef(null); useProcessEffect(() => { const el = cardRef.current; if (!el) return; const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduced) { setInView(true); return; } // already in viewport on mount? const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (r.top < vh * 0.85 && r.bottom > 0) { // start with delay matching Reveal const t = setTimeout(() => setInView(true), delay + 200); return () => clearTimeout(t); } const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.unobserve(el); } }); }, { threshold: 0.25 }); io.observe(el); return () => io.disconnect(); }, [delay]); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: hover ? 'var(--surface-hover)' : 'var(--surface)', border: '1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border)'), borderRadius: '14px', padding: '32px', display: 'flex', flexDirection: 'column', gap: '24px', transform: hover ? 'translateY(-4px)' : 'translateY(0)', boxShadow: hover ? '0 20px 40px -20px rgba(0,0,0,0.8)' : 'none', transition: 'background 400ms cubic-bezier(0.65, 0, 0.35, 1), border-color 400ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1)', position: 'relative', overflow: 'hidden', }} > Krok {num}

{title}

{desc}

 ); } // ============ ANIMATION CONFIG (per variant) ============ const ANIM_VARIANTS = { v1: { audit: 'B', production: 'B', revize: 'C', label: 'V1 · střídmé' }, v4: { audit: 'C', production: 'C', revize: 'C', label: 'V4 · plné' }, }; function Process() { const [animVariant, setAnimVariant] = useProcessState('v1'); const cfg = ANIM_VARIANTS[animVariant]; const steps = [ { num: '1', title: 'Audit + brief', desc: 'Projdeme tvoje nejúspěšnější kreativy a najdeme, co u tebe funguje.', D: DioramaAudit, props: { level: cfg.audit } }, { num: '2', title: 'AI produkce', desc: 'Vyrobíme první vlnu výstupů paralelně. Varianty, ne jednu verzi.', D: DioramaProduction, props: { level: cfg.production } }, { num: '3', title: 'Revize', desc: 'Jedna runda připomínek. Doladíme podle reálného feedbacku.', D: DioramaRevize, props: { level: cfg.revize } }, { num: '4', title: 'Handover', desc: 'Master soubory ve všech rozměrech kampaně. Připravené ke spuštění.', D: DioramaHandover, props: {} }, ]; return (
{/* Variant switcher (top-right) */}
{Object.keys(ANIM_VARIANTS).map(v => ( ))}
{steps.map((s, i) => ( ))}
); } window.Process = Process;