Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Escena three.js con un muro encalado, zócalo añil, suelo de barro cocido y una celosía de cedro cuyos huecos son un teselado real de estrellas de ocho puntas y cruces, generado por código y extruido. El scroll mueve el sol de las 08:00 a las 20:00: de levante a poniente, con la elevación y el color de la luz de cada hora, de modo que la sombra se estira al alba, se recoge a mediodía y cambia de lado por la tarde. La cámara hace un travelling suave para dejar siempre la celosía y su sombra en el lado libre de texto, y un reloj de sol fijo marca la hora y permite saltar a cada capítulo. Encaja en hoteles con encanto, casas rurales, restaurantes con patio, estudios de arquitectura o bodegas. Los cinco colores (cal, madera, zócalo, suelo y acento) se cambian desde el CSS y afectan también a la escena.
Encaja bien en webs de
- Prompt
- ≈13.459 tokens · con Lite
- Librerías
- three · gsap
- Demo
- 30,9 KB · ligero
- Prueba en frío
- 9,9/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 negocio
- Barrio o zona
- Ciudad
- Precio por noche
- Email de reservas
- Teléfono
- Color del muro (cal)
- Color de la madera
- Color del zócalo
- Color del suelo
- Color de los botones
Í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
- 6.319 palabras · ≈13.459 tokens
- Lite
- 1.238 palabras · ≈2.416 tokens
- Librerías
- three 0.186.1 · gsap 3.15.0
- Peso de la demo
- 30,9 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
6.319 palabras en el Completo y 1.238 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,9/10
Calco prácticamente exacto del original: escena, sombras de estrellas, cartelas, reloj de sol, travelling de cámara y versión móvil coinciden (el código solo difiere en una línea en blanco). Eso sí, el prompt incluye casi todo el código, así que mide más la capacidad de copiar que la de interpretar.
Prompt LiteFiel a la demo7,2/10
Reproduce bien la escena 3D, el teselado de estrella y cruz, el recorrido del sol con el scroll, las cartelas y el reloj. Pero en escritorio el titular de portada queda montado sobre la celosía, falta el tracking apretado de los titulares, el icono sale solo en contorno y los botones del reloj llevan borde.
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:- «Haz la madera de la celosía más fina y el dibujo más calado»
- «Cambia el zócalo añil por almagra»
- «Que el día empiece a las 07:00 y acabe de noche con luz de luna»
- «Convierte la casa de huéspedes en un restaurante con patio»
- 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 cambiar el dibujo de la celosía?
Sí. El grosor de la madera, el tamaño del módulo y el número de estrellas son tres constantes del código; el teselado se recalcula solo y siempre queda recortado limpio contra el marco.
¿Funciona en móvil?
Sí. En pantallas estrechas la cámara se aleja para dejar la celosía arriba, los textos pasan a tarjetas abajo y el reloj de sol se compacta a tres horas. En táctil la cámara deriva sola en lugar de seguir al puntero.
¿Qué pasa si el navegador no tiene WebGL?
Se oculta el lienzo y queda un degradado CSS con los mismos colores del muro y el suelo; los textos, los botones y el reloj siguen funcionando.
¿Pesa mucho?
No: no hay imágenes ni modelos. Las texturas de cal, barro y madera se dibujan en canvas al cargar y el bucle de render se pausa cuando la escena no está a la vista.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13459 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2416 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
