Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un rastro de tinta que sigue al cursor sobre una portada de papel crema. En su versión fluida es una simulación de fluidos en WebGL2 escrita a mano: la tinta se arrastra, se riza en los bordes, se oscurece donde se acumula y desaparece en unos segundos. Se guarda como absorbancia, así que dos tintas se mezclan como en papel real (añil sobre bermellón da granate). Incluye una versión ligera en Canvas 2D, con trazo de pincel que envejece, que también sirve de fallback. Un pincel automático dibuja solo cuando nadie toca el puntero, lo que resuelve el táctil y la vista previa, y clic, toque o foco con teclado sueltan una gota. Encaja en portadas de estudios creativos, imprentas, galerías, marcas de papelería, tatuaje o caligrafía. Funciona con cualquier color de marca de valor medio u oscuro sobre fondo claro.
Encaja bien en webs de
- Prompt
- ≈15.410 tokens · con Lite
- Librerías
- ninguna
- Demo
- 35,8 KB · ligero
- Prueba en frío
- 9,7/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
- Teléfono
- Tinta principal (color de marca)
- Nombre de la tinta principal
- Segunda tinta
- Nombre de la segunda tinta
- Tercera tinta
- Nombre de la tercera tinta
- Color del papel (fondo)
Í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.257 palabras · ≈15.410 tokens
- Lite
- 1.269 palabras · ≈2.225 tokens
- Librerías
- ninguna
- Peso de la demo
- 35,8 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.257 palabras en el Completo y 1.269 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,7/10
Calco prácticamente exacto: mismo maquetado, textos, tipografías, papel con grano y el mismo motor de fluidos con sus valores; las diferencias entre capturas solo vienen del momento en que se toma el rastro, que es aleatorio.
Prompt LiteAceptable6,2/10
La portada y el motor de tinta (absorbancia, bordes húmedos, pincel automático, dos motores) están bien reproducidos, pero el grano del papel sale mucho más fuerte, la tinta forma manchas con núcleo casi negro en vez de volutas finas, «tinta» sale en azul y las secciones El taller y Visitas cambian de composición: faltan las descripciones de los oficios y los datos van en 2×2 con letra serif grande.
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 el rastro dure el doble antes de desaparecer»
- «Más remolinos y volutas en los bordes de la tinta»
- «Usa solo la versión ligera en Canvas 2D»
- «Cambia la tinta principal a verde botella»
- 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
¿Tapa el texto de mi web?
No lo aclara nunca: el rastro se funde en modo multiplicar, así que el texto oscuro sigue oscuro, y la tinta desaparece en dos o tres segundos. El pincel automático pinta más suave y, en la portada, en la zona libre sobre el titular.
¿Qué pasa en móvil o sin ratón?
Al deslizar el dedo también deja tinta y un toque suelta una gota. Si nadie toca la pantalla, un pincel automático dibuja solo tras 2,4 segundos.
¿Funciona en navegadores sin WebGL2?
Sí. Si falta WebGL2 o la extensión de texturas flotantes, o se pierde la GPU, cambia sola a la versión ligera en Canvas 2D y el botón «Fluido» se desactiva.
¿Puedo usarla sobre un fondo oscuro?
Está pensada para papel claro. Para fondo oscuro hay que cambiar el modo de fusión a screen y emitir 1 − exp(−tinta) en el shader; el prompt explica el cambio en Personalización.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈15410 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2225 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
