Components
Sticker
A die-cut sticker you can peel. Grab a corner: the paper folds back along a real crease, showing its white backing and casting a shadow. Pull far enough and it comes off — carry it anywhere and let go to slap it down. Tilts in 3D with holographic foil.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Sticker } from '@vizzele/react';
<Sticker label="Vizzele sticker" holo>
<img src="/sticker.png" alt="" width={140} />
</Sticker>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible name. |
children | ReactNode | — | The art — an image, an emoji, text. |
holo | boolean | true | Rainbow foil that follows the pointer. |
peelable | boolean | true | Can be peeled from a corner. |
movable | boolean | true | Once peeled, drag it and drop it to stick it again. |
onPeel / onStick | () => void / ({ x, y }) => void | — | Stuck again with its offset. |
Accessibility
- Focusable, with a "sticker" role description: Enter or Space peels it and sticks it again, the arrow keys move it while peeled (Shift for bigger steps).
- aria-pressed tells whether it is peeled off.
- With reduced motion it comes off and sticks without the fold animation or the tilt.