Cómo crear un pop-up aterrador: Diseño, temporización y ética

Crear un pop-up de miedo (para juego, web Halloween, broma) requiere más que un jumpscare. Marco responsable:

1. Disparador – Clic, profundidad scroll, temporizador (ej. 10s inactividad), intención salida. Evita auto-al-cargar.
2. Visuales – Paleta oscura, alto contraste, imágenes inquietantes (cara distorsionada, sombra, glitch). Animaciones CSS: shake, zoom, parpadeo opacidad.
3. Texto – Corto, ominoso. "No te gires." "No estás solo."
4. Audio – Crujido, susurro, estático, latido. Debe ser iniciado por usuario o muteado por defecto (política autoplay navegador).
5. Interacción – Botón cerrar (claro), "No mostrar más" (localStorage), o minijuego (clica el fantasma).
6. Prueba – Escritorio, móvil, motion reducido, lectores pantalla. Asegura foco atrapado, ESC para cerrar.
7. Ética – Sin destellos riesgo epilepsia (>3 Hz). Avisa si intenso. Nunca en banca, médica, gov, o webs infantiles. Opt-in preferible.

Stack ejemplo

• HTML/CSS/JS (vanilla o React/Vue).
• Animate.css o GSAP para movimiento.
• Howler.js para audio.
• localStorage para persistencia.

Asusta con responsabilidad. El mejor terror se anticipa, no se fuerza.