Persiana
GratisCristal y luz · WebGL
La pieza
Qué hace y dónde encaja
Una rejilla de puntos blancos sobre negro puro, dibujada en un canvas a pantalla completa. Cada punto es un muelle: el cursor lo atrae y lo agranda, el movimiento rápido deja una estela de inercia y la rejilla rebota al volver a su sitio. Cada clic o toque lanza una onda circular que empuja los puntos, los tiñe de un único color vivo y se apaga en menos de tres segundos; mantener pulsado aumenta la atracción y al soltar hay un rebote. Incluye resplandor suave, tema monocromo, onda con la tecla R, botón principal imantado y modo automático cuando nadie toca. Encaja en portadas de estudios y productos digitales, lanzamientos y fondos de evento. Cambia el color vivo en una sola variable.
Encaja bien en webs de
- Prompt
- ≈11.428 tokens · con Lite
- Librerías
- ninguna
- Demo
- 30,2 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:
- Nombre de la marca
- Etiqueta sobre el titular
- Titular
- Texto de apoyo
- Texto del botón principal
- Color vivo de las ondas
Í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.173 palabras · ≈11.428 tokens
- Lite
- 1.405 palabras · ≈2.303 tokens
- Librerías
- ninguna
- Peso de la demo
- 30,2 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- 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.173 palabras en el Completo y 1.405 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:- «Cambia el color vivo a naranja eléctrico»
- «Haz la rejilla más tensa y con menos rebote»
- «Que las ondas viajen más despacio y duren más»
- «Quita el resplandor y deja solo los puntos»
- 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 poner mi propio contenido encima?
Sí. El canvas es una capa aparte detrás de todo: sustituye la portada por tu contenido y deja los controles o quítalos. Los clics sobre enlaces y botones no lanzan ondas, así que no estorban.
¿Cómo funciona en el móvil?
Un toque lanza la onda y arrastrar mueve la atracción. Si nadie toca durante 2,6 segundos, un cursor virtual recorre la pantalla y lanza ondas solo. La rejilla es algo más densa y la resolución baja a 1,5x.
¿Se puede usar sin color, solo en blanco y negro?
Sí: el selector «Monocromo» lo deja en negro puro con puntos y ondas blancos. Para que arranque así, pon data-tema="mono" en la etiqueta html.
¿Pesa mucho o consume batería?
No usa librerías ni WebGL: son unos 31 KB de HTML con un canvas 2D. El bucle se pausa cuando la pieza sale de pantalla o la pestaña se oculta, y con movimiento reducido se dibuja un único fotograma.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11428 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2303 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
