BorderBeam y Spotlight

Una luz que recorre el borde de una tarjeta destacada, y una luz suave que sigue al puntero sobre una superficie.

import { BorderBeam, Spotlight } from '@alea/pro';

Ejemplos

Haz de borde y foco de luz

Una luz recorre una tarjeta destacada; una luz suave sigue al puntero.

Featured

Pro yearly

The beam marks the plan most people pick.

Spotlight

Move the pointer over this card.

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…

Component

--alea-beam-angle…
--alea-beam-duration…
--alea-beam-from…
--alea-beam-size…
--alea-beam-to…
--alea-beam-width…

Props

`BorderBeam` props

Una luz que recorre el borde de su padre (que necesita position: relative y un radio). Marca una tarjeta destacada o activa.

Prop	Tipo	Por defecto	Descripción
`colors`	`[string, string]`	-	Colores del haz (inicio, fin). Por defecto el degradado de acento.
`duration`	`number`	`6`	Segundos por vuelta. Por defecto 6.
`size`	`number`	`60`	Largo del haz en grados de la vuelta. Por defecto 60.
`width`	`number`	`1.5`	Grosor del borde en px. Por defecto 1.5.

`Spotlight` props

Ver 8 props heredadas

Una superficie con una luz suave que sigue al puntero, y un borde que brilla cerca de él.

Prop	Tipo	Por defecto
`as`	`ElementType`	`'div'`
`className`	`string`	-
`style`	`CSSProperties`	-

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.

`BorderBeam`

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-border-beam

`Spotlight`

Estados: Hover (CSS)Focus inside
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-spotlight

Ambas son decoración, ocultas para lectores de pantalla.
El haz se detiene con movimiento reducido; el foco de luz solo reacciona al puntero y nunca se mueve solo.

Qué hacer y qué evitar

Hacer

Marca una sola cosa: el plan destacado, la tarjeta activa.

Evitar

No pongas haces en todas las tarjetas; deja de significar algo.