kennedys0/taste-style-glassmorphism

Usa esta skill solo después de que un usuario elija explícitamente o una configuración de proyecto confirmada lo especifique. Para solicitudes de UI nuevas no explicadas, usa un selector de estilo como [style-selector] en lugar de decidir el gusto del usuario aquí. La marca existente, la accesibilidad y las anulaciones del usuario superan todos los ejemplos siguientes. La siguiente guía de estilo no es un permiso para comenzar a programar UI antes de la selección de estilo.

Paquete de estilo: Glassmorphism

ID: glassmorphism
Firma: Superficies visibles de vidrio esmerilado y translúcidas que flotan sobre capas de luz/color diferenciadas, con contenido claro y profundidad funcional.

Este es un estilo de aceptación explícita, no el motor predeterminado. Actívalo solo cuando el usuario lo seleccione o el sistema de diseño del proyecto lo establezca. Respeta la anatomía del producto, la dirección de la marca, la accesibilidad y las interacciones existentes. Una página oscura genérica con un botón azul no califica como Glassmorphism.

Buen ajuste / compensaciones

• Funciona bien para: Portafolios expresivos, páginas de aterrizaje de productos, superposiciones de navegación, interfaces multimedia, paneles creativos y demos de UI acotados.
• Usar con cuidado para: Tablas de datos densas, lectura de formato largo, formularios críticos de accesibilidad o fotos impredecibles detrás del texto. Coloca contenido de alta densidad en superficies adecuadamente sólidas o con tinte fuerte.
• Direcciones de referencia: Un panel esmerilado claro y lechoso con luz atmosférica azul suave y geometría redondeada suave; o un sistema de vidrio oscuro con paneles de pizarra translúcidos, iluminación violeta/cian apagada y controles legibles. Ambas son válidas. Ninguna fuerza una paleta de marca fija.

Puerta de fidelidad del material de vidrio — obligatoria

Antes de llamar completa a una página de glassmorphism, la ventana de visualización inicial debe leerse visiblemente como una composición de vidrio. Si un usuario eligió este estilo, un fondo grande y plano más tipografía y un botón convencional es un FALLO, incluso si las variables CSS se nombran glass.

Un componente de vidrio prominente exitoso demuestra todo lo siguiente:

1. Profundidad de fondo: un fondo diferenciado significativo detrás de la superficie (campos de luz suave, gradientes controlados, formas, fotografía proporcionada para el proyecto o contenido de la aplicación existente). El vidrio necesita algo que filtrar visiblemente. Los gradientes intencionados y las formas de color ambiental están explícitamente permitidos por el motor de gusto anti-slop para Glassmorphism cuando establecen luz visible que pasa a través de un panel. No son inherentemente slop.
2. Transparencia: el panel permite que algo de croma/luminancia del fondo influya en su apariencia. Evita tarjetas oscuras completamente opacas comercializadas como vidrio.
3. Esmerilado: backdrop-filter: blur(...) (y -webkit-backdrop-filter si es necesario) suaviza visiblemente los detalles del fondo dentro del panel, mientras que el fondo expuesto cercano permanece más claro. Un fondo de imagen borroso por sí solo no es vidrio esmerilado.
4. Borde y profundidad legibles: línea brillante suave/destacada, brillo interior leve, silueta redondeada cuando corresponda y sombra o separación moderada. El vidrio debe tener un límite perceptible, no una losa gris plana.
5. Claridad del contenido: el texto, los indicadores de enfoque, los estados de control y las acciones permanecen legibles en el fondo compuesto real y con los efectos de respaldo desactivados.

Prueba de la primera ventana: En una captura de pantalla de escritorio, identifica el panel prominente, el fondo distinto detrás de él, la apariencia borrosa/teñida dentro de su límite y su borde destacado sin leer el título de la página. Si no es posible, revisa el material antes de agregar más contenido.

No es una regla de recuento de tarjetas: Un panel principal prominente o algunas superficies de demostración de componentes es suficiente. No cubras cada sección con tarjetas transparentes idénticas. En una muestra de componentes, usa ejemplos funcionales honestos (interruptor, entrada, diálogo, toast como demo etiquetada, navegación) para demostrar el material y sus estados; no inventes estado real del producto ni pruebas sociales.

Excepción explícita de gradiente de fondo — el vidrio puede brillar

Anulación específica de Glassmorphism: La advertencia universal anti-slop contra gradientes decorativos genéricos NO DEBE interpretarse como una prohibición de gradientes, campos de color de malla, formas de color borrosas, iluminación atmosférica o imágenes de fondo coherentes aquí. Estas son capas de fondo habilitadoras de material válidas, incluso cuando son decorativas, porque hacen perceptibles la transparencia, el esmerilado, los bordes y la profundidad. Esta exención no es un permiso para contenido fabricado o efectos inaccesibles/lentos.

• Tratamientos de fondo permitidos: 1–3 campos de luz radial-gradient() coherentes, un gradiente de malla o de múltiples paradas moderado, formas de color ambiental borrosas usando pseudoelementos, una ilustración/fotografía alineada con la marca o contenido existente detrás de un panel. El CSS estático suele ser suficiente y no necesita imágenes adicionales ni bibliotecas de animación.
• Ejemplo claro / lechoso: base blanca/hielo con campos de luz suave azul/lavanda fríos detrás de una tarjeta blanca translúcida; el panel suaviza visiblemente los límites de color.
• Ejemplo oscuro / ahumado: base de tinta oscura con áreas de luz violeta/cian/verde azulado controladas detrás de paneles de pizarra translúcidos; los campos de gradiente brillante no deben oscurecer el texto blanco del cuerpo.
• Requisito de composición: Coloca al menos una transición de luz/color o elemento de fondo reconocible detrás y parcialmente más allá del panel de vidrio principal para que la diferencia filtrada vs. sin filtrar sea visible; un gradiente uniforme de pantalla completa sin variación local aún puede fallar.
• Control de profundidad: El fondo debe tener menos énfasis que el contenido; usa pocas fuentes de luz con caída natural y posiciones intencionales, en lugar de burbujas púrpura/azul predeterminadas en cada página. Usa la paleta de marca del usuario y las referencias proporcionadas.
• Rendimiento y accesibilidad: Prefiere gradientes CSS estáticos y superficies moderadas. Evita animaciones de gradiente en movimiento de pantalla completa, desenfoques de fondo de página completa excesivos, texto pequeño de bajo contraste y anillos de enfoque ocultos. Honra las preferencias de transparencia y prueba respaldos opacos legibles.
• Interpretación anti-slop: Evalúa los gradientes por propósito del material, moderación y legibilidad, no por su mera presencia. Eliminar un fondo de vidrio útil para satisfacer una heurística de gradiente genérico es una regresión de diseño.

Una captura de pantalla sólida debe hacer que el material esmerilado sea obvio incluso si todos los encabezados y etiquetas están ocultos. Consulta examples/glassmorphism/frosted-surfaces.css para una implementación inicial y tests/glassmorphism-visual.md para criterios de aceptación visual.

Tipografía y escritura

Usa una sans limpia adecuada para la marca (system sans, DM Sans, Inter, etc.). Tamaño de lectura típico 15–17 px; texto de título puede ser más grande. Mantén una jerarquía tipográfica sólida y evita texto ultrafino sobre fondos de vidrio variables. Un panel esmerilado claro a menudo se beneficia de un texto de primer plano profundo; un panel oscuro ahumado de un blanco roto de alto contraste. Nunca sustituyas el brillo de color por la jerarquía tipográfica.

Dirección de color

Elige una dirección coherente del contexto, o usa la referencia del usuario:

• Vidrio claro y lechoso / esmerilado: campo de blanco hielo pálido o gris claro (#F0F4F8), luz difusa azul fría o con otro tinte de marca detrás de paneles blancos semiópacuales (rgba(255, 255, 255, 0.45)). La tipografía es pizarra oscura (#0F172A) con pizarra apagada (#475569). Un borde destacado de vidrio suave es visible a lo largo del borde superior (rgba(255, 255, 255, 0.75)).
• Vidrio oscuro ahumado / nocturno: base de azul marino/tinta oscura (#090D16) con campos de luz ambiental violeta/azul/verde azulado detrás de paneles translúcidos gris azulados (rgba(22, 28, 45, 0.55)). El texto de primer plano es porcelana nítida (#F8FAFC) con pizarra apagada (#94A3B8); los paneles oscuros no son rectángulos casi opacos.
• Regla de acoplamiento de tema y anti-colisión: Al cambiar entre modos de vidrio claro y oscuro, el texto de primer plano, los bordes y las fuentes de luz ambiental DEBEN cambiar al unísono. El texto de primer plano debe mantener al menos 4.5:1 de contraste tanto contra la superficie de vidrio esmerilado como contra el fondo iluminado detrás de él. Nunca dejes texto oscuro sobre vidrio oscuro ahumado o texto blanco sobre vidrio claro lechoso.

El color solo no es Glassmorphism. Nunca recurras a púrpura/cian neón para cada marca. Conserva la marca y los requisitos de alto contraste. Verifica el contraste de primer plano compuesto real (WCAG AA 4.5:1 texto normal, 3:1 texto grande; controles no textuales relevantes al menos 3:1).

Diseño y geometría

• Usa una composición de primer plano/fondo intencionada: fondo ambiental → superficies de vidrio → contenido nítido y controles interactivos. Distingue 2–3 planos de profundidad sin desorden de tarjetas anidadas.
• Usa esquinas consistentes (comúnmente 16–28 px para paneles grandes) y espaciado. Evita una primera ventana de tamaño grande completamente vacía solo para alcanzar 100svh.
• En pantallas responsivas, los paneles deben apilarse limpiamente, conservar un relleno legible y evitar desenfoque recortado o desbordamiento. El encabezado, el contenido principal y los controles deben caber o expandirse naturalmente.

Superficies, profundidad, textura

• Receta de vidrio: tinte semitransparente (rgba(...) o color-mix), backdrop-filter: blur(16px) saturate(140%), un borde de 1px translúcido, borde interior superior suave y sombra en capas suave. Comienza con alrededor de 12–24 px de desenfoque, luego ajusta contra el fondo real.
• Vidrio claro: usa una superficie teñida de blanco con aproximadamente 0.24–0.55 alfa cuando el fondo lo permita; demasiada opacidad elimina el efecto esmerilado. El contraste de texto fuerte sigue siendo obligatorio.
• Vidrio oscuro: usa un tinte pizarra/índigo alrededor de 0.25–0.56 alfa, borde más brillante visible y luz ambiental contrastante detrás de él. Evita tanto las losas negras absolutas como los halos neón irritantes para la vista.
• Indicadores de profundidad: fondo suave y borroso detrás del panel, un brillo interior moderado, un brillo/reflejo de borde sutil. No es necesario un fondo de burbuja genérico de stock.
• Usa @supports como respaldo con superficies legibles sólidas cuando falte el filtro de fondo. Proporciona una alternativa de transparencia reducida/alto contraste. El desenfoque en sí mismo nunca debe ser necesario para comprender el contenido o interactuar.

Consulta examples/glassmorphism/frosted-surfaces.css en el enrutador completo de Taste Engine (la receta de tokens anterior también funciona en instalaciones independientes) para tokens iniciales de luz y oscuridad independientes. Adapta los tokens al proyecto; no copies todos los ejemplos ni fuerces una paleta fija.

Anatomía de componentes e interacción

• Hero: haz que la estética seleccionada sea obvia de inmediato. Coloca el encabezado real del Taste Engine/proyecto y las CTA dentro o superponiendo un plano de vidrio visible, o presenta una composición de ventana de vidrio igualmente convincente. Proporciona un fondo iluminado significativo detrás del panel.
• Encabezado/navegación: una barra esmerilada sutil puede superponerse al fondo, pero mantén el contraste y el enfoque visibles. Evita una barra superior opaca plana visualmente desconectada de la página al demostrar la UI de vidrio.
• Ejemplos funcionales: interruptor con estado de encendido/apagado real, opción seleccionable, pestaña, modal, formulario y un toast solo si se activa genuinamente o se marca claramente como una demostración estática. Muestra estados enfocado, hover, activo, deshabilitado y error cuando corresponda. Las superficies de control en primer plano pueden ser más opacas que el vidrio principal para mayor usabilidad.
• Botones: pueden ser superficies de acento sólidas para la asequibilidad; no todos los controles deben ser transparentes. Un botón convencional no compensa la falta de vidrio en otras partes.
• Contenido: reserva contenedores legibles fuertemente teñidos o sólidos para párrafos largos, tablas y formularios; no coloques párrafos sobre imágenes translúcidas ruidosas.

Movimiento

Usa retroalimentación de interacción en lugar de movimiento ambiental. 140–220 ms de desvanecimiento/traslación en hover, selección, revelación de panel o modal solo cuando la acción del usuario lo justifique. Preserva la continuidad de la capa de vidrio. Sin orbes a la deriva interminables, haces de luz en movimiento ni giros 3D obligatorios.

Receta opcional de Anime.js v4

• Decisión de movimiento: transiciones CSS/nativas para la mayoría de las interacciones; Anime.js v4 es opcional para transiciones de estado coordinadas, no una dependencia visual requerida.
• Duración inicial: 180 ms, easing sin rebote. Anima opacity/transform amigables con el compositor en lugar de animar continuamente el desenfoque o box-shadow.
• Reducir movimiento: honra prefers-reduced-motion y permite transiciones interrumpidas/cortocircuitadas.
• Dependencia: sigue references/motion-engine.md del Taste Engine cuando esté disponible; la skill independiente aplica la misma guía.

Redacción de UI y microcopy

Directa, específica del producto y concisa. El vidrio es un material, no una excusa para un texto vago como "el futuro es transparente". Evita insignias falsas, estado de verificación, usuarios, puntuaciones de productividad o testimonios. Los datos de demostración deben estar etiquetados explícitamente.

Tokens iniciales (sugerencias, no un tema completo)

Token	Valor predeterminado claro	Valor predeterminado oscuro
--taste-radius-sm	14px	14px
--taste-radius-lg	24px	24px
--taste-glass-blur	18px	18px
--taste-glass-bg	#f0f4f8	#090d16
--taste-glass-surface	rgba(255, 255, 255, 0.45)	rgba(22, 28, 45, 0.55)
--taste-glass-text	#0f172a	#f8fafc
--taste-glass-text-muted	#475569	#94a3b8
--taste-glass-light	rgba(255, 255, 255, 0.38)	rgba(255, 255, 255, 0.38)
--taste-glass-dark	rgba(36, 45, 72, 0.38)	rgba(36, 45, 72, 0.38)
--taste-glass-edge-light	rgba(255, 255, 255, 0.65)	rgba(255, 255, 255, 0.18)
--taste-motion-duration	180ms	180ms

Estos son solo valores iniciales. El resultado debe verificarse contra el contenido y el fondo reales. No cargues secretamente fuentes, ilustraciones o bibliotecas de movimiento.

Composición de héroe (primera ventana completa)

Para páginas de portafolio/aterrizaje/inicio público con un héroe, usa una composición de encabezado + héroe de primera ventana (min-height: 100svh con respaldo 100vh) en lugar de un héroe de altura fija recortado. Resta un encabezado de flujo real según sea necesario, no dos veces para superposiciones. Crece naturalmente en pantallas móviles pequeñas y con zoom. Requisito de material: la primera ventana muestra un panel esmerilado inconfundible que filtra un fondo visible y cuidadosamente compuesto, no un 80% de espacio oscuro vacío sobre texto ordinario. Construye interés visual a partir de una estructura en capas significativa y luz ambiental alineada con la marca; no inventes fotos, falsos...