Jelly Toast
A toast that is the animation. A drop lands, squashes and stretches into the pill, the icon acts out its type, and the colour drains away like liquid.
Get the file
Runtime
.rivReady to use in your app or website.
$4.99
Editable
.rev + .rivOpen it in the Rive editor and change anything. The .riv is included.
$9.99
Learn to build it
Full accessBuild this yourself, step by step. Every file in the library is included.
Courses from $119
Own a course? Sign in and every file is yours.
Use it in your own products and client work. Please don't resell or share the files themselves.
Using this file
The licence →Can I use it in a commercial product or a client project?
Yes. Use it in your own apps, websites and games, and in work you do for clients, paid or not. Change it as much as you like. Read the full licence
Can I resell or share the file?
No. Please don't resell, redistribute or re-upload the files, as they are or changed, and don't bundle them into templates, asset packs or UI kits, free or paid. If someone wants one, share a link to this page instead. Read the full licence
Do I need to credit you?
No, credit isn't required. A mention or a link back is always appreciated, though. Read the full licence
What's the difference between the .riv and the .rev?
The .riv is the runtime file: it goes into your app or website and plays there. The .rev is the editable source: you open it in the Rive editor to change the design, the animation or the state machine, then export your own .riv. Read the full licence
I own a course. Do I get it?
Yes. If you own the Rive Masterclass or the Rive Scripting Course, every file in the library is yours, the .riv and the .rev. Sign in with the email you bought the course with and the downloads unlock. Read the full licence
Who owns the files?
The files stay © Tom Acco / Rive Masterclass. When you download or buy one, you get a licence to use it, not ownership of it. Read the full licence
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function JellyToast() {
const { rive, RiveComponent } = useRive({
src: '/toast.riv',
artboard: 'Jelly Toast',
stateMachines: 'State Machine 1',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('strokeColor').value = 0xFF7B61FF;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: show, type, title, message, fontSize, duration, cornerRadius, strokeWidth, backgroundColor, textColor, strokeColor, successColor, errorColor, warningColor, infoColor. All on the JellyToast view model.
How it's built
Set show to true and a dot drops in, lands with a squash and spreads into the pill with a little wobble. Pick the type: success stamps a badge with sparks, error pops a bubble that shakes it off, warning swings like a hanging sign, info pops on a spring. The tint drains over duration seconds (0 keeps it up), then it shrinks back to a dot and gets pulled away. Tap the X or swipe it right to fling it off, and dismissed fires. Set the title, message, size, corner radius, an outline and every colour. It stretches to any width.
- 1One shape, not a sliding boxThe toast is a single layout box whose edges are keyed. It starts as a dot, squashes when it lands and stretches sideways into the pill, so you see one jelly shape change, never a box sliding in. The pill takes your cornerRadius and outline, while the dot stays round, and it still stretches to any width because the morph is in percent.
- 2The icon acts out the typetype is an enum. Each type has its own Enter timeline: a stamped badge with sparks that die with the impact, a bubble that shakes, a sign that swings on its nail, an i that pops on a spring. All plain timelines sampled from springs.
- 3The countdown is the fillA tiny script counts timeLeft down from duration once the toast has landed, and pauses while you press it. One data converter turns timeLeft into how far the tint has drained, a clean straight edge. At zero, show turns false. duration 0 keeps it up.
- 4Two ways outWhen show turns false it shrinks back into a dot and gets pulled up. A tap on the X or a swipe to the right flings it off instead and fires dismissed, so your app knows the user closed it.
