piruicy
The collection

Toast stack

after Emil Kowalski

A stack of notifications that lift and shrink behind the front one, expand on hover and swipe away.

npx shadcn@latest add https://piruicy.com/r/toast.json

    Details

    • Behind the front toast each one lifts 14px and shrinks 0.05, and takes the front toast's height.
    • Everything is a 400ms transition, not a keyframe, so a new toast retargets the others mid-flight.
    • Swipe down past 45px, or faster than 0.11 px/ms, to dismiss; pulling up meets friction instead of a wall.
    • Each toast lasts 4s; the clock pauses while you hover or focus the stack, and while the tab is hidden.

    © 2026 Dhaval Khandhadia. Use it in anything you build; don’t resell it. MIT with the Commons Clause.