anl331

anl331 / goey-toast

Public

A gooey, morphing toast component built on Sonner with Framer Motion animations

goey-toast.vercel.app animation blob component framer-motion gooey
809
33
100% credibility
Found Feb 17, 2026 at 309 stars 3x -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

goey-toast is a React library for beautiful, animated toast notifications that morph between pill and blob shapes with customizable bounces and positions.

How It Works

1
🌐 Find goey-toast

You stumble upon a delightful tool for adding bouncy, shape-shifting pop-up messages to websites while browsing examples.

2
📦 Bring it home

You easily add the notification helper to your web project following simple steps.

3
🛠️ Set up the display spot

You place a small notification area in your app where messages will appear in different corners of the screen.

4
✨ Send your first message

You trigger a success note like 'Saved!' and watch it morph from a pill into a wobbly blob with smooth bounces.

5
🎨 Make it yours

You tweak colors, positions, bounce levels, and add extra details or buttons to fit your app's personality.

6
🔄 Handle waiting tasks

For longer actions, you show a spinner that turns into success or error messages as things finish.

🎉 App feels alive

Your website now delights users with organic, fun pop-ups that grab attention without being annoying.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 309 to 809 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is goey-toast?

goey-toast is a TypeScript React component for gooey, morphing toast notifications, built on Sonner with Framer Motion animations. It transforms plain pills into organic blobs that expand for descriptions or actions, handling promise states from loading to success/error. Install via npm, add a CSS import, drop `` in your app, and trigger with `goeyToast.success('Saved')`.

Why is it gaining traction?

The gooey text morphing and blob animations grab attention—hover pauses timers, re-expands collapsed toasts, and mirrors for right-side positions. Promise support auto-transitions loading spinners, plus action buttons that morph back to pills on click. Custom bounce intensity, colors, and shadcn/ui integration make it dead simple to polish notifications without animation boilerplate.

Who should use this?

React/Next.js frontend devs building dashboards, forms, or SaaS tools with async saves, uploads, or API feedback. Ideal for teams using Sonner who want gooey upgrades for user delight, or shadcn/ui shops needing quick morphing toasts over stock ones.

Verdict

Worth adding for engaging, customizable toasts—strong docs, live demo, and TypeScript types make it plug-and-play. With 296 stars and 1.0% credibility score, it's early-stage but mature enough for non-critical UIs; test in a side project first.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.