Sticker pop
A sticker image that pops in with a springy overshoot into its own tilt once it has loaded, and shrinks, tilts and fades on exit.
Behaviour
- Pops only once the image has loaded (cached images included), so it never flashes an empty box; a broken image stays hidden.
- The pop is 0.55s from scale 0.85 and 10deg back to its tilt on an overshooting curve; the exit is a quicker 0.3s ease-out.
- Transform and opacity only, animated by motion; the only re-render is the one load.
- Reduced motion: a 0.2s fade at the final tilt and size, no scale or swing.
Props
| Prop | Type | Description |
|---|---|---|
| src | string | The sticker image. Nothing shows until it has loaded. |
| rotate | numberdefault 0 | The tilt in degrees the sticker settles into. |
| delay | numberdefault 0 | Seconds after load before it pops; stagger a pile with it. First pop only: an exit turned back midway pops back at once. |
| out | booleandefault false | Plays the exit: shrink to 0.8, tilt 10deg further and fade. |
| outDelay | numberdefault 0 | Seconds before the exit starts; stagger a pile leaving. |
| alt | stringdefault "" | Decorative by default; pass alt text when the sticker carries meaning. |
Installation
npx shadcn@latest add https://purrfectui.com/r/sticker-pop.jsonHow to use
import { StickerPop } from "@/components/ui/sticker-pop";
<StickerPop src="/sticker.webp" rotate={-8} className="size-40" />
// a pile: stagger the pops, then leave in reverse
{stickers.map((src, i) => (
<StickerPop key={src} src={src} rotate={tilts[i]} delay={0.1 + i * 0.2} out={leaving} outDelay={(stickers.length - 1 - i) * 0.05} />
))}Source code
Loading…
Credits
Ported from poinu.vercel.app.
License
MIT. Copy it into your project and change it as you like.