Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una revista de arquitectura ficticia sirve de escaparate para cinco formas de revelar un titular grande al hacer scroll. En «Ascenso» cada línea sube desde debajo de su máscara; en «Bisagra» entra girando sobre su esquina; en «Palabra a palabra» las palabras suben en cascada dentro de su línea; en «Caída» bajan desde arriba, y en «Enfoque» pasan de desenfocadas a nítidas sin máscara. En todas, la palabra en cursiva recibe un barrido de color cuando su línea ya ha llegado. Cada variante trae su ficha con duraciones y curvas y un botón para repetirla. Las líneas se recalculan solas al cambiar el ancho, respeta el movimiento reducido y el lector de pantalla lee la frase entera. Encaja en portadas, cabeceras de sección, landings editoriales, estudios de arquitectura, restaurantes o marcas personales; funciona en claro, oscuro o sobre un color de marca.
Encaja bien en webs de
- Prompt
- ≈11.768 tokens · con Lite
- Librerías
- gsap
- Demo
- 23,6 KB · ligero
- Prueba en frío
- 9,8/10 · 30-09-2026
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
- Email de contacto
- Teléfono
- Precio de la suscripción anual
- Color de fondo claro (papel)
- Color del texto y fondo oscuro (tinta)
- Color de las cursivas sobre claro
- Color de las cursivas sobre oscuro
- Color de la sección de marca (barro)
Í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
- 6.066 palabras · ≈11.768 tokens
- Lite
- 1.671 palabras · ≈2.984 tokens
- Librerías
- gsap 3.15.0
- Peso de la demo
- 23,6 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
6.066 palabras en el Completo y 1.671 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
Lo que salió al pegarlo en frío
Pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos el resultado con la demo. Prueba hecha el 30-09-2026.
Prompt CompletoFiel a la demo9,8/10
Calco prácticamente exacto: mismo código, mismas capturas en escritorio y móvil, y las cinco variantes animan con los mismos valores, curvas y disparadores. No se aprecia ninguna diferencia visible.
Prompt LiteFiel a la demo7,4/10
El efecto clave sale igual: titulares, máscaras, las cinco variantes con sus valores y el barrido de color de la cursiva. Cambia la maquetación de apoyo: fichas en tarjeta con borde y etiquetas en mayúsculas, índice sin rótulo, cifras de la 03 centradas y a todo el ancho con la ficha debajo, y el botón de la 05 apilado sobre la nota. Además, la barra de progreso sale en color de acento y los fundidos secundarios no se reinician al volver a subir.
Solo publicamos lo que hemos probado. Otras herramientas (ChatGPT, Gemini, Lovable…) pueden dar resultados distintos.
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:- «Usa solo la variante «Ascenso» en todos los titulares de mi web»
- «Que las líneas suban más despacio y con más separación entre ellas»
- «Cambia la tipografía de los titulares a una serifa más cálida con cursiva»
- «Que la cursiva se tiña de azul añil en lugar de terracota»
- «Haz que los titulares se repitan cada vez que vuelven a entrar en pantalla»
- 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
¿Puedo usar solo una de las cinco variantes?
Sí. Cada titular elige su variante con el atributo data-v; copia las reglas .hl, .mk y la función titular() y marca tus titulares con la que quieras.
¿Qué pasa si el titular cambia de líneas al girar el móvil?
SplitText vuelve a partir el texto al cambiar el ancho o al cargar las fuentes, y la animación continúa en el mismo punto sin solapes.
¿Es accesible para lectores de pantalla?
Sí. El titular conserva su texto completo en un aria-label y las líneas partidas se ocultan al lector; con movimiento reducido todo aparece quieto y legible.
¿Necesito pagar por SplitText?
No. Desde GSAP 3.13 todos los plugins, SplitText incluido, son gratuitos; se cargan por jsDelivr en la versión 3.15.0.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11768 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2984 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
