A die-cut sticker on its backing sheet. Drag to peel a corner and reveal the backing, click or press Enter to peel or reset.
Friday release
Sticker pack 02
Laptop lid, but make it loud
Drag the corner to peel. Click to stick it back.
npx shadcn@latest add https://hyperblur.dev/r/card-sticker-peel.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-sticker-peel.tsx.
import { CardStickerPeel } from "@/components/hyperblur/card-sticker-peel"
<CardStickerPeel title="Ship it" subtitle="Friday release" corner="br" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Ship it" | Heading on the sticker face. |
| subtitle | string | "Friday release" | Small line under the title. Hidden when empty. |
| backing | string | "Peel slowly" | Text printed on the backing sheet, shown where the sticker lifts. |
| accent | string | "#2f7bff" | Color of the sunburst on the sticker face. |
| corner | "br" | "bl" | "tr" | "tl" | "br" | Which corner the peel starts from. |
| ratio | number | 1 | Width divided by height of the sheet and the sticker. |
| idle | boolean | true | Breathe the corner up and down while nobody is touching the sticker. |
| children | ReactNode | Replaces the built-in face of the sticker. |