Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un muestrario editorial de ocho botones listos para producción sobre papel cálido. El magnético se acerca al cursor con un muelle real; el relleno entra por el lado exacto por el que llega el ratón; un trazo dibuja el contorno y completa la vuelta al salir; un destello cálido cruza un botón lacado; una flecha se va por la derecha y vuelve por la izquierda; una píldora líquida se abomba y suelta gotas; una tecla 3D se inclina hacia donde aprietas y cuenta entradas, y un botón copia un código con check dibujado, rodillo de texto y aviso para lectores de pantalla. Todos responden a ratón, toque y teclado, y una demostración automática pausable los enseña en bucle. Encaja en reservas, fichas de producto, formularios, CTAs de landings y cupones. Cambia acento, tinta y papel para adaptarlo a cualquier marca.
Encaja bien en webs de
- Prompt
- ≈13.736 tokens · con Lite
- Librerías
- ninguna
- Demo
- 30,6 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 de la marca
- Ciudad
- Color de fondo (papel)
- Color de tinta (texto y botones oscuros)
- Color de acento
- Acento oscuro (rótulos y canto de la tecla)
- Color secundario (líquido y confirmación)
- Código de descuento
- Precio de la entrada
- Email de contacto
- Teléfono
Í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.787 palabras · ≈13.736 tokens
- Lite
- 1.485 palabras · ≈2.729 tokens
- Librerías
- ninguna
- Peso de la demo
- 30,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
5.787 palabras en el Completo y 1.485 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: maquetación, tipografía, colores, textos, los ocho efectos y la demo automática son idénticos al original. Se explica porque el prompt completo incluye casi todo el código fuente, así que mide más la fidelidad al copiar que la reconstrucción.
Prompt LiteFiel a la demo8,3/10
Muy cerca del original: misma paleta, tipografías, rejilla 4×2, textos y los ocho efectos con la física del imán, el goo, la tecla 3D, el rodillo de «¡Copiado!» y la demo automática. Cambian detalles: el hero y las tarjetas respiran algo más, el pie sale en minúsculas sin subrayado y el rótulo del cupón va en almagra en vez de gris.
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:- «Haz que el botón magnético atraiga desde más lejos y con un muelle más blando»
- «Cambia el acento a azul añil y el líquido a mostaza»
- «Deja solo los botones 02, 05 y 08 para usarlos en mi landing»
- «Que la demostración automática vaya más despacio, una tarjeta cada 2 segundos»
- 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 usar solo uno de los ocho botones?
Sí. Cada botón tiene su bloque de CSS, su HTML y su bloque de JS independientes; copia los tres y funciona solo.
¿Funcionan en móvil, donde no hay hover?
Sí. Al tocarlos reproducen el efecto completo, y la demostración automática los enseña sin interacción. El hover solo se aplica en dispositivos con ratón.
¿El botón de copiar funciona dentro de un iframe?
Intenta primero la API del portapapeles, luego una alternativa compatible y, si el navegador lo bloquea, selecciona el código y lo anuncia para copiarlo a mano.
¿Necesita alguna librería?
No. Es CSS y JavaScript vanilla con un filtro SVG en línea; solo carga tres fuentes de Google Fonts.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13736 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2729 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
