'/%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
CardStack, FlipCard and borders
Cards that stack and fan out, a card that flips to show its back, a turning gradient border for the featured one, and a glow around a premium button.
import { CardStack, FlipCard, GradientBorder, RimGlow } from '@alea/pro';
Examples
Card stack
Several of a kind, stacked; they fan out on hover or focus with a spring.
Starter
Hover the stack.
Pro
Hover the stack.
Team
Hover the stack.
Flip card
The back turns into view on hover, focus or press: details behind a summary.
Gradient border and rim glow
A border whose gradient turns, for the featured card; a glow around one premium button.
Pro yearly
Most teams pick this.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Motion
--alea-motion-duration-base…--alea-motion-duration-slow…--alea-motion-spring…
Component
--alea-i…--alea-stack-n…--alea-stack-spread…
Props
CardStack props
Cards stacked on top of each other that fan out on hover or focus, with a spring. For "there are several of these" (plans, photos, notifications).
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | |
spread | number | 1 |
FlipCard props
Two faces: the back turns into view on hover, focus or press (keyboard: Enter or Space). For details behind a summary.
| Prop | Type | Default | Description |
|---|---|---|---|
backrequired | ReactNode | - | |
frontrequired | ReactNode | - | |
className | string | - | |
height | number | 220 |
GradientBorder props
A border whose gradient turns slowly around the element: a stronger "featured" than BorderBeam.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
duration | number | 6 | |
style | CSSProperties | - | |
width | number | 1.5 |
RimGlow props
A soft glow that runs around a pill's rim: for one premium call to action ("Get Pro"). Wrap a Button.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - |
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.
CardStack
- 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-card-stack.alea-card-stack-item
FlipCard
- States
- Hover (CSS)
- 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-flip.alea-flip-toggle.alea-flip-inner.alea-flip-face- Data attributes
data-flippeddata-back
GradientBorder
- 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-gradient-border
RimGlow
- 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-rim-glow
Accessibility
- FlipCard is a button with aria-pressed; the face you can't see is hidden from screen readers.
- CardStack keeps every card in the reading order; fanning is only visual.
- Borders and glows are decoration; they stop turning with reduced motion.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | FlipCard: flip |
| Tab | CardStack: focus inside fans the stack |
Do and don't
Do
- Use one effect per screen, on the card that matters most.
- When the back holds key details, put them in text outside the card too.
Don't
- Don't hide what people need behind a flip.
- Don't turn every card border: the featured one stands out only if it is alone.