Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Escena 3D fijada a pantalla completa en la que el scroll es la obra: sobre una ciudad al atardecer, la torre aparece primero dibujada en líneas finas y cada planta se levanta al bajar la página. El forjado de hormigón cae en su sitio, el vidrio sube, los montantes de bronce brotan en barrido y se encienden algunas ventanas. Cada planta gira 2,2° sobre la anterior y se retranquea al subir. La cámara orbita despacio, cada planta rotula sus m² y terraza como en un plano, y un cuadro de superficies suma cota y metros construidos en vivo, con capítulos de texto y una ficha final con llamada a la acción. Encaja en portadas de promociones de obra nueva, estudios de arquitectura y constructoras; admite paleta de hora azul o mediodía cambiando unas pocas variables de color.
Encaja bien en webs de
- Prompt
- ≈15.242 tokens · con Lite
- Librerías
- three · gsap
- Demo
- 34,1 KB · ligero
- Prueba en frío
- 9,6/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
- Barrio
- Ciudad
- Fecha de entrega
- Teléfono
- Email de contacto
- Color de acento
- Color del horizonte
- Color del hormigón
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Librerías y esqueleto
- 03Tokens de diseño
- 04Estructura y contenido
- 05Movimiento
- 06Código clave
- 07Interacción
- 08Adaptación a móvil y tablet
- 09Accesibilidad y movimiento reducido
- 10Rendimiento
- 11Personalización
- 12Comprobación final
- Completo
- 7.405 palabras · ≈15.242 tokens
- Lite
- 1.657 palabras · ≈2.869 tokens
- Librerías
- three 0.186.1 · gsap 3.15.0
- Peso de la demo
- 34,1 KB (ligero)
- 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.405 palabras en el Completo y 1.657 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.
Prompt CompletoFiel a la demo9,6/10
Calca la pieza: misma torre que se levanta al hacer scroll, mismos rótulos, cuadro de superficies, textos y colores; el código resultante es prácticamente idéntico al original. Las únicas diferencias visibles (un rótulo a medio aparecer, la cota con una décima de más) se deben al instante exacto de la captura.
Prompt LiteFiel a la demo7,8/10
Con mucho menos detalle reproduce la escena completa: cielo de atardecer, ciudad, torre que gira y se construye planta a planta con rótulos y cuadro de superficies. Cambian detalles de acabado: la marca y el cuadro se maquetan distinto, las plantas se abrevian «ÁT»/«CUB», la cota arranca en +0,3 m en vez de +4,5 m y algunos rótulos rozan el panel.
Solo publicamos lo que hemos probado. Otras herramientas (ChatGPT, Gemini, Lovable…) pueden dar resultados distintos.
Paso a paso
Cómo usarlo en 4 pasos
- 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. - 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. - 03
Pega e itera
Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:- «Cambia el atardecer por una hora azul»
- «Quita la torsión para que la torre sea recta»
- «Añade dos plantas más y recalcula el cuadro de superficies»
- «Haz que la obra avance más despacio con el scroll»
- 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.
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 poner el programa real de mi edificio?
Sí. Todo sale del array PLANTAS (id, uso, ancho, fondo, radio, terraza y altura): cotas, m², terrazas, cuadro, riel y rótulos se recalculan solos. Solo tienes que actualizar a mano las cifras de la ficha final y el antetítulo.
¿Funciona bien en móvil?
Sí. En pantallas de hasta 1024 px la torre sube por encima del texto, el cuadro de superficies se convierte en una ficha inferior con planta, cota y m², solo se rotula la planta actual y el DPR se limita a 1,5.
¿Qué pasa si el visitante tiene activado reducir movimiento o su navegador no tiene WebGL?
Con movimiento reducido se muestra la torre terminada con la ficha final en un solo render, sin animaciones. Sin WebGL queda el degradado del atardecer en CSS y el cuadro de superficies y los capítulos siguen funcionando con el scroll.
¿Puedo usarla como portada de la web de la promoción?
Sí, está pensada como primera sección: ocupa lo que dura su scroll y al terminar puedes continuar con el resto de la página debajo de la sección #escena.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈15242 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2869 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
