// Tryovi -- Kiosk Screens // ============================================================================= const { useState, useEffect, useRef } = React; // ============================================================================= // 1. WELCOME / ATTRACT // ============================================================================= function ScreenWelcome({ onStart }) { const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 80); return () => clearInterval(id); }, []); // Tabloid background -- coral half + cream half + giant collage return (
{/* Top brand mark + date strip */}
VOL. 04 — ISSUE 22
SPRING / SUMMER 2026
{/* Coral splash on right side -- magazine cover feel */}
{/* Editorial photo collage */}
{/* Massive editorial headline */}
◉ Live · Virtual Try-On Studio

Find
your
look.

A studio in a screen. Step in, try on, walk out. No fitting rooms — just you and a hundred new outfits.

{/* Sparkle decorations */}
{/* CTA Tap to begin -- bottom center, animated */}
{/* Bottom marquee strip */}
{Array(2).fill(0).map((_, k) => ( ★ TRY ON IN SECONDS SPRING / SUMMER 2026 ★ NO FITTING ROOMS OVER 240 STYLES ★ PHOTOREALISTIC AI SHARE TO PHONE ))}
); } // ============================================================================= // 2. PALM-UP TO CAPTURE // ============================================================================= function ScreenPalm({ onContinue }) { const [progress, setProgress] = useState(0); useEffect(() => { const id = setInterval(() => setProgress(p => Math.min(p + 0.02, 1)), 50); return () => clearInterval(id); }, []); useEffect(() => { if (progress >= 1) { const t = setTimeout(onContinue, 400); return () => clearTimeout(t); } }, [progress]); return (
◉ Hand recognition active

Hold up your
palm to start.

Show your palm to the camera. We'll start a three-second countdown when we see you.

{/* Big palm illustration with scanning */}
{/* concentric rings */} {[0, 1, 2, 3].map(i => (
))} {/* scan line */}
{/* tracking dots on knuckles */} {[ [50, 22], [50, 50], [80, 30], [20, 30], [62, 12], ].map((p, i) => (
))}
{/* Detection progress */}
● DETECTING HAND {Math.round(progress * 100)}%
STEP 01 · CAPTURE NEXT: PHOTO →
); } // ============================================================================= // 3. CAMERA CAPTURE -- viewfinder w/ countdown // ============================================================================= function ScreenCapture({ onCapture }) { const [count, setCount] = useState(3); const [flash, setFlash] = useState(false); useEffect(() => { if (count > 0) { const t = setTimeout(() => setCount(c => c - 1), 1100); return () => clearTimeout(t); } else { setFlash(true); const t = setTimeout(onCapture, 450); return () => clearTimeout(t); } }, [count]); return (
{flash &&
} {/* Live viewfinder fills most of screen */}
{/* simulated live cam (Unsplash photo, slight desaturate) */} {/* Body guide overlay -- centered */}
{/* Corner brackets */}
{/* Top HUD bar */}
REC · LIVE 1080 × 1920
POSE: ✓ CENTERED LIGHT: 84%
{/* Bottom HUD */}
● BODY DETECTED
Height ≈ 168 cm
FRAME 0238
f/2.8 · ISO 200
{/* Massive countdown number */} {count > 0 && (
{count}
)} {count === 0 && !flash && (
Smile
)}
{/* Bottom panel -- capture controls */}
◉ Hold still — capturing in
{[3, 2, 1].map(n => (
count ? 'var(--ink)' : 'transparent'), border: n < count ? '2px solid var(--ink)' : 'none', opacity: n < count ? 0.2 : 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 44, color: n === count ? 'var(--cream)' : (n > count ? 'var(--cream)' : 'var(--ink)'), transition: 'all 200ms ease', transform: n === count ? 'scale(1.15)' : 'scale(1)', }}>{n}
))}
STAY CENTERED · KEEP ARMS RELAXED
); } // ============================================================================= // 4. CAPTURED CONFIRMATION // ============================================================================= function ScreenCaptured({ onContinue, onRetake }) { return (
◉ That's the one

Looking good.

We'll use this base photo to render every try-on. Want to keep it, or take another?

{/* Big captured photo with editorial frame */}
{/* Polaroid label */}
FRAME · 0238 14:32 · KIOSK 04
{/* Sticker */}
base
photo
{/* Action buttons */}
); } Object.assign(window, { ScreenWelcome, ScreenPalm, ScreenCapture, ScreenCaptured, });