Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Landing minimalista para una app de entrenamiento, en negro, blanco y un único naranja vivo, sin pasteles, cursivas ni manuscritas. El hero blanco lleva un titular gigante cuyas letras saltan en cada pulso y un secuenciador en Canvas 2D: una pelota con aplastamiento y estela rebota por dieciséis escalones, y el tempo se ajusta con botones o marcando el ritmo con toques; un clic en un escalón lo convierte en tiempo fuerte. Siguen una cinta de texto que se acelera con el scroll, un manifiesto que se enciende palabra a palabra, un teléfono CSS fijado con cuatro vistas, seis tarjetas de planes con gráficos animados que se desplazan en horizontal con inclinación por velocidad, una cuadrícula de racha interactiva, precios con interruptor de muelle y rodillos de cifras, y un cierre naranja con botones magnéticos, QR y código con copiar. Encaja en apps de deporte, bienestar y productos móviles; cambia el naranja por rojo, azul eléctrico o verde ácido.

Prompt
≈29.640 tokens · con Lite
Librerías
gsap · lenis
Demo
87,2 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 bienvenida
  • Precio mensual del plan Plus (€)
  • Precio del plan Plus con pago anual (€/mes)
  • Precio mensual del plan Equipo (€)
  • Precio del plan Equipo 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
7.680 palabras · ≈29.640 tokens
Lite
1.214 palabras · ≈2.602 tokens
Librerías
gsap 3.15.0 · lenis 1.3.26
Peso de la demo
87,2 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

7.680 palabras en el Completo y 1.214 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 naranja por un azul eléctrico y deja el texto sobre él en blanco»
    • «Haz que la pelota vaya más rápida y salte más alto»
    • «Sustituye los cuatro modos del teléfono por los de mi gimnasio»
    • «Añade un séptimo plan a las tarjetas horizontales y un cuarto plan de precios»
  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 pelota rebota sola, un toque en un escalón marca un tiempo fuerte, «Marcar ritmo» sirve con el dedo, las tarjetas de planes se deslizan con el dedo y la sesión se cambia con las pestañas.
¿Puedo usar otro color vivo?
Sí, cambia la variable --ritmo: los brillos, los tonos de la racha y el color de la pelota se derivan de ella. Naranja, rojo y azul eléctrico funcionan bien; con amarillo o verde ácido el texto encima debe ser negro. Evita los pasteles: rompen el contraste.
¿Los datos de la racha y las sesiones son reales?
No, son de ejemplo y se generan en el navegador. Para usar datos reales sustituye la función que reparte los niveles de la cuadrícula y el array de minutos por las llamadas a tu API.
¿Qué pasa con el movimiento reducido?
No se usa Lenis ni ScrollTrigger: no hay pin ni barridos. El secuenciador se dibuja una vez con la pelota en reposo y sigue siendo editable, la cinta queda quieta y los pasos de la sesión se convierten en pestañas que cambian la vista al instante.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈29640 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2602 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.