Saltar al contenido
motionframe
motionframe

Biblioteca

Entrar

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Landing minimalista para un producto de analítica de tiendas online, en negro, blanco y un único azul eléctrico, sin pasteles, cursivas ni manuscritas. El hero negro lleva un titular gigante cuyas letras laten en sincronía con un electrocardiograma dibujado en Canvas 2D, que la persona puede empujar con el cursor como una cuerda elástica; un clic simula una venta y hace caer una tarjeta de pedido en un feed en directo. Siguen un manifiesto que se enciende palabra a palabra, un panel fijado con barras y línea que se transforman entre cuatro vistas, una baraja de avisos arrastrable, precios con interruptor de muelle y rodillos de cifras, y un cierre azul con botón magnético y código con copiar. Encaja en SaaS, apps y productos digitales; cambia el azul por rojo, naranja o verde ácido.

Prompt
≈25.599 tokens · con Lite
Librerías
gsap · lenis
Demo
73,5 KB · medio
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 vivo
  • Email
  • Teléfono
  • Código de lanzamiento
  • Precio mensual del plan Tienda (€)
  • Precio del plan Tienda con pago anual (€/mes)
  • Precio mensual del plan Cadena (€)
  • Precio del plan Cadena con pago anual (€/mes)

Í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
6.678 palabras · ≈25.599 tokens
Lite
1.898 palabras · ≈3.379 tokens
Librerías
gsap 3.15.0 · lenis 1.3.26
Peso de la demo
73,5 KB (medio)
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.678 palabras en el Completo y 1.898 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 naranja y pon el texto sobre él en negro»
    • «Haz que la línea de pulso vaya más rápida y con latidos más altos»
    • «Añade un cuarto plan de precios y una sexta tarjeta a la baraja de avisos»
    • «Sustituye las cuatro vistas del panel por las de mi negocio»
  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

¿Funciona sin ratón, en móvil o tablet?
Sí. La línea de pulso se mueve sola, un toque simula una venta, el gráfico responde al tacto, la baraja se arrastra con el dedo o con el botón «Siguiente aviso» y el menú se abre con una máscara circular.
¿Puedo usar otro color vivo?
Sí, cambia la variable --pulso y los rgba(42,75,255,…) del brillo y el foco. Rojo, naranja y azul eléctrico funcionan con texto blanco; con amarillo o verde ácido pasa el texto encima a negro. Evita los pasteles: rompen el contraste.
¿Los datos y los pedidos son reales?
No, son de ejemplo y se generan en el navegador. Para usarlos con datos reales sustituye el intervalo que simula pedidos y el array STEPS por las llamadas a tu API.
¿Qué pasa con el movimiento reducido?
No se usa Lenis ni ScrollTrigger: no hay pin ni barridos. La línea de pulso queda estática y completa, los rodillos muestran el valor final y los pasos del panel se convierten en pestañas que cambian la vista al instante.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈25599 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3379 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

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

Otras plantillas

Todas las plantillas

Combina bien con esta pieza

Más para tu sectorToda la biblioteca

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.