Sticker corner lift + peel interaction using 3D transform and shadow depth.
Hover the sticker to peel it back, press to peel further, and drag it around. The sticker is absolutely positioned, so give its parent a position and a size: the parent is also the drag bounds.
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc | string | required | The source URL for the sticker image. |
rotate | number | 30 | The rotation angle in degrees of the sticker image. |
peelBackHoverPct | number | 30 | Percentage of peel effect on hover (0-100). |
peelBackActivePct | number | 40 | Percentage of peel effect when active/clicked (0-100). |
peelDirection | number | 0 | Direction of the peel effect in degrees (0-360). |
peelEasing | string | 'power3.out' | Easing for peel animations. |
peelHoverEasing | string | 'power2.out' | Easing for hover transitions. |
width | number | 200 | Width of the sticker in pixels. |
shadowIntensity | number | 0.6 | Intensity of the shadow effect (0-1). |
lightingIntensity | number | 0.1 | Intensity of the lighting effect (0-1). |
initialPosition | string | { x: number, y: number } | 'center' | Initial position of the sticker inside its parent. 'center' leaves it where layout puts it, an object offsets it in pixels. |
Keyboard shortcuts and ARIA behavior.
