'/%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
Burst and Marquee
A small burst of sparks for a real success, and a loop of logos or quotes that pauses on hover.
import { Burst, Marquee, burst } from '@alea/pro';
Examples
Burst
A small celebration on a real success: sparks from the control. Nothing happens with reduced motion.
Marquee
Logos or quotes in a loop that pauses on hover or focus; with reduced motion it stops and scrolls.
Northwind
Globex
Initech
Umbrella
Stark
Wayne
Acme
Props
Burst props
Wraps a control: each press fires a small burst from it.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | |
count | number | - |
Marquee props
Logos or quotes moving in a loop. The copy is hidden from screen readers; with reduced motion it stops and scrolls instead.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Names the region, e.g. "Customers". |
className | string | - | |
direction | "left" | "right" | 'left' | |
duration | number | 30 | Seconds per loop. Default 30. |
fade | boolean | true | Fade the edges. Default true. |
pauseOnHover | boolean | true | Pause while hovered or focused. Default true. |
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.
Burst
- 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-burst-host
Marquee
- Variants
directionleftright- 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-marquee.alea-marquee-track.alea-marquee-group- Data attributes
data-fadedata-direction=rightdata-pause
Accessibility
- Burst is decoration and does nothing with reduced motion.
- Marquee lists each item once for screen readers (the copy is hidden and inert), pauses on hover and focus, and scrolls instead of moving with reduced motion.
Do and don't
Do
- Burst only on success that matters: a like, a goal reached.
Don't
- Don't put actions people need inside a marquee.