Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una sección de ponentes, equipo o reparto en negro, blanco y un único color vivo. Un titular enorme queda fijo en el centro con mezcla «exclusion»: sobre el negro es del color vivo y sobre las zonas claras de cada retrato se invierte a su complementario. Debajo pasa un muro de doce retratos dispersos, generados por código con luz de estudio y grano, que escalan de 0 a 1 y de vuelta mientras su fila cruza la pantalla, con un pequeño giro y paralaje interior. Al paso del ratón los retratos se inclinan, sus esquinas se encienden y el nombre rueda; las letras del titular se levantan; un contador con rodillo y una barra de progreso siguen al retrato activo. Al final el titular sale y aparece un cierre con botón magnético. Encaja en conferencias, equipos de estudio, agencias, jurados, castings y portafolios. Admite otro color vivo, fotos reales en lugar de lienzos y otro número de personas.
Encaja bien en webs de
- Prompt
- ≈14.128 tokens · con Lite
- Librerías
- gsap
- Demo
- 32,7 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 del evento o estudio
- Titular gigante
- Fechas
- Ciudad
- Email de contacto
- Color de fondo
- Color del texto
- Color vivo (el titular)
Í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
- 7.343 palabras · ≈14.128 tokens
- Lite
- 1.541 palabras · ≈2.638 tokens
- Librerías
- gsap 3.15.0
- Peso de la demo
- 32,7 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
7.343 palabras en el Completo y 1.541 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:- «Pon el titular en rojo #ff2d55»
- «Cambia los doce ponentes por el equipo de un estudio»
- «Que los retratos crezcan más despacio y se queden más tiempo a tamaño completo»
- «Usa fotos reales en blanco y negro en lugar de los retratos dibujados»
- 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
¿Por qué el titular cambia de color sobre los retratos?
Está fijo con mix-blend-mode: exclusion. Sobre el fondo negro se ve del color vivo; sobre blanco se invierte a su complementario y sobre grises medios casi desaparece. Por eso los retratos llevan mucho contraste. El elemento con el blend debe ser el propio sticky: si lo metes en un contenedor, el blend no verá el muro.
¿Puedo usar fotos reales en lugar de los retratos dibujados?
Sí. Sustituye cada canvas por una imagen cuadrada 4:5 con object-fit: cover y mantén el filtro grayscale(1) contrast(1.16) del marco. El escalado, el giro, el paralaje y la inclinación funcionan igual.
¿Cómo cambio el número de personas?
Edita el array PO (nombre, rol y receta del retrato) y ajusta PATRON, que reparte los índices por filas y columnas, además del «/ 12» del contador. Con más personas el muro se alarga solo.
¿Qué pasa con movimiento reducido o si GSAP no carga?
Con movimiento reducido no se registra ninguna animación: los retratos quedan a tamaño completo y el muro se recorre con scroll normal. Si GSAP no carga, la sección también queda en su estado final y legible.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈14128 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2638 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
