Decal
A matte label stuck to a dark surface that physically peels — hover lifts and curls a corner back to reveal a lit paper-grey underside with a cyan specular rim and a growing drop shadow, while grabbing deepens the peel, leans the sticker, and drags it with weight before it settles home. Faint adhesive glue-string filaments stretch and snap as it lifts; the peel origin is a 360° knob. Coarse pointers and reduced motion get a static half-peeled frame with drag disabled.
gsappro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/decalManual — install dependencies, then copy the source
npm install gsapProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content printed on the sticker face (kept upright as the sticker rotates). | |
| peelDirection | number | 45 | Direction the corner peels from, in degrees (0 = top edge, 90 = right edge). |
| peelBackHoverPct | number | 30 | How far the corner lifts on hover, as a percent of the sticker's side length. |
| peelBackActivePct | number | 44 | How far the corner lifts while grabbed/dragged, as a percent of the side length. |
| dragRotate | number | 12 | Max degrees the sticker leans as you drag it sideways. |
| width | number | 220 | Sticker side length in px (it is square). |
| shadowIntensity | number | 0.55 | Depth/opacity of the drop shadow the lifting sticker casts, 0–1. |
| lightingIntensity | number | 0.6 | Strength of the revealed underside lighting + specular rim, 0–1. |
| accent | string | "#67e8f8" | Accent color of the thin specular line riding the rolled edge. |
| faceColor | string | "#f2f0ea" | Matte sticker face color. |
| undersideColor | string | "#c3cbd2" | Cool paper-grey color revealed on the peeled-back underside. |
| draggable | boolean | true | Enable grab-and-drag. Ignored on coarse pointers / reduced motion. |
| speed | number | 1 | Settle-speed multiplier (higher = snappier). |
| paused | boolean | false | Freeze to a static, invitingly half-peeled frame with no interaction. |
| label | string | "Sticker" | Accessible label for the sticker region. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.