")`, backgroundSize: '220px 220px', }} /> ); } // ── Corner chrome ────────────────────────────────────────────────────── function ACornerChrome() { const time = useTime(); const pulse = 0.5 + 0.5 * Math.sin(time * Math.PI * 1.1); return ( <>

§ tab key · live

§ 04 · accessibility

fig. 04·i — emani.com · keyboard tour

); } // ── Section title ────────────────────────────────────────────────────── function ASectionTitle() { const time = useTime(); const rev = aReverseAlpha(time); const alpha = aClamp(time / 0.6); let out = 1; if (time >= TRAIL_START - 0.4) out = aClamp((TRAIL_START - 0.1 - time) / 0.4); const a = alpha * out * (1 - rev); if (a < 0.01) return null; return (

§ 04 · accessibility · emani.com

keyboard first,{' '} always .

); } // ── EMANI landing page (static) ──────────────────────────────────────── // Built to match the Emani screenshot: olive announcement bar → white header // with logo + nav + icons → hero "Foundation Reimagined" with sage product shot. // All focusable targets have data-focus-id so FocusRing can align via DOM refs. function EmaniLogoSVG() { // Simple flower-like glyph approximating the emani mark + wordmark "EMANI" return ( ); } function EmaniPage() { const time = useTime(); const rev = aReverseAlpha(time); const appear = aClamp(time / 0.8) * (1 - rev * 0.5); if (appear < 0.01) return null; return (

{/* Announcement bar */}

‹

Free USA shipping $75+

› X f i p ♪ ▶

{/* Header / nav */}

SHOP ∨

BEST SELLERS ∨

3-STEP SYSTEM

SHOP BY CONCERN ∨

LEARN ∨

{/* Skin Quiz pill */}

SKIN QUIZ

⌕ ◉ ⊡

{/* Hero section */}

{/* Left: product shot / card */}

{/* Abstract "flowers + jar" composition */}

{/* Center: hero copy */}

NAD+ SERUM FOUNDATION

Foundation

Reimagined

Your perfect no-makeup look

Discover

{/* Right: model shot placeholder */}

{/* abstract portrait silhouette */}

{/* Form section */}

§ members

Get first access.{' '} quietly.

Twice a month. No tracking. Opt-out in one click.

Email address

your@email.com

); } // ── Focus ring (driven by DOM-measured rects) ────────────────────────── function FocusRing({ rects }) { const time = useTime(); const rev = aReverseAlpha(time); let active = null; for (const def of FOCUS_STOP_DEFS) { if (time >= def.tEnter && time < def.tExit) { active = def; break; } } if (!active || rev > 0.01) return null; const rect = rects[active.id]; if (!rect) return null; const sinceEnter = time - active.tEnter; const breathe = 0.5 + 0.5 * Math.sin(sinceEnter * Math.PI * 2.2); const offset = 6 + breathe * 2; const thickness = 2.5; const flash = aClamp(sinceEnter / 0.18); const flashAlpha = 0.92 + 0.08 * flash; const { x, y, w, h } = rect; return ( <>

); } // ── Focus caption ────────────────────────────────────────────────────── function FocusCaption({ rects }) { const time = useTime(); const rev = aReverseAlpha(time); if (rev > 0.01) return null; let active = null; let idx = 0; for (let i = 0; i < FOCUS_STOP_DEFS.length; i++) { const def = FOCUS_STOP_DEFS[i]; if (time >= def.tEnter && time < def.tExit) { active = def; idx = i; break; } } if (!active) return null; const rect = rects[active.id]; if (!rect) return null; const sinceEnter = time - active.tEnter; const fade = aClamp((sinceEnter - 0.15) / 0.22); if (fade < 0.01) return null; const { x, y, w, h } = rect; const capW = 320; const capH = 110; // Prefer below, but flip above if it would clip past y=1000 let capY = y + h + 24; if (capY + capH > 1040) capY = y - capH - 18; // Horizontal: left-align with target, but clamp to canvas let capX = x; if (capX + capW > 1860) capX = 1860 - capW; if (capX < 60) capX = 60; return (

focused · tab {idx + 1}/{FOCUS_STOP_DEFS.length}

{active.tags.map((t, i) => (

{t}

))}

§ {active.wcag} {active.level}

); } // ── Breadcrumb trail + summary ───────────────────────────────────────── function BreadcrumbTrail({ rects }) { const time = useTime(); const rev = aReverseAlpha(time); if (time < TRAIL_START - 0.2) return null; const since = time - TRAIL_START; const k = aClamp(since / 1.2) * (1 - rev); if (k < 0.01) return null; const pts = FOCUS_STOP_DEFS.map(def => { const r = rects[def.id]; if (!r) return null; return { x: r.x + r.w / 2, y: r.y + r.h / 2 }; }).filter(Boolean); if (pts.length < 2) return null; const segLens = []; let total = 0; for (let i = 1; i < pts.length; i++) { const L = Math.hypot(pts[i].x - pts[i-1].x, pts[i].y - pts[i-1].y); segLens.push(L); total += L; } const drawLen = total * k; return ( ); } function SummaryCaption() { const time = useTime(); const rev = aReverseAlpha(time); if (time < TRAIL_START + 0.6) return null; const since = time - (TRAIL_START + 0.6); const fade = aClamp(since / 0.6) * (1 - rev); if (fade < 0.01) return null; return ( <> {/* Cream wash to dim the page so summary pops */}

{/* amber halo behind */}

§ summary · keyboard tour

7 stops · 0 traps ·{' '} passed

WCAG 2.2 · level AA · across 7 success criteria

); } // ── Scene root ───────────────────────────────────────────────────────── function A11yScene() { const rects = useFocusRects(); return (

{/* Background */}

); } Object.assign(window, { A11yScene, A_PALETTE, A_FONTS, });