Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

BASALT es un estudio ficticio que construye casas en paisajes extremos. La portada es una casa de hormigón y madera negra en voladizo sobre un campo de lava, con el titular repartido en esquinas opuestas. La sección se fija con ScrollTrigger y el primer tramo del scroll avanza un travelling de vídeo: la cámara se acerca a la casa mientras la niebla se levanta y las dos palabras del titular se abren hacia sus esquinas. Desde el último fotograma, la ventana se abre como un portal con borde de niebla y la toma sigue hasta el interior, donde tres cifras gigantes ocupan las esquinas. El cursor mueve la imagen por profundidad y aparta una niebla rasante. Siguen el material bajo una luz que sigue al cursor, cuatro obras a pantalla completa, una vertical que se abre con una cita y el cierre con el nombre gigante. Incluye el travelling en 121 fotogramas WebP, doce imágenes originales con sus mapas de profundidad, móvil, movimiento reducido y respaldo sin WebGL. Encaja en estudios de arquitectura, interiorismo, inmobiliarias de lujo y hoteles de autor.

Prompt
≈16.852 tokens · con Lite
Librerías
three · gsap · lenis
Demo
41,2 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:

  • Nombre del estudio
  • Titular, esquina superior
  • Titular, esquina inferior
  • Frase de portada
  • Texto del botón principal
  • Cita del manifiesto
  • Color de acento
  • Email de contacto

Índice del prompt

Qué hay dentro del prompt

Qué trae el prompt, por apartados

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

6.807 palabras en el Completo y 1.112 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 el travelling de vídeo dure más scroll y el titular tarde más en apagarse»
    • «Que la travesía por la ventana dure más y la banda de niebla sea más ancha»
    • «Cambia las cifras del interior por años de estudio, obras y premios»
    • «Sustituye las cuatro obras por tus proyectos con sus fotos»
  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 y el vídeo?
Sí. El travelling del hero va en 121 fotogramas WebP (1280×720 y 960×540 para móvil) y hay doce imágenes originales más (nueve fotos y sus mapas de profundidad), todo generado para la pieza. Las condiciones están en assets/LICENCIA.txt.
¿Puedo usar mi propio vídeo y mis fotos?
Sí. Usa un clip de unos 5 s en 16:9 que empiece en el encuadre de la foto de portada, expórtalo a fotogramas WebP con el comando de ffmpeg del prompt, ajusta el número de fotogramas y la ventana del último fotograma. Pesa menos que un vídeo de todo-claves y se puede mover hacia delante y hacia atrás sin saltos. Para las fotos de las travesías, usa 16:9 con la ventana cerca de los pivotes del shader y un mapa de profundidad gris de 640×360.
¿Qué pasa en móvil y sin WebGL?
En móvil se cargan las texturas y los fotogramas de 960 px con DPR máximo 1,5 y el encuadre se desplaza hacia la ventana. Sin WebGL, el travelling se pinta en un canvas 2D y la travesía se repite en CSS: cada foto se revela dentro de la ventana de la anterior con una máscara radial que crece con el scroll; con movimiento reducido, la toma pasa a dos pantallas fijas.
¿El formulario envía los datos?
No. Valida en el navegador y muestra un mensaje de gracias. Conéctalo a tu servicio de formularios o a tu backend antes de publicar.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈16852 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2269 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.