Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un titular en blanco sobre negro puro, en mayúsculas monoespaciadas, que cada pocos segundos se desmorona: cada letra tiembla, cae con aceleración, gira, se encoge y se convierte en un glifo de ruido (# % & @ ░ ▒ ▓) teñido del color vivo. Deja estela, rebota y se posa en un campo de ruido que hay debajo, con ondas y esquirlas, y después sube y se recompone cambiando de glifo hasta ser la letra verdadera. Al pasar el cursor la cascada empieza al instante por donde estás, es más profunda y rápida y no para; el clic lanza una onda, el toque la activa en móvil y un botón con tecla Espacio la dispara. Todo se dibuja en un canvas 2D, sin librerías. Encaja en portadas y cierres de estudios creativos, marcas tecnológicas y webs editoriales; cambia el verde ácido por rojo, naranja o azul eléctrico.
Encaja bien en webs de
- Prompt
- ≈10.800 tokens · con Lite
- Librerías
- ninguna
- Demo
- 25,5 KB · ligero
- Prueba en frío
- pendiente
Antes de copiar
Tu marca, dentro del prompt
Cambia lo que quieras y copia: el prompt sale ya con el nombre, los colores y los textos de tu cliente. Lo que dejes en blanco se queda como en la demo.
Mete tu marca y tus colores en el prompt
Con Pro o con tu llave de regalo. Esto es lo que puedes cambiar:
- Nombre de la marca
- Ciudad
- Titular que se desmorona
- Color vivo del glifo que cae
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Librerías y esqueleto
- 03Tokens de diseño
- 04Estructura y contenido
- 05Movimiento
- 06Código clave
- 07Interacción
- 08Adaptación a móvil y tablet
- 09Accesibilidad y movimiento reducido
- 10Rendimiento
- 11Personalización
- 12Comprobación final
- Completo
- 5.915 palabras · ≈10.800 tokens
- Lite
- 1.159 palabras · ≈1.846 tokens
- Librerías
- ninguna
- Peso de la demo
- 25,5 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- sí
Tokens estimados para español (≈3,6 caracteres por token): sirven para orientarte, no son exactos.
prompt.md Pro
El prompt está en Pro
5.915 palabras en el Completo y 1.159 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
La prueba en frío
Aún sin publicar para esta pieza
En la prueba en frío pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos lo que genera con la demo. Cuando esté hecha, aquí verás la captura, el veredicto y la fecha.
Paso a paso
Cómo usarlo en 4 pasos
- 01
Personaliza
Rellena el formulario de arriba con el nombre, los colores y los textos de tu cliente. Se meten en el prompt al copiar. - 02
Copia el Completo o el Lite
El Completo, para Claude, ChatGPT, Gemini o Cursor. El Lite, más corto, para Lovable, Bolt o v0, que aceptan menos texto. - 03
Pega e itera
Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:- «Cambia el verde ácido por un rojo o un azul eléctrico»
- «Que la cascada ambiental sea más lenta y que las letras caigan menos hondo»
- «Pon un titular más largo, de tres líneas»
- «Quita las esquirlas y las ondas y deja solo la estela»
- «Invierte la pieza: fondo blanco y letras negras»
- 04
Publica
Guarda el resultado como HTML (o en tu proyecto) y súbelo a Vercel, Netlify o tu hosting de siempre. Tienes los pasos en la guía.
Licencia en claro
Qué puedes hacer con esta pieza
Todas las piezas incluyen licencia de uso comercial. Usa el resultado tal cual en tus productos, encargos freelance o webs de clientes, sin atribución.
Puedes
- Usarlo en tus webs y en las de tus clientes, también si cobras por ellas.
- Cambiarlo todo lo que quieras.
- Publicar el resultado sin citarnos.
No puedes
- Revender o regalar el prompt, la demo o el código como plantilla o biblioteca.
- Compartir tu cuenta Pro.
Es la misma licencia para lo gratis y lo Pro. La tienes entera en licencia de uso.
Preguntas frecuentes
Lo que suele preguntarse
¿Se puede leer el titular con lector de pantalla o desde Google?
Sí. El titular es un h1 real en el HTML; cuando el script arranca queda oculto solo a la vista y el lienzo lo dibuja encima, de modo que lectores de pantalla y buscadores leen siempre la frase completa, sin importar en qué fase esté la animación.
¿Qué pasa en móvil, donde no hay cursor?
El toque sustituye al cursor: al tocar la pantalla la cascada se lanza en modo intenso durante unos segundos. Además hay un botón «Tirarlo otra vez» y el titular se reparte solo en hasta cuatro líneas para llenar el ancho.
¿Puedo cambiar el titular por una frase más larga?
Sí, entre 12 y 30 caracteres funciona mejor. El script mide la fuente y reparte el texto en una a cuatro líneas buscando la letra más grande que quepa; el campo de ruido se recoloca debajo con lo que quede de alto.
¿Y si la persona tiene activado el movimiento reducido?
No hay bucle ni cascada: se dibuja una sola vez el titular en pie y un montón de ruido quieto al fondo del campo, y se oculta el botón. Si cambia el ajuste con la página abierta, la pieza se reinicia en el modo que toque.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈10800 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1846 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
