'/%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}
EffectsAlea Pro
BorderBeam and Spotlight
A light that runs along the border of a featured card, and a soft light that follows the pointer over a surface.
import { BorderBeam, Spotlight } from '@alea/pro';
Examples
Border beam and spotlight
A light runs along a featured card; a soft light follows the pointer.
Pro yearly
The beam marks the plan most people pick.
Spotlight
Move the pointer over this card.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
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
A light that runs along the border of its parent (which needs position: relative and a radius). Marks a featured or active card.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | - | Beam colors (start, end). Default the accent gradient. |
duration | number | 6 | Seconds per lap. Default 6. |
size | number | 60 | Length of the beam in degrees of the lap. Default 60. |
width | number | 1.5 | Border width in px. Default 1.5. |
Spotlight props
A surface with a soft light that follows the pointer, and a border that glows near it.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
style | CSSProperties | - |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
BorderBeam
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-border-beam
Spotlight
- States
- Hover (CSS)Focus inside
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-spotlight
Accessibility
- Both are decoration, hidden from screen readers.
- The beam stops with reduced motion; the spotlight only reacts to the pointer and never moves on its own.
Do and don't
Do
- Mark one thing: the featured plan, the active card.
Don't
- Don't put beams on every card; it stops meaning anything.