Tilt Card
A card that leans towards the pointer in 3D with a following glare and parallax depth layers, lifting instead of tilting for keyboard focus.
Preview
Atelier
StudioInes Moreau
Member since 2023
•••• 4821
New
Desk lamp No. 3
$248
Brushed steel · warm 2700K
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| maxTilt | number | 10 | Largest rotation on each axis, in degrees. |
| perspective | number | 900 | CSS perspective in px. Smaller is more dramatic. |
| glare | boolean | true | Soft highlight that follows the pointer. |
| glareOpacity | number | 0.35 | Peak opacity of the glare. |
| hoverScale | number | 1.02 | Scale while hovered. |
| reverse | boolean | false | Lean away from the pointer instead of towards it. |
| spring | SpringOptions | { stiffness: 260, damping: 24, mass: 0.6 } | Spring for the tilt. |
| wrapperClassName | string | — | Classes for the outer perspective wrapper. The surface takes className. |
| TiltCardLayer depth | number | 24 | Distance a TiltCardLayer child floats above the card, in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.