Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una pantalla en negro puro con un único naranja eléctrico. Un interruptor enorme con palanca circular tiene dos muelles dibujados en zigzag que se comprimen y se estiran a la vez, y la palanca se estira y se aplasta con la velocidad. Al conmutar, un círculo blanco crece desde la palanca y todo el texto se invierte solo gracias a mix-blend-mode difference; el titular rueda letra a letra entre APAGADO y ENCENDIDO. Se arrastra con banda elástica, se lanza con un empujón y funciona con teclado y táctil. Incluye tres interruptores de escenas que dependen del maestro, un odómetro de conmutaciones, un medidor de consumo con muelle y un piloto automático que se explica solo. Ideal para webs de domótica, apps, SaaS y portfolios que quieran una microinteracción memorable; cambia el acento para adaptarla a tu marca.
Encaja bien en webs de
- Prompt
- ≈11.780 tokens · con Lite
- Librerías
- ninguna
- Demo
- 26,5 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
- Ciudad
- Color del fondo apagado (negro)
- Color de la luz encendida (blanco)
- Color de acento vivo
Í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.452 palabras · ≈11.780 tokens
- Lite
- 1.398 palabras · ≈2.497 tokens
- Librerías
- ninguna
- Peso de la demo
- 26,5 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.452 palabras en el Completo y 1.398 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 naranja por un verde ácido»
- «Que el muelle rebote más y tarde más en asentarse»
- «Quita las tres escenas y deja solo el interruptor general»
- «Cambia los textos por los de una app de alarmas en Portomar»
- 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
¿Por qué el texto cambia de color sin tocar el CSS de cada elemento?
Porque todo el texto y las líneas usan mix-blend-mode difference con color blanco: sobre el fondo negro se ven blancos y, cuando el círculo de luz pasa por encima, se ven negros. Solo hay que evitar que sus contenedores tengan transform u opacity menor que 1.
¿Puedo usarlo como un interruptor de modo oscuro de verdad en mi web?
Sí: llama a tu función de cambio de tema en el callback del interruptor general (main.onChange) y deja que el círculo de luz sea la transición. Si usas una web con varias páginas, guarda el estado en localStorage con try/catch.
¿Cómo cambio lo blando o rígido que se siente?
Con la rigidez k y el amortiguamiento c del muelle principal (380 y 18). Sube k para algo más seco y baja c para más rebote. El monitor del pie muestra la posición y la velocidad en vivo para que lo ajustes a ojo.
¿Funciona con teclado, táctil y movimiento reducido?
Sí. Es un botón con role switch, se maneja con flechas, Inicio, Fin y Espacio, el arrastre táctil respeta el scroll vertical y con prefers-reduced-motion se quita el piloto automático y todo cambia al instante sin rebotes.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11780 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2497 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
