Sticker Slap

Written for the variant you picked above: Glossy

Build a pill button that gets stickers slapped round its edge. Props: children, finish (one of three sticker styles), tone {face, label}, onClick and type. Seven original sticker designs, each in a 40×40 box with a die-cut outline path and artwork: a yellow star with a little face, an orange lightning bolt with a highlight, a pink heart with a highlight, a blue 12-point burst badge reading NEW, a yellow smiley, a three-band rainbow with two clouds, and a green disc with a tick. The die-cut is the outline drawn as a filled and 5.5px-stroked shape behind the artwork with round joins, so every sticker has a border; a gloss band clipped to the outline (a unique clipPath id per sticker) sweeps across it. Layout (a pure, seeded function of the hover count): shuffle the seven designs, take five, and space them round the pill outline from the point nearest where the pointer came in — alternately either side of it, one fifth of the outline apart with a little jitter. Each is 32–42px, centred 18% of its size outside the edge so it overlaps the rim, tilted up to ±22°, and delayed by how far it is from the entry point (85ms per step). The stickers are appended imperatively to an overlay 30px beyond the button with pointer-events none, and slap in with the Web Animations API over 340ms: from 1.55×, raised 16px, turned an extra 16° and transparent with a big soft shadow, to a squash (1.08 × 0.9) with a tight shadow, a small rebound, and rest with a 1.5px shadow. Leaving peels them off one after another (40ms apart): each lifts from a top corner in perspective, turning up to 70° and rising 26px as it fades, then is removed. Each hover peels the last set and brings a fresh one. A press slaps a 30px sticker onto the face where you pressed, under the label, which stays until you leave. The button: a 56px pill in the face colour with a bold label, an inner highlight and shadow; it tips -1.2° on hover. Keyboard focus slaps a set from the top centre; blur peels them. Touch gets a set on press for 2.4s. Reduced motion fades the stickers in and out in place. All stickers are aria-hidden so their text never joins the button's name. Selected variant — Glossy (glossy): Vinyl stickers: white die-cut borders, bright fills (#ffd23a, #ff5b33, #ff4d8d, #3a6dff, #19b874), dark ink #2a1d0b and a gloss band sweeping across every 2.6s, on a #1b1a22 button over lavender-grey #e9e6f2. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at the button and stickers get slapped round it; press to slap one on the face; leave and they peel off. Every hover is a new set. Motion: Each sticker lands in 340ms with a squash and settling shadow, 85ms apart outward from the pointer; peeling takes 360ms per sticker. Reduced motion fades them. Accessibility: A real button with its text label; every sticker is aria-hidden, so the NEW badge doesn't change the button's name, and the overlay doesn't take the pointer. Responsive behavior: Leave about 30px of room round the button for the stickers. Touch: A press slaps a set on for a couple of seconds. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at the button and stickers get slapped round it; press to slap one on the face; leave and they peel off. Every hover is a new set.

Motion

Each sticker lands in 340ms with a squash and settling shadow, 85ms apart outward from the pointer; peeling takes 360ms per sticker. Reduced motion fades them.

Accessibility

A real button with its text label; every sticker is aria-hidden, so the NEW badge doesn't change the button's name, and the overlay doesn't take the pointer.

Responsive

Leave about 30px of room round the button for the stickers.

On touch

A press slaps a set on for a couple of seconds.