Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Sección de servicios para un estudio de reformas en la que cinco tarjetas de color tierra se quedan fijas al hacer scroll y se apilan como fichas de archivador. Cada una se detiene un poco más abajo que la anterior, así que sus pestañas con número, nombre y plazo siguen a la vista. Las de atrás se encogen desde su borde superior y se oscurecen poco a poco. A la izquierda, un raíl fijo con un contador gigante que rueda del 01 al 05, el nombre del servicio, una barra de progreso y un índice para saltar a cada tarjeta. Cada ficha trae una lámina con un dibujo lineal que se traza al ritmo del scroll. En móvil el raíl pasa a ser una barra fija arriba. Encaja en webs de servicios, estudios, clínicas o asesorías, en la sección de servicios, tarifas o proceso de trabajo. Admite cualquier paleta de cinco colores y de cuatro a seis tarjetas.
Encaja bien en webs de
- Prompt
- ≈14.081 tokens · con Lite
- Librerías
- gsap
- Demo
- 32 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 del negocio
- Zona de trabajo (rótulo de portada)
- Ciudad
- Teléfono
- Color de fondo
- Color de acento
- Color de la tarjeta 1
- Color de la tarjeta 2
- Color de la tarjeta 3
- Color de la tarjeta 4
- Color de la tarjeta 5
Í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.619 palabras · ≈14.081 tokens
- Lite
- 1.684 palabras · ≈3.060 tokens
- Librerías
- gsap 3.15.0
- Peso de la demo
- 32 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.619 palabras en el Completo y 1.684 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 exacto: el código coincide con la demo línea a línea y las capturas de escritorio y móvil son idénticas, con el mismo apilado, velo, escala, contador rodante y láminas trazadas con el scroll. No cambia nada visible.
Prompt LiteFiel a la demo7,2/10
El apilado, el velo, la escala, el contador, la barra y el trazado ligado al scroll funcionan igual que en el original. Cambian bastantes detalles de tipografía y maquetación: marca y nombre del raíl en serif, pestañas en mono y mayúsculas, rótulos de cifras y muestras sin versalitas, la primera tarjeta ya no asoma en la portada, el titular del cierre va en una sola línea, el pie no va en mono y los dibujos de las láminas son otros.
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:- «Pon seis tarjetas en lugar de cinco»
- «Que las tarjetas de atrás encojan menos y no se oscurezcan tanto»
- «Cambia la paleta a tonos de mar: arena, turquesa, azul marino y blanco»
- «Sustituye las láminas por iconos lineales de mi sector»
- 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 tener más o menos de cinco servicios?
Sí. Cambia la variable --n, añade o quita tarjetas con su índice --i y ajusta las tiras del contador y de nombres. El script calcula el resto solo.
¿Funciona bien en móvil?
Sí. El raíl lateral se convierte en una barra fija con el contador y la barra de progreso, las pestañas se reducen a 38 px y en pantallas bajas se ocultan los incluidos para que nada se corte.
¿Qué pasa si alguien tiene activado reducir movimiento?
Las tarjetas se muestran como una lista normal, sin fijarse ni encogerse, con las láminas ya dibujadas. Todo el contenido sigue siendo legible y navegable.
¿Puedo usarlo con Lenis u otro scroll suave?
No es recomendable: el apilado usa position: sticky nativo y la escala se calcula con el scroll real. Con un scroll suavizado ambos se desincronizan.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈14081 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3060 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
