Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Setenta y dos mil hojas de hierba en tiempo real, cada una curvada con un arco que conserva su longitud, bajo un cielo procedural con sol, sierra recortada y bruma. Las ráfagas cruzan el campo como olas de luz; al pasar el cursor, las hojas se tumban en el sentido del gesto, giran su cara, brillan y se levantan de nuevo en tres segundos. Si nadie toca nada, un cursor invisible sigue peinando en ocho. Trae tres paletas con transición suave: Ocaso (contraluz dorado), Luna (estrellas y luciérnagas) y Bruma (amanecer verde con niebla densa). Encaja como portada de bodegas, casas rurales, marcas de bienestar, arquitectura de paisaje o cualquier web que quiera abrir con calma cinematográfica. Se puede usar sin interfaz como fondo de un hero.
Encaja bien en webs de
- Prompt
- ≈10.953 tokens · con Lite
- Librerías
- three
- Demo
- 25 KB · ligero
- 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:
- Titular
- Lugar del antetítulo
- Color de las puntas de la hierba
- Color del horizonte
- Color del brillo y del acento
Í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
- 5.251 palabras · ≈10.953 tokens
- Lite
- 1.293 palabras · ≈2.309 tokens
- Librerías
- three 0.186.1
- Peso de la demo
- 25 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
5.251 palabras en el Completo y 1.293 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
- 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:- «Que el viento sople más fuerte y en ráfagas más cortas»
- «Haz la hierba más alta y más fina, como un trigal»
- «Que el peinado del cursor dure el doble antes de levantarse»
- «Añade una cuarta paleta de mediodía con cielo azul claro»
- «Quita el titular y el selector para usarla de fondo»
- 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
¿Va fluido en portátiles y móviles normales?
Sí. Toda la hierba se dibuja en una sola llamada, el móvil usa 38.000 hojas y DPR 1,5, y si el equipo no llega a 40 fps la escena reduce hojas sola. El bucle se detiene cuando la escena no está en pantalla.
¿Puedo poner mi propio texto o un formulario encima?
Sí. El titular y el selector son HTML normal por encima del canvas; puedes sustituirlos por tu hero. La parte alta del cielo es oscura en las tres paletas, así que el texto claro se lee bien.
¿Qué pasa en el móvil, donde no hay cursor?
Arrastrar el dedo en horizontal peina la hierba sin bloquear el scroll vertical, y tras 2,5 segundos sin tocar un cursor invisible sigue peinando en ocho.
¿Cómo cambio los colores?
Cada paleta es un objeto con los colores del cielo, la hierba, la niebla y las motas. Edita sus valores o añade una nueva con su botón; la transición entre paletas es automática.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈10953 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2309 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
