Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una carta de restaurante con aire de menú impreso: papel crema con grano, titular en serif de alto contraste y precios con línea de puntos. A la izquierda, fijo, el filtro «Quiero la carta sin:» con los 14 alérgenos de declaración obligatoria como píldoras con icono SVG propio; al pulsar una, una raya diagonal se dibuja sobre el icono. A la derecha, pestañas de entrantes, principales, postres y vinos con contadores de platos aptos. Los platos que llevan lo que evitas se atenúan, marcan en color el alérgeno que choca, avisan con «Lleva gluten y lácteos» y se reordenan con GSAP Flip bajo un separador. Accesible con teclado y lector de pantalla, sin animaciones con movimiento reducido. Encaja en webs de restaurantes, bistrós, hoteles con cocina y obradores. Funciona igual en tono oscuro o con otro acento.
Encaja bien en webs de
- Prompt
- ≈14.749 tokens · con Lite
- Librerías
- gsap
- Demo
- 34,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 restaurante
- Temporada de la carta
- Ciudad
- Año de fundación
- Teléfono
- Color del papel (fondo)
- Color de la tinta (texto)
- 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
- 7.098 palabras · ≈14.749 tokens
- Lite
- 1.891 palabras · ≈3.634 tokens
- Librerías
- gsap 3.15.0
- Peso de la demo
- 34,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
7.098 palabras en el Completo y 1.891 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 prácticamente exacto: mismo layout, tipografías, colores, carta y animación FLIP con los mismos valores; el código solo difiere en una línea en blanco. Normal, porque el prompt incluye el CSS y el JS completos.
Prompt LiteFiel a la demo7,8/10
Reproduce muy bien la carta, los filtros con tachado, el reordenado FLIP con el separador, el sello giratorio y la autodemo, con los valores de tiempo pedidos. Cambian detalles: grano del papel más marcado, raya de pestañas fina en lugar de negra, títulos del pie en versalitas de acento, puntos guía que fallan cuando el nombre ocupa dos líneas y píldoras algo más anchas, que en móvil reparten las filas de otra forma; tampoco hay rebote al pulsar ni entrada del sello.
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:- «Añade una pestaña de «Para compartir» entre entrantes y principales»
- «Pásala a tono oscuro con el acento en naranja»
- «Oculta del todo los platos no aptos en lugar de atenuarlos»
- «Quita la demostración automática para producción»
- 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
¿Tengo que poner mis platos a mano en el código?
Sí, están en un objeto CARTA dentro del script: cada plato es nombre, descripción, precio, alérgenos y etiqueta. Si tu carta vive en un CMS, genera ese objeto desde allí; el resto de la pieza no cambia.
¿Cumple con la normativa de alérgenos?
Muestra los 14 alérgenos del Reglamento (UE) 1169/2011 y una nota de trazas, pero la información de cada plato la declaras tú. Mantén también la información por escrito en el local, como exige la norma.
¿Se pueden combinar varios filtros?
Sí. Puedes marcar tantos alérgenos como quieras; un plato baja al grupo «Llevan lo que evitas» si contiene cualquiera de ellos, y el aviso dice exactamente cuáles.
¿Qué pasa con la demostración que pulsa filtros sola?
Es para la vitrina: se para al primer clic, tecla o toque y no corre con movimiento reducido. En tu web pon AUTODEMO = false.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈14749 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3634 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
