EfectosAlea Pro

Meteoros, ondas, mancha y destellos

Movimiento tranquilo para heroes y estados vacíos: meteoros, anillos de onda, una mancha que cambia de forma, destellos alrededor de una palabra y una grilla que se ilumina bajo el puntero.

import { Meteors, Ripple, Blob, Sparkles, InteractiveGrid } from '@alea/pro';

Ejemplos

Fondos ambientales

Meteoros, anillos de onda, una mancha que cambia de forma y destellos. Todos decorativos; todos se detienen con movimiento reducido.

Meteors

Ripple

Blob

New in Pro

Grilla interactiva

Las celdas se iluminan bajo el puntero y se apagan después: un fondo de hero tranquilo y divertido.

Move over the grid

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-text…

Props

`Meteors` props

Estelas que caen en diagonal por una sección oscura, como meteoros. Decorativo; se detiene con movimiento reducido.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-
`count`	`number`	`14`

`Ripple` props

Anillos que se expanden desde el centro detrás del contenido: "esto está en vivo" o "mira aquí" para una llamada a la acción. Decorativo.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-
`rings`	`number`	`5`

`Blob` props

Una forma orgánica que cambia lentamente: un acento suave detrás de un hero, un avatar o un estado vacío. Decorativo.

Prop	Tipo	Por defecto
`className`	`string`	-
`color`	`string`	-
`size`	`number`	`320`
`style`	`CSSProperties`	-

`Sparkles` props

Pequeñas estrellas que titilan alrededor del contenido: para "nuevo" o "magia" (una función de IA, un lanzamiento). Decorativo.

Prop	Tipo	Por defecto
`as`	`ElementType`	`'span'`
`className`	`string`	-
`count`	`number`	`8`
`style`	`CSSProperties`	-

`InteractiveGrid` props

Una grilla de celdas que se iluminan bajo el puntero y se apagan después: un fondo tranquilo y divertido para un hero. Decorativo.

Prop	Tipo	Por defecto	Descripción
`cell`	`number`	`40`
`className`	`string`	-

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.

`Meteors`

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-meteors

`Ripple`

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-ripple-rings

`Blob`

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-blob

`Sparkles`

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-sparkles.alea-sparkles-layer.alea-sparkles-content

`InteractiveGrid`

Estados: Hover (CSS)
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-igrid

Todos son decoración, ocultos para lectores de pantalla.
Cada bucle se detiene con movimiento reducido; los meteoros desaparecen.

Qué hacer y qué evitar

Hacer

Un efecto ambiental por sección, detrás de contenido que no lo necesita para entenderse.

Evitar

No pongas fondos en movimiento detrás de texto que se lee por mucho tiempo.