{/* base invitation behind, dimmed slightly */}

{/* darkening overlay so foreground pops */}

{/* GIANT PULSING AGE — center stage */}

{data.eta}

{/* Candle on top of age */}

{/* Name — typed across top with hand-drawn strokes underneath */}

OGGI · FESTEGGIA

{data.nome}

{/* Balloons rising — bigger, more, varied */} {!paused && (

{[ { c: p.primary, x: 4, s: 36, d: 0 }, { c: p.secondary, x: 14, s: 28, d: 1.4 }, { c: p.accent, x: 88, s: 32, d: 0.6 }, { c: '#FF9FCC', x: 78, s: 26, d: 2.2 }, { c: p.primary, x: 92, s: 22, d: 3.2 }, { c: p.secondary, x: 8, s: 24, d: 4.0 }, ].map((b, i) => (

))}

)} {/* Confetti rain — bigger pieces */} {!paused && (

{Array.from({ length: 26 }).map((_, i) => { const colors = [p.primary, p.secondary, p.accent, '#FFD93D', '#FF6B9D', p.light]; return (

); })}

)} {/* Sparkles trail */} {!paused && (

{Array.from({ length: 14 }).map((_, i) => (

))}

)} {/* Bottom details slab */}

QUANDO {formatVideoDate(data.data)} · {data.ora} DOVE {data.luogo}

); } // ───────────────────────────────────────────────────────────── // SCARTALO — gift box that unwraps with explosion, invite pops out // ───────────────────────────────────────────────────────────── function FormatScartalo({ themeId, layoutId, data, paused = false }) { const [phase, setPhase] = useStateF('closed'); // closed → unwrapping → revealed const theme = THEMES[themeId]; const p = theme.palette; useEffectF(() => { if (paused) return; let t1, t2; if (phase === 'closed') { t1 = setTimeout(() => setPhase('unwrapping'), 1800); } else if (phase === 'unwrapping') { t1 = setTimeout(() => setPhase('revealed'), 1400); } else if (phase === 'revealed') { t1 = setTimeout(() => setPhase('closed'), 5500); } return () => { clearTimeout(t1); clearTimeout(t2); }; }, [phase, paused]); const onTap = () => { if (phase === 'closed') setPhase('unwrapping'); else if (phase === 'revealed') setPhase('closed'); }; const showLid = phase === 'closed'; const lidLifted = phase !== 'closed'; const showBox = phase !== 'revealed'; const showInvite = phase === 'revealed'; const showBurst = phase === 'unwrapping' || phase === 'revealed'; return (

{/* Background glow during unwrap */} {showBurst && (

)} {/* Light rays */} {showBurst && (

)} {/* Gift box */} {showBox && (

{/* Box shadow on floor */}

{/* Box body */}

{/* Vertical ribbon on body */}

{/* Sparkle on body */}

{/* Lid */}

{/* Vertical ribbon on lid */}

{/* Bow */}

{/* "Tocca per scoprire" hint */} {showLid && (

✨ TOCCA PER SCARTARE ✨

)}

)} {/* Confetti burst from box */} {showBurst && (

{Array.from({ length: 40 }).map((_, i) => { const colors = [p.primary, p.secondary, p.accent, '#FFD93D', '#FF6B9D', '#fff']; const angle = (i / 40) * Math.PI * 2; const dist = 140 + (i % 4) * 40; const dx = Math.cos(angle) * dist; const dy = Math.sin(angle) * dist; return (

); })}

)} {/* Stars trail */} {showBurst && (

{Array.from({ length: 14 }).map((_, i) => (

))}

)} {/* Invitation reveal */} {showInvite && ( <>

{/* shine sweep */}

✨ TOCCA PER RICHIUDERE

)}

); } // ───────────────────────────────────────────────────────────── // MINI-VIDEO — 14s dramatic sequence with photo + age countdown // ───────────────────────────────────────────────────────────── function FormatVideo({ themeId, layoutId, data, autoplay = true }) { const [t, setT] = useStateF(0); const [playing, setPlaying] = useStateF(autoplay); const startRef = useRefF(null); const DURATION = 14000; useEffectF(() => { if (!playing) return; let raf; startRef.current = performance.now() - t * DURATION; const tick = (now) => { const elapsed = (now - startRef.current) / DURATION; if (elapsed >= 1) { setT(0); startRef.current = now; } else { setT(elapsed); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [playing]); const theme = THEMES[themeId]; const p = theme.palette; // Phases (t = 0..1): // 0.00-0.10: dark, "Una festa che non dimenticherai..." typewriter // 0.10-0.25: photo zooms in with ken burns // 0.25-0.40: name explodes onto screen letter by letter // 0.40-0.55: age countdown 1,2,3...N with big bounce // 0.55-0.75: invitation reveal slides up, details fade in // 0.75-1.00: massive confetti + "SEI INVITATO?" pulse const tagline = "Una festa che non dimenticherai..."; const taglineProgress = Math.max(0, Math.min(1, t / 0.10)); const taglineChars = Math.floor(tagline.length * taglineProgress); const photoOpacity = t > 0.10 && t < 0.30 ? 1 : 0; const photoZoom = t > 0.10 ? 1 + (t - 0.10) * 0.6 : 1; const nameProgress = Math.max(0, Math.min(1, (t - 0.25) / 0.15)); const nome = (data.nome || 'Nome').toUpperCase(); const nameChars = Math.floor(nome.length * nameProgress); const nameOpacity = t > 0.25 && t < 0.50 ? 1 : 0; const targetAge = parseInt(data.eta, 10) || 1; const ageProgress = Math.max(0, Math.min(1, (t - 0.40) / 0.15)); const currentAge = Math.max(1, Math.min(targetAge, Math.ceil(ageProgress * targetAge))); const ageVisible = t > 0.40 && t < 0.60; const ageBounce = ageProgress < 1 ? 1 + Math.sin(ageProgress * Math.PI * targetAge * 2) * 0.08 : 1; const inviteY = t < 0.55 ? 100 : Math.max(0, 100 - (t - 0.55) * 500); const inviteOpacity = t < 0.55 ? 0 : 1; const finaleProgress = Math.max(0, Math.min(1, (t - 0.75) / 0.25)); return (

{/* Phase 0: typewriter tagline on black */} {t < 0.13 && (

{tagline.slice(0, taglineChars)} |

)} {/* Phase 1: photo or themed reveal */} {photoOpacity > 0 && (

{data.photo ? (

) : (

{/* candle */}

STA PER ARRIVARE

)} {/* dark vignette */}

)} {/* Phase 2: name big explosion */} {nameOpacity > 0 && (

8 ? 50 : 64, lineHeight: 0.95, color: p.ink, textAlign: 'center', letterSpacing: '-0.02em', }}> {nome.split('').map((ch, i) => ( {ch === ' ' ? '\u00A0' : ch} ))}

)} {/* Phase 3: age countdown with bounce */} {ageVisible && (

COMPIE

{currentAge}

{targetAge === 1 ? 'ANNO' : 'ANNI'}

)} {/* Phase 4: invitation card slides up */}

{/* floor "SEI INVITATO?" pulse */} {finaleProgress > 0 && (

SEI INVITATO/A?

)}

{/* Phase 5: confetti finale */} {finaleProgress > 0 && (

{Array.from({ length: 50 }).map((_, i) => { const colors = [p.primary, p.secondary, p.accent, '#FFD93D', '#fff']; return (

); })}

)} {/* Progress bar */}

{/* Replay */}

); } function formatVideoDate(iso) { if (!iso) return '20 Apr 2026'; const d = new Date(iso); if (isNaN(d)) return iso; const months = ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic']; return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`; } function FormattedInvite({ format, themeId, layoutId, data, paused = false }) { if (format === 'animato') return ; if (format === 'scartalo')return ; if (format === 'video') return ; return ; } Object.assign(window, { FORMATS, FormatAnimato, FormatScartalo, FormatVideo, FormattedInvite });