Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Un hero a pantalla completa con un mar 3D hecho en shaders: siete olas de Gerstner que llegan desde el sol, ocho ondas de detalle, reflejo del cielo con Fresnel, camino de luz especular y una niebla que funde el mar con el horizonte sin costura. El cielo tiene degradado de tres tonos, halo, disco solar y estratos altos iluminados. La cámara se mece como una barca y responde con un paralaje leve al puntero. El scroll de la página es la puesta de sol: el sol baja de 6,5° a −2,5°, la paleta pasa a la hora azul y un parte del día marca la hora a bordo en vivo. Encaja en hoteles de costa, chárteres, beach clubs, restaurantes frente al mar o inmobiliarias con vistas. Se adapta a cualquier color de horizonte y de agua.
Encaja bien en webs de
- Prompt
- ≈13.359 tokens · con Lite
- Librerías
- three
- Demo
- 28,9 KB · ligero
- Prueba en frío
- 9,8/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
- Ciudad o puerto
- Titular del hero
- Teléfono
- Email de contacto
- Color del horizonte y de marca
- Color del agua profunda
Í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.082 palabras · ≈13.359 tokens
- Lite
- 1.471 palabras · ≈2.507 tokens
- Librerías
- three 0.186.1
- Peso de la demo
- 28,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.082 palabras en el Completo y 1.471 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,8/10
Prácticamente idéntica al original: mismo mar de Gerstner, mismo sol, misma puesta con el scroll, misma maqueta en escritorio y en móvil. Solo cambia el azar del oleaje en cada captura.
Prompt LiteAceptable6,3/10
El mar, el cielo y la puesta de sol con el scroll salen muy parecidos, con los mismos colores y la misma luz. Cambia la maqueta: el titular se corta en otras líneas y deja recuadros visibles en móvil, el parte del día usa serif grande, las tarjetas y las cifras están compuestas de otra forma, el cierre va centrado y el horizonte sube al hacer scroll en vez de bajar.
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 el mar más bravo, con olas más altas y espuma en las crestas»
- «Cambia el atardecer por un amanecer rosado y frío»
- «Que el sol no se ponga con el scroll y se quede fijo a 4°»
- «Quita la sección de salidas y deja solo el hero»
- 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
¿Consume mucho en móvil?
Usa una malla más ligera en móvil, limita el DPR a 1,5 y para el bucle cuando la pieza no está en pantalla o la pestaña está oculta. En un móvil de gama media va fluido.
¿Puedo usar solo el mar como fondo de mi propio hero?
Sí. El canvas es fijo y está detrás de todo: quita las secciones y deja tu contenido encima. Conserva el velo oscuro para que el texto se lea sobre el brillo del sol.
¿Y si el navegador no tiene WebGL?
Se muestra un degradado CSS con los mismos colores del cielo, el horizonte y el agua, y todo el texto sigue legible.
¿Cómo cambio la hora del parte del día?
La hora y la altura del sol salen de dos fórmulas ligadas al scroll (hora = 19:25 + 45 min × progreso; altura = 6,5° − 9° × progreso). Cambia esos números en el script y en la escena a la vez.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13359 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2507 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
