Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una web de una estación marítima en blanco y negro con un único amarillo ácido, construida alrededor de un efecto: cada letra vive en una ventana de un carácter y una columna de glifos pasa por ella como en un tablero de aeropuerto o un contador mecánico, hasta detenerse en el carácter correcto. Incluye titular gigante con dos líneas que ruedan en sentidos opuestos, un reloj en vivo que solo mueve el dígito que cambia, un tablero de salidas con estados que se actualizan, cifras que giran como odómetro y un laboratorio donde escribes tu propio rótulo y eliges dirección, orden y escalonado. Motor en JavaScript puro, accesible y sin librerías. Encaja en titulares, cifras, menús y botones de webs de transporte, eventos, tecnología o estudios creativos; cambia el amarillo por el color de tu marca.
Encaja bien en webs de
- Prompt
- ≈12.421 tokens · con Lite
- Librerías
- ninguna
- Demo
- 32,9 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
- Nombre corto (logotipo)
- Ciudad
- Titular, línea 1 (rueda hacia arriba)
- Titular, línea 2 (rueda hacia abajo)
- Color vivo (glifos en vuelo y acentos)
- Email de contacto
- Teléfono
Í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.243 palabras · ≈12.421 tokens
- Lite
- 1.797 palabras · ≈3.391 tokens
- Librerías
- ninguna
- Peso de la demo
- 32,9 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.243 palabras en el Completo y 1.797 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:- «Que el titular ruede hacia abajo en las dos líneas»
- «Cambia el amarillo ácido por un naranja eléctrico»
- «Haz el rodillo más lento y con más glifos intermedios»
- «Que las letras lleguen desde el centro hacia los lados»
- «Usa solo cifras y símbolos como glifos intermedios»
- 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
¿Lo leen bien los lectores de pantalla y Google?
Sí. Cada elemento animado conserva su texto real en un span visualmente oculto y la parte con glifos en vuelo va con aria-hidden, así que se lee la frase final desde el primer momento. Con movimiento reducido el texto queda estático y legible.
¿Cómo lo aplico a cualquier texto de mi web?
Añade data-rueda al elemento y, si quieres, data-disparo (carga, vista o hover), data-dir (arriba, abajo o alterna), data-dur, data-escalon y data-rampa para ajustar el número de glifos intermedios. El motor se monta solo al cargar la página.
¿Puedo cambiar un texto en vivo, como un marcador o un reloj?
Sí. La función poner(elemento, texto) compara con el texto anterior y hace rodar solo las letras que cambian; es lo que mueve el reloj, los estados del tablero y el rótulo del laboratorio.
¿El texto salta de ancho mientras rueda?
No. Cada carácter reserva el ancho de su letra final con un medidor invisible y los glifos intermedios se centran dentro de esa ventana, así que el resto de la línea no se mueve.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈12421 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3391 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
