← All work
Creative tech · Interaction

Sticker Effects

Peel a die-cut vinyl sticker off a product card and stick it somewhere else. The curl, shading and gloss all come from the sticker's own outline.

Prototype
A yellow and purple star sticker with a white die cut border, its top corner peeled back along a diagonal fold to show a gray backing, casting a soft shadow.
A corner peel up close: the fold, the backing and the die cut border all come from one image. Sample artwork.
A product card with a star sticker peeling at one corner, an empty dashed drop zone, and a panel of peel style and curl sliders.
The playground: peel the sticker off the product card, drop it on the canvas, and tune the curl, shadow, gloss and wobble live. Sample artwork.

Sticker Effects is a browser playground for one physical interaction. Drag the sticker and it lifts, curls back from the edge you pull toward, casts a shadow and catches a moving highlight; drop it and it settles with a small wobble. A control panel switches between three peel styles and tunes curl, shadow, gloss and wobble live.

Every layer comes from one PNG's alpha channel: the white die-cut border is an SVG dilate filter, and the flap, shading and gloss are the same image with different filters and masks. The curl works at any angle. A fold line is built perpendicular to the drag, the sticker is split into two clip-path polygons along it, and the flap turns around the fold with one rotate3d(), with no WebGL. Per-frame work skips React and writes straight to the DOM.

Status A no-build prototype that runs from a static file server.

Zach’s part Built the effect and the playground.