A like button heart that pops with an elastic bounce, sends out a ring and ten coloured dots, and outlines itself when unliked. The heart colour and every burst colour come from data.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1One colour for the heartFill, outline and ring all read the same colour input.
- 2Elastic popThe heart overshoots and settles, the ring fades as it grows.
- 3Liked is a booleanTap toggles it, and your app can set it too.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function LikeHeart() {
const { rive, RiveComponent } = useRive({
src: '/like-heart.riv',
artboard: 'Like Heart',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('color').value = 0xFFFF3B5C;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: color, liked, burst1, burst2, burst3, burst4, burst5. All on the LikeHeart view model.