Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una sección de contacto que parece un plano grabado a mano: un tramo de costa en SVG con batimetría, curvas de nivel, calles con su nombre siguiendo la curva, manzanas y pinar generados por código, puerto con dique, faro con un haz que gira y veleros a la deriva. El pin terracota cae con rebote sobre el paseo marítimo y late. Tres chips dibujan la ruta a pie desde el aparcamiento, el bus o el puerto con un punto que camina hasta la puerta, con distancia y minutos. Al lado, el estado «abierto ahora / cierra pronto / cerrado» calculado con la hora de la zona del negocio, el horario con el día de hoy marcado, botones de llamar, WhatsApp y cómo llegar y un formulario corto con validación accesible. Encaja al final de la landing de un restaurante, bar de playa, hotel o escuela náutica de costa; cambia la paleta de papel y tinta o el acento para adaptarlo a tu marca.
Encaja bien en webs de
- Prompt
- ≈16.170 tokens · con Lite
- Librerías
- ninguna
- Demo
- 38,6 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 del negocio
- Tipo de negocio
- Dirección
- Código postal
- Ciudad
- Provincia
- Zona o barrio del mapa
- Nombre de la playa
- Coordenadas
- Teléfono
- WhatsApp (solo cifras, con prefijo)
- Color de acento
- Color de la tinta
- Color del papel
- Color del mar
Í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
- 6.627 palabras · ≈16.170 tokens
- Lite
- 1.677 palabras · ≈3.022 tokens
- Librerías
- ninguna
- Peso de la demo
- 38,6 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
6.627 palabras en el Completo y 1.677 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 idéntica al original: misma carta náutica, pin con muelle y ondas, rutas que se dibujan y se alternan cada 6,5 s, estado «abierto ahora» en vivo y formulario. Lo que cambia entre capturas (ruta activa, ángulo del haz del faro, hora) solo se debe al momento en que se hizo la foto, no al código.
Prompt LiteFiel a la demo7,4/10
El mapa, las rutas animadas, el faro, el estado en vivo y el formulario están, y con los mismos colores y la misma estructura. Cambian detalles de acabado: la etiqueta del pin queda debajo en vez de arriba a la derecha, el «07» sale en píldora rellena, hay más texto en monoespaciada (horario, rótulos y pie), los datos de contacto van en filas y el botón de enviar es azul noche y ocupa todo el ancho.
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:- «Cambia el horario para que abra de 9:00 a 14:00 de lunes a sábado»
- «Pasa el mar a azul marino y el acento a amarillo mostaza»
- «Añade una cuarta ruta a pie desde la estación de tren»
- «Quita el formulario y deja solo los botones de contacto»
- 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
¿El mapa es real? ¿Puedo poner el de mi zona?
Es un tramo de costa ficticio dibujado en SVG. Para parecerse a tu zona basta con editar un único trazado de costa y los de las calles; la batimetría, las curvas de nivel, los edificios y las olas se recolocan solos.
¿El «abierto ahora» funciona de verdad?
Sí. Calcula el estado con la hora de la zona del negocio a partir de un objeto HORARIO editable (con franjas partidas y cierre a medianoche) y se actualiza cada 20 segundos.
¿El formulario envía los mensajes?
No: valida y simula el envío. Para recibirlos, conecta el evento submit a tu servicio de formularios o a tu backend; el resto del flujo (errores, estado enviando y confirmación) ya está hecho.
¿Pesa mucho o gasta batería?
No usa WebGL ni imágenes: es un SVG de menos de 40 KB. Las animaciones se pausan cuando la sección no se ve y respeta el modo de movimiento reducido.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈16170 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3022 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
