Ripple Toast
Toast notification with ripple animation, SVG distortion filter, and stacked card transitions using Framer Motion and radial gradients.
Category
NotificationReact
CSS
Tailwind
Manual
Create a file and paste the following code into it.
src/index-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { toast, update, ToastContainer } from "./components/toast";
function triggerToast(outcome: "success" | "error") {
const id = toast("idle");
setTimeout(() => update(id, "loading"), 600);
setTimeout(() => update(id, outcome), 2800);
}
function Demo() {
return (
<div className="min-h-dvh flex flex-col items-center justify-center gap-4">
<p className="text-sm text-neutral-400 mb-2 tracking-wide uppercase">
Toast demo
</p>
<div className="flex gap-3">
<button
onClick={() => triggerToast("success")}
className="px-4 py-2 rounded-xl bg-neutral-900 hover:bg-neutral-700 active:scale-95 text-white text-sm font-medium transition-all"
>
Deposit SOL → success
</button>
<button
onClick={() => triggerToast("error")}
className="px-4 py-2 rounded-xl bg-neutral-900 hover:bg-neutral-700 active:scale-95 text-white text-sm font-medium transition-all"
>
Deposit SOL → failed
</button>
</div>
<ToastContainer />
</div>
);
}
export default Demo;Update the import paths to match your project setup.