Malla de color
GratisFlujo · CSS
La pieza
Qué hace y dónde encaja
Un cometa de luz hecho con conic-gradient recorre el borde redondeado de tarjetas y botones, con cola verde agua, cuerpo coral y cabeza crema. Cuando acercas el cursor, el giro se apaga y un segundo arco se vuelve hacia ti con una intensidad que depende de la distancia; en una rejilla, varias piezas se encienden a la vez como si pasaras una linterna. La variante de brillo difuso repite la luz desenfocada detrás del elemento para destacar la tarifa principal o el botón de reserva. Es CSS con @property, color-mix y mask-composite más un JS mínimo, sin librerías. En móvil el halo se mueve solo y se enciende al hacer scroll. Encaja en tablas de precios, llamadas a la acción, fichas de servicio y menús de producto; funciona igual con halos monocromos, en azul frío o en tonos de marca.
Encaja bien en webs de
- Prompt
- ≈12.779 tokens · con Lite
- Librerías
- ninguna
- Demo
- 26,4 KB · ligero
- Prueba en frío
- 9,9/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
- Barrio y ciudad
- Email de contacto
- Teléfono
- Color de fondo
- Color principal del halo
- Color de acento del halo
- Color de la cabeza de luz
- Color de la cola fría
- Duración de una vuelta
Í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.057 palabras · ≈12.779 tokens
- Lite
- 1.739 palabras · ≈3.273 tokens
- Librerías
- ninguna
- Peso de la demo
- 26,4 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
6.057 palabras en el Completo y 1.739 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,9/10
Calco exacto de la demo, idéntico byte a byte: mismo halo que gira y se vuelve hacia el cursor, el mismo brillo difuso, la misma maquetación y el mismo comportamiento en móvil. No hay diferencias visibles.
Prompt LiteFiel a la demo7,1/10
El efecto es el mismo: el cometa gira, el arco mira al cursor, las piezas se encienden como una linterna y el brillo difuso sale hacia fuera. Cambia la maquetación: la portada ocupa toda la pantalla y empuja las tarifas por debajo del primer pantallazo, el sello «La más pedida» flota sobre el borde de la tarjeta y la cabecera de Equipo y los datos de portada van apilados.
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:- «Haz el halo monocromo en azul eléctrico»
- «Que dé una vuelta cada 4 segundos»
- «Añade el brillo difuso también a las tres tarjetas»
- «Haz el borde de 3 px y el cometa más largo»
- 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 usar el halo solo en un botón, sin el resto de la página?
Sí. Copia el bloque @property, las reglas de [data-halo] y el script; después añade data-halo="giro" o data-halo="cursor" al botón. Necesita border-radius propio y un fondo opaco.
¿Por qué el brillo difuso aparece encima de mi tarjeta?
Porque la tarjeta tiene transform, opacity, filter o will-change, y eso crea un contexto de apilamiento. Quita esas propiedades del elemento con halo (anima sus hijos) y pon isolation: isolate en la sección que lo contiene.
¿Funciona en móvil, donde no hay cursor?
Sí. En pantallas táctiles un puntero virtual recorre la pantalla solo, así que los halos se orientan y se encienden al hacer scroll. El giro de los elementos destacados funciona igual.
¿Qué navegadores lo soportan?
Chrome, Edge, Safari y Firefox actuales soportan @property, conic-gradient, color-mix y mask-composite. En un navegador antiguo sin @property el borde se ve, pero el giro salta en lugar de fluir.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈12779 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3273 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
