\n \n Aquí va la foto\n

\n );\n}\n\nfunction Confeti() {\n const piezas = useMemo(\n () =>\n Array.from({ length: 16 }).map((_, i) => ({\n id: i,\n x: Math.random() * 100,\n delay: Math.random() * 16,\n dur: 16 + Math.random() * 14,\n size: 5 + Math.random() * 6,\n op: 0.14 + Math.random() * 0.18,\n color: [\"#A63A4E\", \"#D98A94\", \"#26313F\", \"#C9AE8B\"][i % 4],\n })),\n [],\n );\n return (\n

\n {piezas.map((p) => (\n \n ))}\n

\n );\n}\n\nfunction useRevelar(activo: boolean) {\n useEffect(() => {\n if (!activo) return;\n const els = Array.from(document.querySelectorAll(\".rev\"));\n const io = new IntersectionObserver(\n (entries) => {\n entries.forEach((e) => {\n if (e.isIntersecting) {\n e.target.classList.add(\"vis\");\n io.unobserve(e.target);\n }\n });\n },\n { threshold: 0.1, rootMargin: \"0px 0px -40px 0px\" },\n );\n els.forEach((el) => io.observe(el));\n return () => io.disconnect();\n }, [activo]);\n}\n\nfunction Contador() {\n const [ahora, setAhora] = useState(() => Date.now());\n useEffect(() => {\n const t = setInterval(() => setAhora(Date.now()), 1000);\n return () => clearInterval(t);\n }, []);\n\n const inicio = new Date(CONFIG.fechaInicio).getTime();\n const diff = Math.max(0, ahora - inicio);\n const seg = Math.floor(diff / 1000);\n const dias = Math.floor(seg / 86400);\n const horas = Math.floor((seg % 86400) / 3600);\n const mins = Math.floor((seg % 3600) / 60);\n const segs = seg % 60;\n\n const anios = Math.floor(dias / 365);\n const resto = dias % 365;\n const frase = anios > 0\n ? (anios === 1 ? \"Un año\" : anios + \" años\") +\n (resto > 0 ? \" y \" + resto + (resto === 1 ? \" día\" : \" días\") : \"\")\n : dias + (dias === 1 ? \" día\" : \" días\");\n\n const items = [\n { n: dias, l: dias === 1 ? \"día\" : \"días\" },\n { n: horas, l: horas === 1 ? \"hora\" : \"horas\" },\n { n: mins, l: \"min\" },\n { n: segs, l: \"seg\" },\n ];\n\n return (\n <>\n

\n {items.map((it, i) => (\n

\n {String(it.n).padStart(2, \"0\")}\n {it.l}\n

\n ))}\n

{frase} juntos, y siguen contando

\n \n );\n}\n\nfunction Polaroid({ foto, i, onAbrir }: any) {\n const rots = [-2.4, 1.8, -1.2, 2.6, -3, 1.4];\n return (\n \n foto.url && onAbrir(foto)}\n role={foto.url ? \"button\" : undefined}\n tabIndex={foto.url ? 0 : undefined}\n onKeyDown={(e: any) => {\n if (foto.url && (e.key === \"Enter\" || e.key === \" \")) onAbrir(foto);\n }}\n >\n \n

\n {foto.url\n ? {foto.nota}

\n : }\n

{foto.nota}

\n \n \n );\n}\n\nfunction TarjetaRazon({ texto, i }: any) {\n const [abierta, setAbierta] = useState(false);\n return (\n setAbierta(!abierta)}\n aria-expanded={abierta}\n >\n \n \n ábreme\n \n {texto}\n \n );\n}\n\nfunction App() {\n const [abierto, setAbierto] = useState(false);\n const [abriendo, setAbriendo] = useState(false);\n const [secreto, setSecreto] = useState(false);\n const [lightbox, setLightbox] = useState(null);\n const [sonando, setSonando] = useState(false);\n const audioRef = useRef(null);\n\n useRevelar(abierto);\n\n useEffect(() => {\n document.body.classList.toggle(\"bloqueado\", !abierto);\n }, [abierto]);\n\n const abrir = () => {\n if (abriendo) return;\n setAbriendo(true);\n if (CONFIG.musicaUrl && audioRef.current) {\n audioRef.current.play().then(() => setSonando(true)).catch(() => {});\n }\n setTimeout(() => setAbierto(true), 1400);\n };\n\n const toggleMusica = () => {\n const a = audioRef.current;\n if (!a) return;\n if (a.paused) {\n a.play().then(() => setSonando(true)).catch(() => {});\n } else {\n a.pause();\n setSonando(false);\n }\n };\n\n return (\n

\n \n\n {/* ── PORTADA ── */}\n

\n para {CONFIG.apodo} · de{\" \"}\n {CONFIG.tuNombre}\n

{CONFIG.titulo}

{CONFIG.subtitulo}

\n\n {\n if (e.key === \"Enter\" || e.key === \" \") abrir();\n }}\n aria-label=\"Abrir la carta\"\n >\n \n

\n\n {!abierto\n ? (\n

\n {abriendo ? \"\" : \"toca el sobre\"}\n

\n )\n :

desliza hacia abajo ↓

}\n \n\n {/* ── ÁLBUM ── */}\n {abierto && (\n

\n \n {CONFIG.notaCorta.map((l, i) => (\n

{l}

\n ))}\n

\n\n

desde el 16 de mayo de 2025

\n \n

\n\n

Un año de nosotros

\n Algunas pruebas de lo que hemos vivido hasta ahora.\n

\n {CONFIG.fotos.map((f, i) => (\n \n ))}\n

\n\n

Ahora unas fotos tuyas

\n Nomás pa mostrar lo hermosa que te ves.\n

\n {CONFIG.retratos.map((f, i) => (\n f.url && setLightbox(f)}\n >\n

\n {f.url\n ? {f.nota}

\n : }\n

\n {f.nota}\n

\n ))}\n \n

\n\n

Por qué te amo

\n Toca cada sello. Cada uno guarda una razón.\n

\n {CONFIG.razones.map((r, i) => (\n \n ))}\n

\n\n \n

\n )}\n\n {lightbox && (\n setLightbox(null)}\n >\n

e.stopPropagation()}>\n

{lightbox.nota}

\n \n

\n \n )}\n\n {secreto && (\n setSecreto(false)}\n >\n

e.stopPropagation()}>\n {CONFIG.gifSecreto && (\n $\"sorpresa\"$ \n )}\n

{CONFIG.textoSecreto}

\n \n setSecreto(false)}\n >\n cerrar\n \n

\n \n )}\n\n {CONFIG.musicaUrl && (\n <>\n

Code