React animation example
React Animated Icons: Like Heart With Burst
The like button is the most-tapped icon in most apps, so its animation does real work. This heart squashes on press, pops past its final size, throws a ring and a burst of particles, and ticks the counter. Unliking is deliberately quieter: a quick shrink and a fade back to the outline.
- 4.2 KB file
- 5 live inputs
- React runtime
How this like heart icon works
- Scale is a spring that gets a negative kick on press and a positive one on release, which gives the pop.
- The burst ring expands and thins in 400 ms; particles inherit two accent colors.
- The liked state is a real input, so you can set it from your data and listen for "like" and "unlike".
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-animated-icons.bexode goes in /public (download it below)
export function ReactAnimatedIcons() {
return (
<ExodeUICanvas
src="/react-animated-icons.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'like', 'unlike'
}}
style={{ width: '100%', height: 400 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
liked | Boolean | false | — |
count | Number | 128 | 0 – 99999 |
accent | Text | #f43f5e | hex colour |
accent2 | Text | #fbbf24 | hex colour |
bg | Text | #0f0a0c | hex colour |
Events: likeunlike
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.3D Flip CardA two-sided card that flips in 3D on a spring, with a sliding highlight and hover tilt.
The same idea in other frameworks: Flutter morphing icons · SwiftUI symbol effects · JavaScript success checkmark