Draggable Sticker
0
Used by 0Controls
Draggable Sticker
Drag an image around like a real sticker that peels off the surface, tilts to your motion, and settles back into place.
KEY FEATURES
- — Upload any image through a responsive image control
- — Set exact sticker width and height in pixels
- — WebGL peel-off effect with a bent-paper curl and lift
- — Velocity-driven 3D tilt while dragging
- — Adjustable maximum tilt angle up to 45 degrees
- — Toggleable sheen lighting with adjustable strength and color
- — Elevation control for how far the sticker peels off the surface
- — Shadow smoothly interpolates between resting and lifted states
- — Paste animation settles the sticker back down on release
- — Most recently dragged sticker auto-raises above the rest
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
image
responsiveimage
{"..."}
The image displayed as the draggable sticker surface.
imageWidth
number
600
Width of the sticker in pixels; the image stretches to fit.
imageHeight
number
400
Height of the sticker in pixels; the image stretches to fit.
tilt
number
45
Maximum 3D tilt angle in degrees the sticker leans toward as you drag.
lighting
boolean
true
Toggles the glossy sheen highlight that reacts to tilt.
lightingStrength
number
10
Intensity of the sheen highlight; higher is more pronounced.
lightingColor
color
#ffffff
Tint color of the sheen highlight across the sticker.
elevation
number
10
How high the sticker peels and lifts off the surface; higher lifts more.
