DEV Community

Cover image for Physics Toast: Dynamic Island-inspired Morphing Toast in Pure JS
jQueryScript
jQueryScript

Posted on

Physics Toast: Dynamic Island-inspired Morphing Toast in Pure JS

Physics Toast: a vanilla JavaScript library that renders Dynamic Island-style toast notifications with a real damped spring physics engine.

Key highlights:

  • ~20 KB total, zero dependencies
  • Real spring simulation (F = -kx - cv) — not CSS keyframes
  • SVG gooey morph effect via feGaussianBlur + feColorMatrix
  • 6 toast types: success, error, warning, info, promise, action
  • 6 screen positions, swipe to dismiss, auto expand/collapse
  • Drop-in with two tags — works in any HTML page, no React needed

Great fit for static sites, admin panels, browser extensions, or any project where pulling in a full React runtime is not an option.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)