Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un pie de página que espera fijo debajo de la web: al llegar al final, la última sección sube como un telón de teatro, con el borde curvado (el centro se iza antes que los lados y se arquea más si bajas rápido), pliegues y sombra sobre el pie. Mientras tanto la sala se ilumina, la marca gigante emerge letra a letra y, al pasar el cursor, cada letra gana peso, se redondea y se tiñe de brasa con un halo que la sigue; en móvil una ola la recorre sola. Incluye reloj local en vivo con esfera y estado de abierto o cerrado, newsletter validada, columnas de enlaces y volver arriba. Encaja en estudios, hoteles, restaurantes y marcas con presencia local. Funciona en papel y carbón, pero también en arena y azul noche o en blanco y verde botella.
Encaja bien en webs de
- Prompt
- ≈14.089 tokens · con Lite
- Librerías
- gsap
- Demo
- 30,3 KB · ligero
- Prueba en frío
- 9,6/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
- Zona o región
- Coordenadas
- Zona horaria (IANA)
- Correo de contacto
- Teléfono
- Color de la página (telón)
- Color de fondo del pie
- Color de acento (brasa)
Í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.587 palabras · ≈14.089 tokens
- Lite
- 1.436 palabras · ≈2.691 tokens
- Librerías
- gsap 3.15.0
- Peso de la demo
- 30,3 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.587 palabras en el Completo y 1.436 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,6/10
Prácticamente un calco: mismas capturas en escritorio y móvil, el mismo telón curvo con pliegues y sombra, y la misma marca que se enciende con el cursor. Solo cambia algún color escrito a mano, que ahora sale de la variable del acento, sin diferencia visible.
Prompt LiteFiel a la demo7,9/10
El telón curvo, el descubrimiento del pie, la marca viva y el reloj funcionan con los mismos valores que el original. Cambian detalles de acabado: el botón de suscripción es una píldora naranja rellena, la barra legal va en letra de texto y no en mono, el grano es más marcado y la parte clara tiene más aire vertical.
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 telón se arquee más, como un telón de teatro de verdad»
- «Cambia la brasa por un verde botella y el papel por blanco roto»
- «Que la marca reaccione al cursor sin cambiar de color, solo de peso»
- «Añade una cuarta columna de enlaces con el horario de apertura»
- 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 un pie más alto que la pantalla?
Sí. La pieza reduce la marca gigante lo justo para que el pie quepa entero; si ni así cabe (móviles muy bajos), el pie pasa a entrar con scroll normal y conserva el resto de efectos.
¿Puedo poner un nombre de marca largo?
Sí: la marca se parte en letras con JavaScript a partir del texto. Con más de 8 letras conviene bajar el tamaño de 28vw a 22vw para que el cambio de peso no la apriete.
¿El reloj muestra la hora de mi ciudad aunque el visitante esté en otro país?
Sí. Usa la zona horaria que indiques (por ejemplo Europe/London o America/New_York), no la del navegador, y calcula con ella si el negocio está abierto.
¿Se puede usar en WordPress o en Webflow?
Sí. Es HTML, CSS y un script con GSAP por CDN; basta con que el pie vaya justo después del contenido principal y que ningún contenedor tenga overflow: hidden, que rompería el sticky.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈14089 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2691 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
