Buttons & toggles
Jelly like button
Tap the heart: it squashes, bounces back like jelly, pops a +1 and ticks the counter from 128 to 129. Tap again to unlike. It is the micro-interaction people tap twice just to see it again — the definition of a sticky like button.
- 2 KB compiled
- 410 × 310 artboard
- 1 input
- 9 runtimes
Live
How it works
- A Trigger input, liked, toggles between On (liked) and Off (unliked).
- The like animation squash-and-stretches the heart with springy easing and swaps the counter text.
- A Heartbeat layer gives the idle heart a gentle pulse.
| Input | Type | What it does |
|---|---|---|
liked | Trigger | Toggles liked / unliked with the matching animation. |
When to use it
- Social feeds and comments
- Favourites and wish-lists
- Reactions in chat
Accessibility
Use aria-pressed on a real button and announce the new count.
Also searched as: heart animation · like button animation · micro-interaction
Use it in your app
One component, one file. Pick your stack:
import { ExodeUICanvas } from 'exodeui';
export function JellyLikeButton() {
return (
<ExodeUICanvas
src="/gallery-07-jelly-like.bexode"
autoPlay
onReady={(engine) => {
// drive it from your own UI:
// engine.fireTrigger('liked');
}}
/>
);
}React loads the compact .bexode; the other runtimes load the .exode JSON source — both come from the same design.
Questions
Can I show a real like count?
Yes — bind your count to the text, or update it from your app when liked fires.
Is it really 2 KB?
Yes, the compiled .bexode is about 2 KB.
More buttons & toggles
Make it yours in ExodeUI.
Change the colours, the timing, the logic — then ship the same file.