'/%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
Fondos
Campos de color aurora, patrones de puntos y líneas, grano para degradados, y un desenfoque progresivo en los bordes de scroll.
import { Aurora, Pattern, Grain, BlurEdge } from '@alea/pro';
Ejemplos
Fondos
Aurora, un patrón de puntos o líneas y grano. Decorativos y ocultos para lectores de pantalla; los bucles se detienen con movimiento reducido.
Borde desenfocado
Envuelve un área con scroll: el contenido bajo sus bordes se desenfoca y desvanece en vez de cortarse. Cada borde aparece solo cuando hay más para desplazar.
Release note 1: tokens, motion and docs updates.
Release note 2: tokens, motion and docs updates.
Release note 3: tokens, motion and docs updates.
Release note 4: tokens, motion and docs updates.
Release note 5: tokens, motion and docs updates.
Release note 6: tokens, motion and docs updates.
Release note 7: tokens, motion and docs updates.
Release note 8: tokens, motion and docs updates.
Release note 9: tokens, motion and docs updates.
Release note 10: tokens, motion and docs updates.
Release note 11: tokens, motion and docs updates.
Release note 12: tokens, motion and docs updates.
Release note 13: tokens, motion and docs updates.
Release note 14: tokens, motion and docs updates.
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-accent…--alea-accent-second…--alea-accent-third…
Motion
--alea-motion-ease-in-out…
Component
--alea-aurora-1…--alea-aurora-2…--alea-aurora-3…
Props
Aurora props
Campos de color lentos y suaves detrás de un hero o una sección. Decorativo; se detiene con movimiento reducido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | |
colors | [string, string, string] | - | |
style | CSSProperties | - |
Pattern props
Una grilla tranquila de puntos o líneas detrás del contenido, que se desvanece en los bordes.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | |
fade | boolean | true | |
size | number | 24 | |
variant | "grid" | "dots" | 'dots' |
Grain props
Ruido fino sobre un degradado para que no se formen bandas. Ponlo al final dentro de un padre posicionado.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | |
opacity | number | 0.12 |
BlurEdge props
Envuelve un área con scroll: el contenido que pasa bajo sus bordes se desenfoca y desvanece de forma progresiva en vez de cortarse.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El área con scroll (su primer elemento es el que se desplaza). |
className | string | - | |
edges | "bottom" | "both" | "top" | 'bottom' | Qué bordes se desenfocan: bottom (por defecto), top o both. Cada uno aparece solo cuando hay más contenido más allá. |
height | number | 64 | Altura del desenfoque en px. Por defecto 64. |
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.
Aurora
- 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-aurora
Pattern
- Variantes
variantgriddots- 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-pattern- Atributos data
data-variant=dotsdata-variant=griddata-fade
Grain
- 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-grain
BlurEdge
- Variantes
edgesbottombothtop- 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-blur-edge.alea-blur-edge-wrap- Atributos data
data-hiddendata-position=bottomdata-position=top
Accesibilidad
- Todos son decoración, ocultos para lectores de pantalla, y la aurora se detiene con movimiento reducido.
- Mantén el contraste del texto encima; el patrón se desvanece en los bordes por defecto.
Qué hacer y qué evitar
Hacer
- Usa un fondo por sección.
- Pon el fondo primero dentro de un padre posicionado y el contenido encima.
Evitar
- No pongas la aurora detrás de texto largo.