Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Una portada a pantalla completa en la que 16.000 partículas llegan girando desde el fondo y escriben el nombre del negocio de izquierda a derecha. El texto se dibuja en un canvas oculto con la tipografía elegida y cada partícula busca un píxel del trazo, así que funciona con cualquier nombre, con ñ, tildes y signos de apertura. Al pasar el cursor se abre un hueco que gira alrededor del puntero; las partículas rápidas se encienden en color acento y vuelven con un muelle suave. El visitante puede escribir su propio nombre, cambiar entre serif, geométrica y cursiva o pulsar «Dispersar». Encaja como portada de marcas de autor, perfumerías, bodegas, restaurantes o estudios creativos, y como página de lanzamiento. Se adapta a cualquier paleta: fondo oscuro con partículas claras por defecto, o tema claro cambiando la mezcla.
Encaja bien en webs de
- Prompt
- ≈13.334 tokens · con Lite
- Librerías
- three
- Demo
- 28,3 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
- Actividad
- Ciudad
- Provincia
- Año de fundación
- Email de contacto
- Teléfono
- Etiqueta de colección
- Lema
- Color de fondo
- Color de las partículas y del texto
- Color de 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
- 6.501 palabras · ≈13.334 tokens
- Lite
- 1.238 palabras · ≈2.261 tokens
- Librerías
- three 0.186.1
- Peso de la demo
- 28,3 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.501 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,8/10
Calco prácticamente exacto: mismo nombre en partículas, marco, panel, física del remolino, repulsión del cursor, brisa automática y versión móvil. No hay diferencias visibles salvo el instante que recoge cada captura.
Prompt LiteAceptable6,5/10
Las partículas, la llegada en remolino, el cursor y la brisa se comportan como el original. Falla la interfaz: en escritorio el botón Dispersar (relleno de acento en vez de contorno) y el chip Cursiva se salen del panel, los rótulos del marco van dentro y no fuera, y los chips y el lema cambian de estilo.
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:- «Que las partículas vuelvan más secas, sin rebote»
- «Cambia el acento a verde oliva y el fondo a verde noche»
- «Añade una cuarta tipografía de palo seco fina»
- «Que el cursor atraiga las partículas en vez de apartarlas»
- 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
¿Funciona con nombres largos o con ñ y tildes?
Sí. El nombre se dibuja con la fuente real en un canvas y se muestrea; el tamaño del punto se ajusta a la densidad. Hasta 16 caracteres en una línea; en móvil, dos palabras largas se parten en dos líneas.
¿Puedo usar la tipografía de mi marca?
Sí, si está en Google Fonts o la cargas con @font-face: añádela al objeto FUENTES y a la lista de chips. El código espera a que la fuente cargue antes de muestrear.
¿Va fluido en móvil?
Usa 9.000 partículas por debajo de 720 px, limita el DPR a 1,5 y se pausa fuera de pantalla. El dedo abre el hueco y un toque lanza una onda; si nadie toca, una brisa automática cruza el nombre.
¿Y si el navegador no tiene WebGL o el usuario pide menos movimiento?
Sin WebGL se muestra el nombre en CSS con el mismo degradado. Con movimiento reducido las partículas aparecen ya colocadas, sin animación.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13334 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2261 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
