Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

KADEN es una marca ficticia de ciclismo de pista contada en una sola toma de scroll. Abre una fotografía a sangre de un ciclista con visera espejo en el peralte de un velódromo oscuro, y un shader la hace reaccionar desde el primer segundo: desenfoque radial que nace del casco, líneas de velocidad, un foco nítido que sigue al cursor y la toma que se inclina ±2°. La velocidad del scroll y la del ratón son las del ciclista: un HUD «000 KM/H» sube con ellas y baja al parar. La escena fijada acelera hasta 72 y se congela con un destello blanco de 80 ms. Siguen un túnel de viento con líneas de corriente que rodean la silueta de la bici y el cursor, una serie de tres fotos que se desplazan a distinta velocidad, el casco con un reflejo que recorre la visera y un cierre con las líneas de la pista en perspectiva bajo el wordmark gigante. Para marcas deportivas y producto de rendimiento.

Encaja bien en webs de

Prompt
≈19.741 tokens · con Lite
Librerías
three · gsap · lenis
Demo
50,9 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:

  • Marca
  • Primera línea del titular
  • Segunda línea del titular (en el acento)
  • Frase de portada
  • Color de acento
  • Modelo del casco
  • Precio del casco
  • Primera línea del cierre
  • Segunda línea del cierre (en el acento)
  • Email de contacto

Índice del prompt

Qué hay dentro del prompt

Qué trae el prompt, por apartados

  1. 01Qué es
  2. 02Parámetros fijos
  3. 03Librerías y esqueleto
  4. 04Tokens de diseño
  5. 05Estructura y contenido
  6. 06Movimiento
  7. 07Código clave — copiar literal
  8. 08Interacción
  9. 09Adaptación a móvil y tablet
  10. 10Accesibilidad y movimiento reducido
  11. 11Rendimiento
  12. 12Personalización
  13. 13Comprobación final
  14. 14Recursos
Completo
9.004 palabras · ≈19.741 tokens
Lite
1.104 palabras · ≈1.940 tokens
Librerías
three 0.186.1 · gsap 3.15.0 · lenis 1.3.26
Peso de la demo
50,9 KB (medio)
Resolución máxima (DPR)
2
Se pausa fuera de pantalla
sí
Respeta «menos movimiento»
sí
Alternativa sin WebGL
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

9.004 palabras en el Completo y 1.104 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:
    • «Que la foto se congele a 60 km/h en vez de a 72»
    • «Haz más grande la lente nítida que sigue al cursor»
    • «Pon más líneas de corriente en el túnel y que corran más despacio»
    • «Cambia la serie por tres fotos de mi equipo»
  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

¿Se incluyen las imágenes?
Sí. Seis imágenes originales generadas para la pieza (ciclista, bici y casco recortados con alfa, y tres verticales de la serie) más la máscara de la visera, en WebP con versión móvil. Se licencian con la plantilla; las condiciones están en assets/LICENCIA.txt.
¿Puedo usar otro color en vez del azul?
La variable cambia la interfaz, el shader, el flujo del túnel, la pista y las líneas. La luz de las fotos es azul eléctrico, así que para una campaña de otro color conviene regenerar también las imágenes con el nuevo acento.
¿Sirve para otro deporte o producto?
Sí: cambia la foto del hero (y el punto de fuga, la posición del sujeto en la imagen) y el recorte de la bici por el de tu producto. El campo del túnel de viento se calcula solo a partir de la silueta con alfa.
¿Qué pasa en móvil y sin WebGL?
En móvil usa imágenes de 960 px y DPR 1,5, y un cursor fantasma mueve la lente para que la portada siga viva. Sin WebGL, la foto hace el mismo guion con CSS (inclinación, desenfoque y destello) y las líneas de velocidad en 2D la cubren.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈19741 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1940 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.1 · 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.