Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Landing completa de una marca ficticia de Marenor, Boreal, y su gran turismo eléctrico GT-01. En el hero, una maqueta de arcilla flota en un estudio negro iluminada por una tira de luz que sigue la altura del cursor; al acabar la intro (la línea del faro se dibuja y enciende la escena) un frente de pintura húmeda recorre la carrocería del morro a la cola y la deja en verde Boreal metalizado con barniz y escamas. Al desplazarse, el coche gira de perfil y entra en un túnel de viento: 1.800 líneas de humo lo rodean, la suspensión baja, el alerón activo se despliega y el Cd cae de 0,29 a 0,21; con el cursor se inyecta una sonda de humo. Siguen un configurador con cinco pinturas que se aplican con barrido, dos llantas y precio en vivo, una noche en carretera mojada (loop de vídeo) con cuentakilómetros que ruedan, la plataforma en rayos X con 4.416 celdas que se cargan en ola, un formulario de prueba de conducción que calcula la cita y un pie donde el piloto trasero inunda el bloque de rojo. Usa recursos propios de Motionframe (GLB con Draco, HDRI de estudio, campo de distancia del perfil, póster con profundidad y loop de vídeo) servidos desde motionframe-two.vercel.app; se pueden sustituir por los del cliente cambiando la constante ASSETS y respetando los nombres de nodo y material. Encaja en automoción, movilidad, náutica, producto industrial y tecnología de consumo.

Prompt
≈33.522 tokens · con Lite
Librerías
three · gsap · lenis
Demo
78,8 KB · medio
Prueba en frío
9,5/10 · 30-09-2026

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
  • Nombre del modelo
  • Titular del hero (primera línea)
  • Titular del hero (segunda línea, en acento)
  • Ciudad
  • Dirección de la sede
  • Teléfono
  • Email
  • Precio base (con impuestos)
  • Color de acento (verde luminoso de los datos)
  • Color de la pintura por defecto
  • Color del piloto trasero (inunda el pie)
  • Color de fondo

Índice del prompt

Qué hay dentro del prompt

Qué trae el prompt, por apartados

  1. 01Qué es
  2. 02Librerías y esqueleto
  3. 03Recursos
  4. 04Tokens de diseño
  5. 05Estructura y contenido
  6. 06Mapa de escenas
  7. 07Movimiento
  8. 08Código clave
  9. 09Interacción
  10. 10Adaptación a móvil y tablet
  11. 11Accesibilidad y movimiento reducido
  12. 12Rendimiento
  13. 13Personalización
  14. 14Comprobación final
Completo
15.685 palabras · ≈33.522 tokens
Lite
2.000 palabras · ≈3.419 tokens
Librerías
three 0.186.1 · gsap 3.15.0 · lenis 1.3.26
Peso de la demo
78,8 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

15.685 palabras en el Completo y 2.000 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.

Prueba en frío

Lo que salió al pegarlo en frío

Pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos el resultado con la demo. Prueba hecha el 30-09-2026.

Lo que generó la IA con el prompt Completo de Boreal GT-01 · gran turismo eléctrico hecho de viento
Prompt CompletoFiel a la demo9,5/10

Reproduce la demo prácticamente línea a línea: misma pintura que recorre la arcilla, mismo túnel de humo, rayos X y pie rojo, y las capturas son indistinguibles del original.

Lo que generó la IA con el prompt Lite de Boreal GT-01 · gran turismo eléctrico hecho de viento
Prompt LiteAceptable6,8/10

El coche, el shader de pintura, el túnel de humo y los rayos X salen fieles con solo 12 KB de prompt; pierde la barra de navegación, recoloca los titulares y en la escena de noche y en el HUD móvil hay textos que se pisan.

Solo publicamos lo que hemos probado. Otras herramientas (ChatGPT, Gemini, Lovable…) pueden dar resultados distintos.

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 verde Boreal por un azul marino metalizado y que el acento sea ámbar»
    • «Que el túnel de viento sea la primera escena y el hero muestre ya el coche pintado»
    • «Añade una sexta pintura y una tercera llanta al configurador»
    • «Sustituye el vídeo de noche por un render estático con parallax de profundidad»
  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

¿Puedo usar mi propio modelo de coche?
Sí. Exporta un GLB con Draco con los nodos Carroceria, Vidrio, Faro, Piloto y Aleron (el alerón con el pivote en su borde delantero), y llantas aparte con el eje de giro en Z; cambia la constante ASSETS a tu carpeta. Si un recurso falla, la página muestra el póster y sigue funcionando.
¿Los recursos se sirven desde Motionframe para siempre?
Se sirven desde motionframe-two.vercel.app con nombres versionados (-v1) que no cambian. Si prefieres no depender de nosotros, descárgalos y apunta ASSETS a tu dominio: no hay ninguna otra ruta en el código.
¿Funciona en móvil?
Sí: la tira de luz hace un barrido automático, el configurador se gira arrastrando con el dedo, el túnel y los rayos X van con el scroll, el DPR se limita a 1,5 y el humo usa 900 líneas. Pesa unos 1,4 MB hasta el hero listo y 2,1 MB en total, con el vídeo en 960×540.
¿El configurador y la reserva están conectados a algo?
No. El precio se calcula en el navegador y el formulario solo valida y redacta la confirmación; conecta el envío a tu CRM o a un endpoint propio.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈33522 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3419 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.0 · publicada el 30-09-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.