Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Landing completa de un hotel ficticio solo para adultos (Salitre, 24 habitaciones en Punta Ceniza). El hero es la piscina desbordante del hotel al atardecer, renderizada en Blender sin agua: el agua la pone la web con una ecuación de onda en la GPU, y cada gota del cursor o del dedo abre ondas que refractan el fondo de mosaico de vidrio, reflejan el cielo del mismo render y avivan las cáusticas. Al desplazarse, la onda descubre la costa volcánica en relieve con curvas de nivel y cinco calas etiquetadas con su distancia en kayak; siguen tres habitaciones (Cal, Duna y Faro) en un carrusel que se arrastra y cambia con una transición de ola, las salinas con un loop macro de cristales de sal sobre un rosa que inunda la pantalla, un cielo de constelaciones que se unen al pasar el cursor, un calendario que calcula el precio por temporada con impuestos incluidos y un pie donde el haz del faro barre el nombre del hotel. Usa recursos propios de Motionframe (renders AVIF/WebP con profundidad y máscara, un HDRI del cielo, un mapa de alturas de 16 bit y un loop de vídeo) servidos desde motionframe-two.vercel.app; se sustituyen por los del cliente cambiando la constante ASSETS y respetando los nombres de fichero (o renderizando con los mismos datos de cámara). Encaja en hoteles, alojamientos boutique, spas y turismo de naturaleza.

Prompt
≈35.741 tokens · con Lite
Librerías
three · gsap · lenis
Demo
93,8 KB · medio
Prueba en frío
9,4/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 del hotel
  • Titular del hero (primera parte)
  • Titular del hero (palabra en cursiva)
  • Lugar
  • Dirección
  • Teléfono
  • Email
  • Número de habitaciones
  • Color de acento (turquesa del agua)
  • Color que inunda la sección de las salinas
  • Color de fondo (piedra volcánica)
  • Azul de la noche (experiencias y pie)

Í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
16.072 palabras · ≈35.741 tokens
Lite
2.001 palabras · ≈3.508 tokens
Librerías
three 0.186.1 · gsap 3.15.0 · lenis 1.3.26
Peso de la demo
93,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

16.072 palabras en el Completo y 2.001 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 Hotel Salitre · Punta Ceniza, mar de fondo
Prompt CompletoFiel a la demo9,4/10

Casi idéntica al original: la misma agua que se toca con refracción y cáusticas, la misma costa en relieve con sus curvas de nivel, las salinas, el cielo de constelaciones y el faro del pie. Solo cambian detalles de plantilla: el titular sale como «Marde», sin espacio, y la dirección del pie cabe en una sola línea.

Lo que generó la IA con el prompt Lite de Hotel Salitre · Punta Ceniza, mar de fondo
Prompt LiteAceptable6,2/10

Rehace toda la mecánica: el agua con ondas, la costa 3D, el carrusel con ola, las constelaciones, el calendario y el faro. Pero el HUD del hero baja a una fila inferior, el agua muestra bandas horizontales, la costa cambia de cámara y de cielo (rosa en vez de azul noche), la marca del pie sale pequeña y en móvil el párrafo del hero no se lee sobre el cielo.

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:
    • «Que el agua sea más verde y las ondas más lentas, como una piscina de agua salada»
    • «Sustituye las calas por las playas reales del hotel con sus distancias»
    • «Añade una cuarta habitación al carrusel con su propio render y mapa de profundidad»
    • «Que la sección de las salinas inunde en amarillo azufre en vez de rosa»
  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 propias fotos de la piscina y las habitaciones?
Sí. La piscina necesita tres imágenes de la misma cámara: el render o foto, un mapa de profundidad (blanco = cerca) y una máscara con la lámina de agua en rojo y el mar en verde; el prompt explica cómo obtenerlas con Blender o con un estimador de profundidad. Las habitaciones solo necesitan la foto y su mapa de profundidad. Después cambia la constante ASSETS a tu carpeta y conserva los nombres.
¿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í: el dedo toca el agua y, si no se toca, caen gotas cada 2,6 s; la costa se recorre con el scroll y muestra sola el dato de la cala más cercana; el carrusel se arrastra. La simulación baja a 128×64, el DPR a 1,5 y se cargan las variantes de 1280 px y el cielo de 256 px: unos 1,2 MB en total.
¿El calendario reserva de verdad?
No. Calcula noches, suplemento de habitación y total con impuestos con las temporadas definidas en el código y muestra una confirmación en la página con un número de solicitud. Conecta el envío del formulario a tu motor de reservas o a un correo.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈35741 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3508 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.