Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Página blanca con un único azul eléctrico y un botón de menú en píldora negra. Al pulsarlo, las tres barras se convierten en una X con rebote, la etiqueta rueda letra a letra de «Menú» a «Cerrar» y dos máscaras circulares nacen del botón: primero un anillo de color vivo y, detrás, el negro del menú, que llena la pantalla mientras la página retrocede. Los cinco enlaces suben desde su máscara con escalonado; al señalar uno, los demás se atenúan, sus letras ruedan, aparece una flecha y una forma de acento (círculo, cuadrado, triángulo, estrella, flor) se transforma con física de muelle. Incluye botón magnético, teclado completo con trampa de foco y un piloto automático que enseña la demo solo. Ideal para webs de estudios, portfolios, marcas y SaaS; cambia el acento para adaptarla a tu identidad.

Prompt
≈12.891 tokens · con Lite
Librerías
ninguna
Demo
29,5 KB · ligero
Prueba en frío
pendiente

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
  • Color de acento vivo
  • Color del menú (negro)
  • Color de la página (blanco)
  • Email de contacto
  • Teléfono (como se ve)
  • Teléfono para el enlace (sin espacios)

Índice del prompt

Qué hay dentro del prompt

Qué trae el prompt, por apartados

  1. 01Qué es
  2. 02Librerías y esqueleto
  3. 03Tokens de diseño
  4. 04Estructura y contenido
  5. 05Movimiento
  6. 06Código clave
  7. 07Interacción
  8. 08Adaptación a móvil y tablet
  9. 09Accesibilidad y movimiento reducido
  10. 10Rendimiento
  11. 11Personalización
  12. 12Comprobación final
Completo
5.472 palabras · ≈12.891 tokens
Lite
1.335 palabras · ≈2.558 tokens
Librerías
ninguna
Peso de la demo
29,5 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.472 palabras en el Completo y 1.335 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.

Prueba en frío

La prueba en frío

Aún sin publicar para esta pieza

En la prueba en frío pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos lo que genera con la demo. Cuando esté hecha, aquí verás la captura, el veredicto y la fecha.

Paso a paso

Cómo usarlo en 4 pasos

  1. 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.
  2. 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.
  3. 03

    Pega e itera

    Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:
    • «Cambia el azul eléctrico por un verde ácido»
    • «Que la máscara circular tarde más y rebote más la X»
    • «Añade un sexto enlace con una forma de rombo»
    • «Quita el piloto automático y la hora del estudio»
  4. 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.

Guías por herramientaClaudeChatGPTGeminiCursorLovableBoltv0

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

¿Cómo consigue que la máscara nazca justo en el botón?
Al abrir, el script mide el centro del círculo de acento del botón y la distancia a la esquina más lejana, y los guarda como --cx, --cy y --r. El menú se recorta con clip-path: circle(var(--r) at var(--cx) var(--cy)), así que funciona en cualquier tamaño de pantalla y se recalcula al redimensionar.
¿Por qué hay un anillo de color antes del negro?
Son dos capas con la misma máscara: la de acento empieza antes al abrir y termina después al cerrar. La diferencia de 0,07 s deja una media luna de color vivo en el borde que barre la pantalla. Quita el retardo si prefieres un barrido limpio.
¿Puedo usarlo en una web real con varias páginas?
Sí: sustituye los href de los enlaces por tus rutas y quita el preventDefault y el texto «Estás en». Mantén el atributo inert cruzado entre main y el menú, y el cierre con Esc, para conservar la accesibilidad.
¿Y si el usuario tiene movimiento reducido?
Con prefers-reduced-motion se eliminan transiciones, el piloto automático y el ciclo de la forma del titular; el menú se abre y se cierra al instante y las formas cambian sin muelle, con todo el contenido legible.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈12891 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2558 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.0 · publicada el 01-10-2026

Cópialo desde aquí

Tu navegador no nos deja escribir en el portapapeles. El texto ya está seleccionado: pulsa Ctrl + C (o ⌘ + C) o el botón.