Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

KAEL es una marca ficticia de abrigo técnico contada como una sola toma en blanco y negro con un acento naranja seguridad. Abre una fotografía: llanura volcánica con niebla, el nombre a 38 vw y, delante, una figura con parka negra y la capucha tapando el rostro. Dos capas de niebla fbm se apartan con el cursor y se recuperan en 1,5 s, y las fibras del abrigo y de las letras se sueltan bajo el puntero desde el primer segundo. Al hacer scroll, wordmark y figura caen en columnas de 1,6 px que bajan de nuevo para formar el titular. Siguen un lookbook horizontal con cortina y desenfoque, el tejido a sangre con una lente de cristal ×2 con aberración cromática, una pausa en negro con tres cifras finas, tres piezas que se inclinan en 3D con su nombre en scramble y un cierre donde la figura se vuelve a tejer delante del wordmark gigante, con una tarjeta de cristal que muestra las plazas libres. Incluye diez imágenes originales, móvil, movimiento reducido y respaldo fotográfico sin WebGL. Para moda, outdoor y producto DTC.

Prompt
≈18.911 tokens · con Lite
Librerías
three · lenis
Demo
51,6 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 (wordmark)
  • Línea de producto
  • Temporada
  • Frase de portada (12 palabras)
  • Titular, primera parte
  • Titular, segunda parte
  • Titular, línea en gris
  • Símbolo de moneda
  • Color de 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 y CSS (copiar literal)
  5. 05Estructura y contenido (copiar literal)
  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. 13Recursos
  14. 14Comprobación final
Completo
7.705 palabras · ≈18.911 tokens
Lite
980 palabras · ≈1.819 tokens
Librerías
three 0.186.1 · lenis 1.3.26
Peso de la demo
51,6 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

7.705 palabras en el Completo y 980 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 las fibras caigan más despacio y la figura tarde más en deshacerse»
    • «Haz la lente del tejido más grande y con más aumento»
    • «Cambia el naranja por un amarillo de alta visibilidad»
    • «Quita el cursor fantasma del héroe»
  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í. Diez imágenes originales generadas para la pieza (figura con alfa, fondo, cuatro looks, macro del tejido y tres piezas con alfa) en WebP con versión móvil. Se licencian con la plantilla; las condiciones están en assets/LICENCIA.txt.
¿Puedo poner mi marca y mis fotos?
Sí. El wordmark y el titular se miden sobre el DOM, así que basta con cambiar las variables. Para tus fotos mantén las proporciones (941×1672 con alfa para la figura y las piezas, 1672×941 para fondo y tejido); el prompt indica qué número ajustar si cambia el encuadre.
¿Puedo usar otro color de acento?
La variable cambia botones, cursor y textos de acento. El forro del look 4 y la costura del tejido están en la foto, así que para otro color conviene regenerar esas dos imágenes.
¿Qué pasa en móvil, sin WebGL o con movimiento reducido?
En móvil la composición se reajusta, un cursor fantasma mantiene viva la niebla y el toque también la aparta. Sin WebGL o con movimiento reducido se muestra la misma composición con fotos en capas, el titular visible y todo el contenido legible.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈18911 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1819 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.