Sticker peel

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The box that carries data-sticker-peel has to hug the front: no padding, no border, nothing else inside but the two faces. And nothing close around a sticker may clip it with overflow: hidden, the flap folds out of its box.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-sticker-peel	Marks a sticker: a box that hugs the element that peels and holds nothing else. It takes no value: leave the value field empty. It carries the settings. Put it around any element of the page, as many as you like; each one peels on its own.
   data-sticker-peel-front	On the element that peels, inside the sticker: a card, a label, a link, a picture. It takes no value. It decides the size of the sticker. Without it nothing is mounted, and the console says so. [ Required ]
   data-sticker-peel-under	On the face that shows underneath, inside the sticker, after the front. It takes no value. The stylesheet lays it exactly behind the front and hides it until the sticker lifts. Without it the page behind the sticker shows through the fold. [ Optional ]
   data-sticker-peel-label	On the sticker, with a few words as its value: what a screen reader says for the button that peels it. Without it the button says Peel back. [ Optional ]
   data-sticker-peel-state	Written by the engine on the sticker: idle at rest, lifted under the pointer, peeling in the hand, settling on the way back, held, falling, off, and still or flipped under reduced motion. Never written by hand. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-sticker-peel-back-color	auto	Colour of the back of the sticker, the side the fold shows. Options: auto, the front's own background colour mixed with paper white, and paper white alone under a front with no background; or any CSS colour. Taken out of this block, --sticker-peel-back on the sticker takes over.
   data-sticker-peel-grab	corners	Where the sticker can be taken from. Options: corners, the four corners; edges, the four sides; all, both; or a list of names among top-left, top-right, bottom-right, bottom-left, top, right, bottom, left, for instance top-right bottom-right. The first name of the list, in that order with top-right first, is the corner the keyboard peels.
   data-sticker-peel-reach	clamp(22px, 2.4vw, 36px)	Size of the square at each corner that takes the pointer, any CSS unit or a percentage of the sticker; never more than half of it.
   data-sticker-peel-curl	clamp(6px, 0.8vw, 12px)	Radius of the roll of paper at the fold, any CSS unit.
   data-sticker-peel-shadow	0.5	Strength of the two shadows, the one the flap casts and the one under the roll, 0 to 1.
   data-sticker-peel-lift	clamp(12px, 1.5vw, 24px)	How far a corner rises when the pointer comes over it, any CSS unit.
   data-sticker-peel-threshold	0.5	Share of the sticker peeled, 0 to 1, from which a release counts as beyond.
   data-sticker-peel-beyond	back	What a release beyond the threshold does. Options: back, the sticker lays back down as it does before the threshold; hold, it stays peeled where it was left, and a click on its corner lays it back; off, it peels to the end, falls away and leaves the face underneath.
   data-sticker-peel-duration	0.55	Time the sticker takes to lay back down from fully peeled, in seconds; a smaller peel takes its share of it.

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call StickerPeel.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-sticker-peel-back-color	auto	Colour of the back of the sticker, the side the fold shows. Options: auto, the front's own background colour mixed with paper white, and paper white alone under a front with no background; or any CSS colour. Taken out of this block, --sticker-peel-back on the sticker takes over.
   data-sticker-peel-grab	corners	Where the sticker can be taken from. Options: corners, the four corners; edges, the four sides; all, both; or a list of names among top-left, top-right, bottom-right, bottom-left, top, right, bottom, left, for instance top-right bottom-right. The first name of the list, in that order with top-right first, is the corner the keyboard peels.
   data-sticker-peel-reach	clamp(22px, 2.4vw, 36px)	Size of the square at each corner that takes the pointer, any CSS unit or a percentage of the sticker; never more than half of it.	A corner that has to be aimed at, and more of the front left to clicks and selection	Easier to take, on a phone above all; a round sticker needs about 36% for the square to reach its rim
   data-sticker-peel-curl	clamp(6px, 0.8vw, 12px)	Radius of the roll of paper at the fold, any CSS unit.	At 0 a sharp crease, like folded card	A thick, soft roll, like vinyl; past a quarter of the sticker the roll eats the fold
   data-sticker-peel-shadow	0.5	Strength of the two shadows, the one the flap casts and the one under the roll, 0 to 1.	At 0 no shadow at all, and a flat look	Heavy shadows, a sticker held high over the page
   data-sticker-peel-lift	clamp(12px, 1.5vw, 24px)	How far a corner rises when the pointer comes over it, any CSS unit.	At 0 no invitation: nothing moves until the sticker is taken	A corner that visibly curls up; past a third of the sticker it hides the front
   data-sticker-peel-threshold	0.5	Share of the sticker peeled, 0 to 1, from which a release counts as beyond.	The smallest peel is enough to hold the sticker open or take it off	The sticker has to be peeled nearly whole; at 1 a release never counts as beyond
   data-sticker-peel-beyond	back	What a release beyond the threshold does. Options: back, the sticker lays back down as it does before the threshold; hold, it stays peeled where it was left, and a click on its corner lays it back; off, it peels to the end, falls away and leaves the face underneath.
   data-sticker-peel-duration	0.55	Time the sticker takes to lay back down from fully peeled, in seconds; a smaller peel takes its share of it.	A sticker that snaps back	A slow, heavy sheet

2. Drive it from JavaScript

   When something other than a hand should peel a sticker: a sticker that opens by itself when it scrolls into view, a button elsewhere that reveals every offer, or a sticker put back after it came off.
   JavaScript Copy

   const element = document.querySelector('[data-sticker-peel]');
   element.addEventListener('stickerpeel:release', (e) => {
     console.log(e.detail);
   });
   
   const sticker = StickerPeel.mount(element);   // the sticker auto() mounted, or a new one
   sticker.peel(0.5, 'top-right');   // peels half of it from that corner, and holds
   sticker.stick();                  // lays it back down, from held or from off
   element.addEventListener('stickerpeel:off', () => { /* the sticker came off */ });
   
   // When the sticker leaves the page:
   sticker.destroy();   // removes the two boxes the script added and the listeners

3. Fit it to your page

   • Structure: three marks. data-sticker-peel goes on a box that hugs the sticker and holds nothing else: the sticker. Inside it, data-sticker-peel-front goes on the element that peels, a card, a label, a link, a button, a picture, and data-sticker-peel-under on the face that shows underneath. The front decides the size; the stylesheet lays the face underneath exactly behind it and hides it until the sticker lifts.
   • The face underneath is real content. It is the page's own element: a message, a price, a picture, another link. It can be clicked and read as soon as it shows. Without one, the page behind the sticker shows through the fold, which is right for a sticker on a photograph.
   • The front stays the page's element. Nothing wraps it and nothing copies it. At rest its text can be selected, and a link or a button works: a press on a corner that did not travel more than a few pixels is handed to the front as a click.
   • **Any shape that a border-radius makes**: square corners, rounded ones, a pill, a circle, corners that differ. The back, the roll and the shadow take the radius of the front, read when the sticker is lifted.
   • A sticker can be turned or scaled by a transform of its own or of a parent: the pointer is read in the sticker's own space.
   • One setting for every sticker of the page, without opening the file: declare window.StickerPeelSettings = { beyond: 'hold' } in a script placed before sticker-peel.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-sticker-peel-* attribute on the sticker itself (data-sticker-peel-beyond="off"), so one sticker can still differ from the page-wide setting.
   • The back can also come from the stylesheet: with backColor left on auto, a custom property --sticker-peel-back on the sticker is read before the front's own colour.
   • What the script adds and writes. Two boxes as the last children of the sticker: data-sticker-peel-layers, the back, the roll and the shadow, shown only while the sticker is lifted, and data-sticker-peel-handles, one small grab zone per place named by grab, the first of them a real button. On the sticker, data-sticker-peel-state: idle at rest, lifted under the pointer, peeling in the hand, settling on the way back, held, falling, off, and still or flipped under reduced motion; data-sticker-peel-open while the face underneath shows; and data-sticker-peel-focus while the keyboard is on it. While the sticker is lifted, an inline clip-path on the front and on the face underneath, taken off once it is flat again.
   • Events, all on the sticker, all bubbling: stickerpeel:grab { sticker, place } when a hand, a key or peel() starts to peel; stickerpeel:release { sticker, progress, beyond } when the hand lets go; stickerpeel:off when the sticker has fallen away; stickerpeel:stick when it is flat again after a peel.
   • **From JavaScript, beyond mount, auto and destroy**: the api carries element, front, under, settings, peel(amount, place) which peels by itself to a share of the sticker and holds, stick() which lays it back, from held or from off, off() which takes it off whatever beyond says, progress(), state(), isRunning() and refresh(), to call after a setting or an attribute changed.
   • The label of the button: data-sticker-peel-label on the sticker is what a screen reader says for it, "Peel back" without one.
   • Keyboard: each sticker is one Tab stop, on its first grab zone. A link or a button you put on the front keeps its own stop, reached just before the sticker's: the button of the preview has two. Enter or Space peels it open and holds it, or takes it off when beyond is off; the same key lays it back, even from off. Escape lays a held sticker back. The button says pressed while the face underneath shows, and that face is out of the reading order while the sticker is flat.
   • Touch: a finger on a corner peels, and the page does not scroll from there; a finger anywhere else on the sticker scrolls the page as usual. A tap on a corner is a tap on the front. There is no hover, so no corner lifts by itself: say it in the page, as the preview does.
   • **prefers-reduced-motion**: no fold, no lift, no drag. A click on a corner, or the key, switches plainly between the front and the face underneath. Turning the preference off brings the peel back without a reload.
   • Without JavaScript the front is complete and the face underneath stays hidden: nothing is lost but the second face.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.
   • In the Webflow Designer the two faces show one under the other. The Designer never runs the Embed, so the canvas shows each face underneath below its front, where its text can be edited. On the published site, and in preview, it sits behind the front.

4. Avoid the pitfalls

   • The sticker has to hug its front. The box that carries data-sticker-peel takes no padding and no border, and holds the front and the face underneath and nothing else: the grab zones are laid on its corners, not on the front's.
   • Nothing around a sticker may clip it. The flap folds over the sticker and out of its box, and falls through the page when it comes off: overflow: hidden on a close parent cuts it. On the section itself it is welcome, it keeps a falling sticker from stretching the page.
   • **The face underneath is position: absolute, set by the stylesheet.** It takes the box of the front whatever its own size, and clips what does not fit. A layout of your own for it has to hold in that box.
   • A front with no background shows a paper white back. The back is one flat colour; auto reads the front's background-color, and a front made of a picture or a gradient has none to read. Name the colour.
   • **A clip-path of your own on the front is replaced while it peels.** The fold is a clip-path on the front. A shape cut with clip-path or a mask is not followed by the back either: only border-radius is.
   • **A round sticker needs a larger reach.** The grab zones sit in the corners of the box, which a circle leaves empty. With reach at about 36% they overlap its rim.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a sticker that already carries the effect returns the existing one. A page-wide block goes in window.StickerPeelSettings, which auto() reads itself; after changing an attribute by script, call refresh().
   • **The shading is a color-mix() of the back colour.** A browser too old for color-mix() paints the back flat, without its lighter fold.
   • A resize lays the sticker back. The fold is measured in pixels when the sticker is lifted; a held sticker goes flat when the window changes size, and a sticker that is off stays off.
   • A link under a corner is followed with a plain click only. The click handed to the front is the script's: a middle click or a modified click on a corner does not open a new tab. Everywhere else on the front the link is the browser's own.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.