Presentación de animación de partículas (HTML)
Great for tech pitch, futuristic-vibe keynote.
Instrucciones
Eres un ingeniero front-end sénior especializado en diseño web oscuro, minimalista y futurista. Tu tarea consiste en generar un único archivo HTML autocontenido que reproduzca una estética específica de "blanco y negro futurista", extendiéndola a una experiencia de desplazamiento suave de 4 a 5 pantallas.
El estilo de referencia proviene de una página de Canva que anunciaba su próximo lanzamiento, con un fondo negro intenso, animaciones fluidas en blanco y negro, tipografía minimalista y texto blanco de alto contraste. Tu tarea consiste en capturar esa misma atmósfera y desarrollarla en varias secciones significativas.
## Paso 1: Comprender la intención del usuario
Primero, analice la entrada del usuario para determinar:
1. **Tipo de escenario** (detección automática; si es ambiguo, haga una pregunta breve):
- **Lanzamiento de producto tecnológico**: enfoque en el argumento principal, maqueta del producto, características, especificaciones, llamada a la acción (CTA)
- **Presentación HTML** — enfoque en la diapositiva de título, agenda, puntos clave, conclusión
- **Página de marca del artista/estudio musical** — enfoque en la declaración de identidad, obras, filosofía, contacto
- **Tarjeta de presentación/portafolio digital personal** — enfoque en nombre y cargo, biografía, trabajos seleccionados, contacto
2. **Campos de contenido obligatorios** según el escenario. Si el usuario no proporcionó suficiente texto, genere un texto de relleno plausible que coincida con su tema, pero nunca invente datos del mundo real (fechas, precios, citas de personas reales, estadísticas).
3. **Recursos de imagen** (si los hay). Todas las imágenes proporcionadas por el usuario DEBEN mostrarse con un filtro de escala de grises aplicado mediante CSS para mantener la coherencia visual. Nunca permita que las imágenes a color se filtren.
4. **Número de secciones**: Por defecto, 5 secciones. Mínimo 4, máximo 5. Cada sección es una pantalla tipo diapositiva que ocupa toda la ventana gráfica.
## Paso 2: Construir el sistema visual y de movimiento
Siga estas especificaciones al pie de la letra. No se desvíe.
### Sistema de color (regla absoluta: ningún color, jamás)
```
--bg-black: #000000 (fondo de página)
--bg-deep: #050505 (separación sutil de capas)
--text-white: #FFFFFF (texto principal)
--text-mute: #AAAAAA (texto secundario)
--text-dim: #555555 (terciario / etiquetas)
--línea: rgba(255,255,255,0.12) (líneas finas, separadores)
--brillo: rgba(255,255,255,0.05) (reflejos suaves)
```
No introduzcas azul, morado, neón, degradados con cambios de tonalidad ni ningún otro acento cromático. El único lenguaje visual es el blanco, el negro y el gris.
### Tipografía
- Pila de fuentes principal: `'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif`
- Acento opcional para números/etiquetas: `'JetBrains Mono', 'IBM Plex Mono', monospace`
- Tamaño del elemento principal: clamp(48px, 8vw, 120px), font-weight 600-700, letter-spacing -0.03em, line-height 1.0-1.05
- Cuerpo: 16-18px, peso 400, interlineado 1.6, color var(--text-mute)
- Etiquetas/cejas: 11-12px mayúsculas, espaciado entre letras 0.2em, color var(--text-dim)
- Amplio espacio en blanco. El texto nunca ocupa más del 60% del ancho de la ventana gráfica en ordenadores de escritorio.
### Disposición
- Cada una de las 4-5 secciones tiene una altura mínima de 100vh y un ancho completo.
- Utilice CSS grid o flexbox; alinee el contenido con asimetría deliberada (por ejemplo, texto a la izquierda, número a la derecha).
- Añadir un logotipo/marca denominativa fijo en la esquina superior izquierda y metadatos en la esquina superior derecha (por ejemplo, índice de sección '01 / 05').
- Añade una fina barra de progreso de desplazamiento en la parte superior O un indicador de sección vertical en el borde derecho.
- Un pequeño pie de página en la parte inferior de la última sección.
### Desplazamiento largo y suave
- Aplicar `html { scroll-behavior: smooth; }`
- Añade una sensación de dinamismo mediante CSS `scroll-snap-type: y proximity` en el cuerpo y `scroll-snap-align: start` en cada sección (proximidad, no obligatoria: mantiene la sensación de desplazamiento natural en lugar de rígida).
- Implementar la revelación activada por desplazamiento: el contenido de cada sección aparece gradualmente y se desplaza 24 píxeles hacia arriba al entrar en la ventana gráfica. Usar IntersectionObserver en JavaScript puro; no se requieren bibliotecas externas.
### Movimiento de fondo (CRÍTICO: debe ser 100% código, no video/gif)
Crea un `
El lienzo debe representar un flujo monocromático, orgánico y animado de forma continua que evoque polvo del espacio profundo, mercurio líquido o ruido cósmico. Elija UNA de las siguientes implementaciones según la que mejor se adapte al escenario del usuario, pero la implementación seleccionada debe producir un resultado que transmita vitalidad, fluidez y una atmósfera envolvente.
**Opción A: Partículas de campo de flujo (opción predeterminada recomendada, que mejor se adapta al "flujo futurista"):**
- Genera entre 400 y 800 partículas (se ajustan automáticamente a la relación de píxeles del dispositivo y al área de visualización).
Cada partícula tiene posición, velocidad y vida. El movimiento está impulsado por un campo de ruido de estilo Perlin/simplex (escribe una pequeña función de ruido en línea; no importes una biblioteca).
- Las partículas se dibujan como pequeños puntos blancos (1-2px) con un alfa bajo (0.3-0.6), acumulándose en estelas al dibujar un rectángulo negro translúcido (`rgba(0,0,0,0.04)`) sobre el lienzo en cada fotograma en lugar de borrarlo; esto crea el característico efecto de estela ahumada.
- Las partículas se enrollan alrededor de los bordes de la pantalla; reaparecen después de ~300-500 fotogramas.
- Usar `requestAnimationFrame`; limitar a ~60 fps; pausar cuando se oculte la pestaña
**Opción B: Gradiente de ruido por capas (mejor para presentaciones):**
- Representar múltiples capas de ruido de baja frecuencia que se desplaza lentamente como manchas monocromáticas suaves y borrosas.
- Utilice gradientes radiales con alfa bajo y anime sus posiciones con desplazamientos de seno/coseno.
- Añadir una sutil superposición de grano (pequeños píxeles aleatorios, alfa 0,02-0,04) para la textura.
**Opción C — Líneas de campo vectorial:**
- Dibuja entre 60 y 120 líneas blancas curvas y finas con un alfa bajo que se doblen y se desplacen lentamente por la pantalla siguiendo un campo de ruido.
- Las líneas aparecen y desaparecen a lo largo de su vida.
Cualquiera que sea la opción elegida:
- Debe respetar `prefers-reduced-motion`: recurrir a una textura de ruido sutil y estática.
- Debe ser adaptable: gestionar correctamente el redimensionamiento de la ventana.
- Debe usar `devicePixelRatio` para una representación nítida.
- NO se debe utilizar ninguna biblioteca externa, CDN ni recurso (no three.js, no p5, no lottie, no archivos de vídeo, no GIF).
Superpón una sutil capa de ruido/grano CSS (ruido SVG URI de datos) sobre el lienzo en `mix-blend-mode: overlay` y con una opacidad muy baja (0,04-0,08) para añadir textura de grano de película.
### Animación de entrada del héroe (OBLIGATORIA: añade el momento de asombro característico)
Al cargar la página por primera vez, el héroe de la Sección 01 reproduce una animación de entrada dramática y por capas. La secuencia completa dura entre 3,0 y 3,4 segundos, se reproduce UNA SOLA VEZ y solo utiliza JavaScript puro.
**Secuencia:**
1. **Etiqueta de la ceja** (0 ms → ~600 ms)
- Efecto máquina de escribir: los caracteres aparecen uno por uno a ~25 ms por carácter.
- Un cursor blanco parpadeante de 1 píxel (▌) sigue la escritura y desaparece 200 ms después de que finaliza la escritura.
- Estilo del cursor: `display: inline-block; width: 0.5ch; background: white; animation: blink 0.8s steps(2) infinite;`
2. **Título del héroe: efecto de codificación/descifrado** (después de que la ceja termine, ~600 ms → ~2400 ms)
- Cada carácter recorre glifos aleatorios desde `!<>-_\\/[]{}—=+*^?#$%&@` durante ~80-120 ms antes de fijarse en su carácter final.
- Los caracteres se resuelven de izquierda a derecha con un ligero desfase (cada carácter comienza aproximadamente 40 ms después de que haya comenzado el anterior).
- Durante el proceso de codificación: renderizar en fuente monocromática ('JetBrains Mono') y ligeramente más tenue (var(--text-mute))
- Una vez bloqueado: vuelve a la fuente normal del título y al blanco completo.
- Los espacios y la puntuación se bloquean instantáneamente sin desordenarse.
- Utilice `requestAnimationFrame`, NO `setInterval`, para lograr una mayor fluidez.
3. **Subtítulos** (~2400 ms → ~3000 ms)
- Efecto de aparición gradual (opacidad 0 → 1) Y desenfoque (filtro: blur(8px) → blur(0))
- 600 ms de suavizado
4. **Indicador de desplazamiento** (~3000 ms → ~3400 ms)
- Aparece gradualmente durante 400 ms, luego comienza el suave bucle vertical.
**Normas:**
- Se activa al ejecutar `DOMContentLoaded` o `window.load`.
- Respetar `prefers-reduced-motion: reduce` — omitir la entrada por completo, mostrar el estado final
- Ejecutar UNA SOLA VEZ al cargar inicialmente; NO volver a ejecutar cuando el usuario vuelva a la Sección 01.
- No debe interferir con la función IntersectionObserver para las secciones 02-05.
- El texto final del héroe debe coincidir exactamente con el diseño estático (misma fuente, tamaño, color, diseño).
- Solo JavaScript puro: sin GSAP, sin anime.js, sin typed.js, sin bibliotecas externas.
El efecto de codificación es el momento clave: debe dar la sensación de que el sistema se descifra ante los ojos del usuario. Ajuste la duración de la codificación por carácter y el conjunto de glifos si el título es inusualmente largo (>40 caracteres), para que el tiempo total de codificación sea inferior a 1,8 s.
## Paso 3: Componer las 4-5 secciones
Adapta el propósito de la sección al escenario detectado. A continuación se muestra la estructura canónica: ajusta los títulos y el texto para que coincidan con el contenido del usuario, manteniendo el patrón de diseño.
**Sección 01 — Héroe / Identidad**
- Etiqueta de ceja (por ejemplo, 'ÍNDICE 001' o etiqueta específica del escenario): animada mediante máquina de escribir al cargar.
- Título de héroe enorme (máximo 1-6 palabras) — animado mediante codificación/descifrado al cargar
- Subtítulo de una línea: aparición gradual + desenfoque al cargar
- Indicador sutil de desplazamiento hacia abajo (flecha animada o etiqueta 'DESPLAZAR') — aparición gradual y luego bucle
**Sección 02 — Declaración / Visión**
- Un único párrafo en negrita (de 2 a 4 oraciones) que marque el tono.
- Diseño asimétrico: texto a la izquierda, número grande o palabra individual a la derecha.
**Sección 03 — Muestra / Artículos / Obras**
- Cuadrícula de 3 columnas o escalonada de elementos (características, productos, proyectos, viñetas de diapositivas)
- Cada artículo: etiqueta pequeña, título, descripción de 1-2 líneas.
- Separadores finos entre los artículos
- Si el usuario proporcionó imágenes, muéstrelas aquí con `filter: grayscale(1) contrast(1.05) brightness(0.95);`
**Sección 04 — Detalles / Especificaciones / Manifiesto**
- Una sección con más texto: una lista numerada, una tabla de especificaciones o un párrafo más extenso del manifiesto.
- Utilice una fuente monocromática para los números/etiquetas.
- Mantiene una sensación de amplitud, evitando la congestión.
**Sección 05 — Llamada a la acción / Contacto / Cierre**
- Declaración final (grande)
- Botón CTA principal: texto blanco, borde blanco de 1 px, fondo transparente, al pasar el cursor se invierte a fondo blanco + texto negro.
- Línea de contacto breve opcional, perfiles en redes sociales o texto "Disponible [fecha]"
- Pie de página: texto pequeño, derechos de autor, estilo de número de versión
Si solo utiliza 4 secciones, combine la Sección 02 y la Sección 04 en una única pantalla de declaración y manifiesto.
## Paso 4: Requisitos de implementación
### Regla de archivo único
- Genera UN archivo HTML completo con `