Sticker Peel
Customize StickerPeel
Width200px
Rotate30°
Peel Back Hover %20%
Peel Back Active %40%
Shadow Intensity0.6
Lighting Intensity0.1
Initial X Position-100
Initial Y Position100
Props
| Property | Type | Default | Description |
|---|---|---|---|
| imageSrc | string | - | The source URL or path of the sticker image. |
| width | number | 200 | The width of the sticker in pixels. |
| rotate | number | 30 | The initial rotation angle of the sticker in degrees. |
| peelBackHoverPct | number | 20 | The percentage of peel back when hovering over the sticker. |
| peelBackActivePct | number | 40 | The percentage of peel back when the sticker is active/clicked. |
| shadowIntensity | number | 0.6 | The intensity of the shadow effect (0-1). |
| lightingIntensity | number | 0.1 | The intensity of the lighting effect (0-1). |
| initialPosition | object | { x: 0, y: 0 } | The initial x and y position of the sticker. |
| className | string | "" | Additional CSS classes for the component. |
| style | React.CSSProperties | {} | Inline styles for the component. |
Dependencies
gsap
Created with ❤️ by Cybershoora