Feedback & Interaction · What a tap feels like
Sticker peel贴纸揭角
- physical
- explorable
- inviting
Bring the pointer to the corner and it lifts, revealing the layer beneath like a sticker under a fingertip. More than a hover tint, it says: this can be peeled.
When to use it
For places where something really is hidden under a card: a coupon, a scratch panel, a member code, a promo banner. Do not put it on decoration that cannot actually be opened — it promises a peel, and nothing opening is a lie. And keep it to one corner; four peelable corners pose a puzzle nobody asked for.
Parameters
clip-path: slant 6→110px · transform: curl scale 0.35→1.1 · lift 90ms ease-out / fall 220ms ease-in
Recipe
Sticker peel → slant 6 → 110px @ 90ms ease-outSticker peel → scale 0.35 → 1.1 @ 90ms
One sentence for your AI
Build a sticker peel where the bottom-right corner lifts as the pointer approaches. Base it on the distance from the pointer to that corner rather than hover hit-testing: it starts peeling within about 134px and peels further the closer it gets (mapping 0 to 1 onto a slanted cut of 6px to 110px), so the card answers while the pointer is still outside it. Cut the top layer with a clip-path polygon along the diagonal from top-right to bottom-left to reveal what is underneath, then add a triangular curl that fades in with the peel, scaling and tilting slightly, with a shadow cast up and to the left. Lift with a 90ms first-order follow (the action) and fall back over 220ms (the follow-through); reversed, it looks fake.