'/%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
Tilt and Magnet
A showcase card tilts in 3D toward the pointer with a glare; one call to action leans toward the pointer when it comes near.
import { Tilt, Magnet } from '@alea/pro';
Examples
Tilt and magnet
A showcase card tilts toward the pointer; one call to action leans toward it. Both are off for touch and reduced motion.
Alea Pro
Hover me.
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-instant…--alea-motion-duration-slow…--alea-motion-ease-out…
Component
--alea-px…--alea-py…--alea-tilt-scale…--alea-tilt-x…--alea-tilt-y…
Props
Tilt props
Tilts its child in 3D toward the pointer, with an optional glare. Off for touch and reduced motion.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | |
className | string | - | |
glare | boolean | true | |
max | number | 8 | |
scale | number | 1.02 | |
style | CSSProperties | - |
Magnet props
Pulls its child a little toward the pointer when it comes near (for one primary call to action). Off for touch and reduced motion.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'span' | |
className | string | - | |
radius | number | 80 | |
strength | number | 0.3 | |
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.
Tilt
- 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-tilt- Data attributes
data-glare
Magnet
- 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-magnet
Accessibility
- Both only react to a fine pointer and are off with reduced motion and on touch screens.
- Nothing moves away from the pointer, so targets stay easy to hit.
Do and don't
Do
- Use tilt on product shots and showcase cards.
- Use magnet on one primary button per page.
Don't
- Don't tilt forms, tables or anything people read for long.