Saltar al contenido
motionframe
motionframe

Biblioteca

Entrar

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Promoción ficticia de nueve villas en la ladera de Costalba. El hero es un time-lapse de 49 fotogramas renderizado en Blender con cámara fija: el scroll mueve el sol de las 08:00 a las 23:00, a las 20:40 se encienden las luces y la piscina, y un único mapa de profundidad da parallax con el cursor (o con el vaivén automático en táctil). Después la ladera aparece como un relieve cartográfico con curvas de nivel que se dibujan, las nueve parcelas emergen como prismas de oro con ficha al pasar, la villa tipo se separa en tres plantas con las estancias etiquetadas, tres interiores se abren con una máscara de arco, una banda de oro cuenta las calidades y un formulario calcula la luz del día elegido. Todos los recursos (fotogramas, profundidad, relieve, GLB con Draco, interiores y la noche del pie) son propios, se sirven desde Motionframe y se referencian por URL absoluta; el comprador puede sustituirlos por sus renders manteniendo los mismos nombres y formatos (49 WebP 16:9 más su mapa de disparidad, un GLB con nodos por planta) o cambiando las URL en la tabla de recursos.

Prompt
≈34.800 tokens · con Lite
Librerías
three · lenis
Demo
80,9 KB · medio
Prueba en frío
9,7/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 promoción
  • Localidad
  • Teléfono
  • Correo
  • Acento (oro de atardecer)
  • Fondo (noche azul)
  • Claro (cal cálida)
  • Dirección de la oficina de ventas
  • Precio desde

Í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 y CSS
  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.945 palabras · ≈34.800 tokens
Lite
1.989 palabras · ≈3.394 tokens
Librerías
three 0.186.1 · lenis 1.3.26
Peso de la demo
80,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

15.945 palabras en el Completo y 1.989 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 Cumbre de Costalba · Nueve residencias
Prompt CompletoFiel a la demo9,7/10

Calcada al original: el mismo día de 08:00 a 23:00 al hacer scroll, la ladera con sus parcelas, la villa abierta planta a planta, los interiores, el formulario y la ladera de noche. El código solo cambia en tres comentarios y en la ruta de los recursos.

Lo que generó la IA con el prompt Lite de Cumbre de Costalba · Nueve residencias
Prompt LiteFiel a la demo7,4/10

Mantiene la idea entera y casi todo el movimiento: el sol que avanza con el scroll, el relieve de las parcelas, la maqueta por plantas con etiqueta al pasar el ratón, los interiores y la noche final. Cambian la cabecera, que se esconde al bajar, la lista de plantas, que va en filas pequeñas, y el pie, con la marca a la izquierda; en móvil la entrada a las calidades deja una pantalla dorada vacía.

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 la hora a la que se encienden las luces (ahora 20:40) por otra y ajusta el texto del HUD»
    • «Haz que el hero empiece a las 07:00 en lugar de a las 08:00 (F0 = 0)»
    • «Sustituye los 49 fotogramas por los de tu villa manteniendo los nombres f_00…f_48 y el mapa de profundidad»
    • «Cambia el oro de atardecer por un verde pino en la banda de calidades»
    • «Deja solo seis parcelas en el mapa»
  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 mis propios renders en vez de la villa de la demo?
Sí. El hero espera 49 imágenes 16:9 del mismo encuadre (cámara fija) más un mapa de disparidad en escala de grises; si cambias el número de fotogramas ajusta la constante N. Los interiores son tres imágenes 16:9 con su profundidad y el mapa de parcelas es un GLB con un prisma por parcela.
¿Qué pasa si el visitante no tiene WebGL?
Ve el póster de las 20:40 en el hero, el mapa de parcelas como SVG con las nueve parcelas, la lista de estancias en texto, los interiores como imágenes y el pie con la foto nocturna. Toda la página sigue funcionando.
¿Pesa mucho?
El hero interactivo son unos 200 KB (profundidad, seis fotogramas clave y el HTML); el resto de los 49 fotogramas se descarga en segundo plano y las demás escenas se cargan cuando el scroll se acerca. La página entera ronda 1,9 MB en escritorio y 1,1 MB en móvil, sin contar librerías ni fuentes.
¿Los datos del sol son reales?
La elevación y el acimut salen de un cálculo solar (NOAA simplificado) para la latitud y longitud de Costalba, tanto en el HUD del hero como en el formulario de visita. Cambia LAT y LON para otra localidad.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈34800 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3394 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

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