Buttons
StickerButton
Drag the tile away from its recess and release it. A slow release settles home; a fast flick tumbles past centre before coming to rest.
Disabled
Usage
<StickerButton
size={72}
peelDistance={26}
maxRotation={18}
intensity="normal"
spring="smooth"
aria-label="Add"
>
<PlusIcon size={24} />
</StickerButton>How the motion works
Rotation is derived from horizontal displacement rather than animated independently, which is what makes it read as a physical sticker hinged at its centre — drag right and the far edge lags behind, producing tilt. The release hands the measured drag velocity to the spring as an impulse, so the tumble scales with how hard you threw it. Lift feeds both a shadow that deepens and a slight scale-up, selling the detachment from the page.
useDraguseSpringValueuseSpringVector
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 72 | Edge length in px. |
| peelDistance | number | 26 | How far the tile can be pulled from its socket, in px. |
| maxRotation | number | 18 | Degrees of tilt at maximum horizontal peel. |
| liftScale | number | 0.06 | Extra scale applied at full peel. |
| onFlick | (velocity: { x, y }) => void | — | Fires when released above flickThreshold px/s. |
| flickThreshold | number | 900 | Release speed in px/s that counts as a flick. |
| onClick | () => void | — | Fires only when the tile was not dragged. |