# Word stickers

Die-cut word stickers that pop in one by one, peel up when grabbed and fling with momentum. Live at https://design.how/vault#word-stickers.

Install the skill, which carries the template, the brief and a check script:

```sh
npx skills add https://design.how/vault/word-stickers
```

## What it is

Six short words sit scattered across a light page as vinyl stickers, wow, design, vault, yes!, hello and ship it, all in one bitmap serif. Each has a thick die-cut border in its own bold colour that follows every letter, holes in the o and the e included, and a contrasting text colour on top. When the card first comes into view they scale in one at a time from left to right, 140ms apart.

The die-cut is drawn, not traced. Each word is stamped in the border colour many times around concentric rings out to the border width, about 16% of the type size, which dilates the silhouette into an even band; the word is then filled once on top in its own colour. That canvas becomes the sticker's texture. The type is 8.8% of the card's width, kept between 32 and 66 pixels.

Grab a sticker and it peels. All six share one WebGL layer that draws each as a 24 by 24 subdivided quad; for the grabbed one a lift wave rolls across the mesh from the grab point toward the opposite corner, raising vertices in z and pulling them back along that axis, so a corner curls up and catches the light. The sticker also grows to 112% and follows the pointer with an eased, weighty lag. Let go and it keeps the drag velocity at 70%, glides with 0.92 friction per frame and bounces off the edges keeping 55% of its speed, while the peel settles flat.

## How it works

- Render each sticker to a 2D canvas by stamping the word around concentric rings out to the border width in the border colour, then filling the word once in its text colour.
- Draw every sticker on one WebGL layer as a subdivided quad with its canvas as the texture, and put a transparent DOM hit area over each for the pointer.
- On grab, ease a peel fraction to 1 and lift the vertices behind a moving front that runs from the grab point to the opposite corner; light the raised part in the fragment shader.
- Follow the pointer with an eased lag while dragging; on release keep part of the velocity, apply friction each frame and reflect it at the edges.
- Scale the stickers in one at a time on the first start, ordered left to right.
- Stop on webglcontextlost, and on destroy delete the program, the three buffers and every sticker texture and lose the context.
- Under reduced motion, lay every sticker out flat at full size once.

## What you can change

- `STICKERS` (six words, each with fill, outline and position): The words, their colour pairs and where each sits on the card.
- `GRAB_SCALE` (1.12): How much a grabbed sticker grows.
- `THROW_SCALE` (0.7): How much of the drag velocity a release keeps.
- `FRICTION` (0.92): Velocity kept per frame while a thrown sticker glides.
- `BOUNCE` (0.55): Speed kept when a sticker hits an edge.
- `PEEL_ELEVATION` (0.4): How high the curl lifts.

Last updated: 2026-11-02