'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
EfectosAlea Pro
Glass y LiquidGlass
El vidrio esmerilado es gratis (Card variant="glass", surface="glass" en el ThemeProvider); LiquidGlass en Pro curva lo que tiene detrás en los bordes, con un borde especular.
import { LiquidGlass } from '@alea/pro';
Ejemplos
Superficies de vidrio
Gratis: Card variant="glass" y surface="glass". Pro: LiquidGlass curva lo que tiene detrás en los bordes.
Ajusta el vidrio esmerilado
Desenfoque, saturación y tinte son variables CSS; mueve los sliders para ver qué hace cada una.
--alea-glass-blur: 18px; --alea-glass-saturate: 170%;
Vidrio para un área completa
data-surface="glass" convierte en vidrio todas las superficies flotantes de adentro: aquí una navbar y su menú sobre un hero tipo foto.
Vidrio líquido, refracción
Arrastra el slider: las franjas de atrás se curvan cerca de los bordes (Chromium); en otros navegadores sigue siendo vidrio esmerilado.
Cuándo usar vidrio
El vidrio dice "esto flota sobre la página": mantiene visible el contenido de atrás, así la gente no pierde su lugar. Úsalo para superficies que están sobre contenido en movimiento o colorido: una navbar sobre un hero, una barra de herramientas sobre un lienzo, un reproductor sobre una portada, un popover sobre una foto.
- Superficies flotantes sobre imágenes o degradados: sí.
- Sobre fondos lisos parece una tarjeta gris y gasta GPU para nada: usa una superficie sólida.
- Sobre texto (una página densa que pasa bajo una navbar) el desenfoque debe ser lo bastante fuerte para que no se pueda leer el texto de atrás; los 18 px por defecto lo son.
- Nunca para lectura larga: tarjetas de contenido, tablas y formularios siguen sólidos.
Cómo funciona
- Vidrio esmerilado (gratis): un tinte mezclado de la superficie del tema (62% en oscuro, 58% en claro), backdrop-filter: blur(18px) saturate(170%), y un borde: una línea clara de 1 px arriba y un borde fino, así el canto se lee sobre cualquier fondo.
- Vidrio líquido (Pro): lo mismo, más un mapa de desplazamiento SVG (feTurbulence y feDisplacementMap) aplicado al fondo, así lo que está detrás se curva cerca de los bordes como una lente, y un brillo especular radial. La prop refraction define cuántos píxeles se desplaza el fondo.
- Ambos son solo pintura: sin cambios de diseño, sin JavaScript por cuadro. LiquidGlass detecta Chromium una vez para decidir si agrega el desplazamiento.
Tres formas de usarlo
| Cómo | Qué hace | Paquete |
|---|---|---|
| <Card variant="glass"> | Una tarjeta o panel de vidrio | @alea/ui |
| <ThemeProvider surface="glass"> o data-surface="glass" en un contenedor | Todas las superficies flotantes de adentro: navbar, popovers, menús, diálogos, drawers, toasts, paleta de comandos, hover cards, navegación inferior | @alea/ui |
| className="alea-glass" | Cualquier elemento tuyo | @alea/ui |
| <LiquidGlass refraction blur tint> | Una superficie tipo lente que curva lo que tiene detrás | @alea/pro |
Ajústalo
| Variable | Por defecto | Qué cambia |
|---|---|---|
| --alea-glass-blur | 18px | Cuánto se desenfoca el fondo. Por debajo de 12 px se empieza a ver el texto de atrás. |
| --alea-glass-saturate | 170% | Los colores de atrás se ven más intensos, así el vidrio no se ve apagado. |
| --alea-glass-tint | superficie al 62% (oscuro) / 58% (claro) | El color del vidrio. Más opaco se lee mejor, menos opaco muestra más. |
| --alea-glass-rim | una línea clara arriba y un borde fino | El canto. Ponlo en none para vidrio sin borde. |
| --alea-lg-blur (prop blur de LiquidGlass) | 6px | El vidrio líquido desenfoca menos, así la curvatura sigue visible. |
| prop refraction | 28 | Píxeles de desplazamiento en los bordes. 0 es vidrio esmerilado; de 40 en adelante es fuerte. |
Navegadores y alternativas
| Navegador | Vidrio esmerilado | Vidrio líquido |
|---|---|---|
| Chrome, Edge, Arc, Brave, Opera | Sí | Sí, con refracción |
| Safari (macOS e iOS) | Sí (-webkit-backdrop-filter) | Esmerilado, sin refracción (Safari ignora url() en backdrop-filter) |
| Firefox | Sí | Esmerilado, sin refracción |
| Sin backdrop-filter | Superficie elevada sólida | Tinte sólido |
| prefers-reduced-transparency | Casi opaco (94%) | Casi opaco (92%) |
Rendimiento
- Cada superficie de vidrio hace que el navegador desenfoque lo que tiene detrás en cada cuadro que cambia: unas pocas en pantalla está bien, docenas (una tarjeta de vidrio por fila de una lista) no.
- No uses vidrio en áreas grandes con scroll rápido en teléfonos de gama baja; una navbar fija es el tamaño justo.
- El vidrio líquido cuesta un poco más que el esmerilado (una pasada de filtro SVG); úsalo para un elemento destacado, no para todas las superficies.
- El vidrio dentro de un padre escalado o transformado se vuelve a pintar en cada cuadro de animación; mejor anima su opacidad.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-surface…
Radius
--alea-radius-lg…
Component
--alea-lg-blur…--alea-lg-filter…--alea-lg-tint…
Props
LiquidGlass props
Vidrio que curva lo que tiene detrás en los bordes como una lente, con un borde especular. Vuelve a vidrio esmerilado donde no se puede.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'div' | |
blur | number | 6 | Desenfoque del fondo en px. Por defecto 6. |
className | string | - | |
refraction | number | 28 | Cuánto curvan los bordes lo que hay detrás (px de desplazamiento). Por defecto 28. Solo Chromium; los demás reciben vidrio esmerilado. |
style | CSSProperties | - | |
tint | string | - | Tinte sobre el vidrio, cualquier color CSS. Por defecto un poco del color de la superficie. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-liquid-glass.alea-fx-defs.alea-liquid-glass-content- Atributos data
data-refract
Accesibilidad
- El texto sobre vidrio conserva su contraste porque el tinte se mezcla con el color de la superficie; revisa fondos recargados con ContrastBadge.
- Con prefers-reduced-transparency el vidrio se vuelve casi opaco.
- Donde no hay backdrop-filter, el vidrio vuelve a una superficie sólida.
Qué hacer y qué evitar
Hacer
- Usa vidrio en superficies flotantes sobre contenido: navbars, popovers, barras de herramientas.
- Mantén suave lo que está detrás del vidrio (degradados, fotos), no texto.
Evitar
- No pongas texto largo sobre vidrio.
- No apiles vidrio sobre vidrio.