Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Portada editorial con la palabra de la marca a toda anchura en Bodoni. La O está dibujada en SVG a partir de la O real de la fuente, medida en un canvas, y su ojo es un agujero de verdad en el papel: dentro se ve, en miniatura, un paisaje de sierras al atardecer. Al cargar, las letras suben y el ojo se abre como un párpado. Al hacer scroll la palabra escala de forma exponencial alrededor del ojo, que se centra en pantalla hasta cubrirla por completo, mientras el paisaje crece con paralaje entre sus sierras. Después entra el texto de la sección con líneas que suben desde su máscara. Encaja en portadas de estudios de arquitectura, hoteles con vistas, bodegas o marcas con nombre corto que contenga una O. El paisaje admite otra paleta, como un amanecer frío en azules.
Encaja bien en webs de
- Prompt
- ≈12.790 tokens · con Lite
- Librerías
- gsap
- Demo
- 29,1 KB · ligero
- Prueba en frío
- 9,7/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 del estudio
- Palabra gigante (debe contener una O)
- Ciudad
- Dirección
- Teléfono
- Color del papel
- Color de la tinta
- Color de acento
Í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.601 palabras · ≈12.790 tokens
- Lite
- 1.214 palabras · ≈2.346 tokens
- Librerías
- gsap 3.15.0
- Peso de la demo
- 29,1 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.601 palabras en el Completo y 1.214 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,7/10
Calco prácticamente exacto: portada, O-ventana medida sobre la fuente, zoom exponencial con paralaje, revelado del método y pie coinciden fotograma a fotograma en escritorio y móvil. Lo único que cambia es una meta description que falta.
Prompt LiteFiel a la demo7,2/10
El efecto central sale igual: misma O-ventana, zoom exponencial hasta llenar la pantalla, paralaje de sierras y paisaje idéntico a mitad de recorrido. Cambian los detalles de maquetación: la ceja va centrada, la cabecera y la pista van en versalitas, el contacto pierde sus etiquetas y las coordenadas, y en móvil el «fig. 1» se sale de la pantalla y desaparece la definición.
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:- «Que el zoom dure el doble de scroll»
- «Cambia el atardecer por un amanecer frío en azules»
- «Usa la palabra HOGAR y atraviesa su O»
- «Que el texto de la sección aparezca letra a letra»
- 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
¿Funciona con cualquier palabra?
Con cualquiera que tenga una O: el código atraviesa la primera que encuentra y mide su ojo en un canvas, así que se adapta al tamaño y a la fuente. Si tu marca no tiene O, usa una palabra de apoyo como HOGAR, SOL u OLIVO.
¿Puedo poner una foto en lugar del paisaje?
Sí. Sustituye el SVG de la escena por tu imagen a pantalla completa con object-fit: cover y conserva el mismo origen de escala; el agujero del papel la descubrirá igual.
¿Va bien en móvil?
Sí. La palabra se ajusta al 90 % del ancho, la sección fijada es más larga para el dedo y el escenario usa 100lvh con margen para la barra del navegador. Con movimiento reducido el zoom se cambia por fundidos cortos.
¿Por qué se ve nítida la O aunque escale casi veinte veces?
Porque es un trazado SVG y el lienzo no lleva will-change: el navegador la vuelve a dibujar a cada escala en lugar de ampliar una imagen.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈12790 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2346 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
