Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Sección «Cómo trabajamos» a pantalla completa sobre papel crema con curvas de nivel. En escritorio se queda fija y, al hacer scroll, una línea de tinta se dibuja por un camino SVG en S que une cinco pasos alternados arriba y abajo; el trazo se detiene un instante en cada hito, que se enciende en terracota con un halo, mientras un viajero cuenta las semanas del proyecto y un contador indica el tramo. En móvil y tableta los pasos se apilan y el camino baja ondulando por un carril lateral siguiendo la lectura. Encaja en webs de reformas, arquitectura, asesorías, clínicas o agencias que quieran explicar su método con plazos. Admite de cuatro a seis pasos y cualquier combinación de papel claro, tinta oscura y un acento.
Encaja bien en webs de
- Prompt
- ≈12.886 tokens · con Lite
- Librerías
- gsap
- Demo
- 26,7 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
- Ciudad
- Teléfono
- Email de contacto
- Color del papel (fondo)
- Color de la tinta (texto y camino)
- Color de acento (hitos y números)
Í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.544 palabras · ≈12.886 tokens
- Lite
- 1.411 palabras · ≈2.601 tokens
- Librerías
- gsap 3.15.0
- Peso de la demo
- 26,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
5.544 palabras en el Completo y 1.411 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 solo cambia en un salto de línea, así que el pin, el trazo que se para en cada hito, el viajero con las semanas, el contador y la versión móvil coinciden píxel a píxel con el original.
Prompt LiteFiel a la demo8,2/10
Reproduce bien el efecto: la sección se fija, el camino en S se dibuja con pausas en cada hito, los pasos se encienden en terracota y en móvil el camino baja por el carril. Cambian detalles: el camino entra con una subida casi vertical en vez de una curva suave desde el margen, el contador es una línea plana sin la cifra grande en Fraunces ni el nombre en terracota, y en móvil la píldora va pegada al número en vez de a la derecha del todo.
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 pasos en lugar de cinco»
- «Que el camino tarde el doble de scroll en dibujarse»
- «Cambia el acento terracota por verde oliva»
- «Quita la etiqueta de semanas del marcador»
- 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 poner cuatro o seis pasos?
Sí. El camino se calcula a partir de la posición de cada paso, así que basta con añadir o quitar pasos alternando arriba y abajo, ajustar el número de columnas y actualizar la lista de semanas y nombres.
¿Qué pasa en móvil?
No se fija la sección: los pasos se apilan en vertical y el camino baja por un carril a la izquierda, dibujándose a la altura de lectura mientras haces scroll.
¿Molesta el pin si la sección va en mitad de una página larga?
Ocupa unas 2,4 pantallas de scroll en escritorio. Si quieres que pase más rápido, reduce ese valor; el resto de la página sigue funcionando con normalidad por debajo.
¿Es accesible para quien desactiva las animaciones?
Sí. Con movimiento reducido no hay pin ni animaciones: el camino aparece completo y todos los pasos se leen desde el principio, con contraste AA.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈12886 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2601 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
