Sileo Studio

Gooey physics toast notifications for React, with springy morphing, autopilot expand and live playgrounds.

Sileo Studio — gooey physics toast notifications for React, with springy morphing, autopilot expand and live playgrounds

How to use Sileo Studio

Pick a viewport position from the 6 real SileoPosition values and a theme fill
Fire any repo playground demo: success, error, warning, info, action, promise or custom icon
Watch the gooey SVG pill auto expand after 150ms and collapse after 4000ms
Hover a toast to pause its dismiss timer, then leave to reschedule it
Use the action button on the File Uploaded toast to fire the Link Copied follow-up
Build a custom toast with your own title, description, state, fill, roundness and duration
Copy the install snippet and the Toaster setup code for your own React layout

Built on the real hiaaryan/sileo repo (sileo v0.1.6, React 18 peers, motion runtime)
All 6 positions and all 6 states from types.ts, with the exact pill and body geometry
The verbatim gooey SVG filter: Gaussian blur plus the 20 minus 10 color matrix, atop composite
The real autopilot timing: 150ms expand, 4000ms collapse, 6000ms default duration, 600ms exit
All 7 fireToast demos with verbatim titles and descriptions, including the info action quirk
The full sileo API table: show, success, error, warning, info, action, promise, dismiss, clear
Theme fills from toast.tsx: light 1a1a1a and dark f2f2f2, plus custom fill and roundness
Honest scope: motion springs run as CSS transitions on the repo spring easing curve, in a demo viewport

Yes, unlimited.