Like heart

A like button whose heart squeezes to a dot, flips color and bursts back while the count rolls over to the next number.

enhancer
button
like
toggle
counter
heart
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Like heart example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<button type="button" data-motion="like-heart" aria-pressed="false" data-motion-count="1204">Like</button>

import { LikeHeart } from "./motion/react/LikeHeart";

<LikeHeart>Your content</LikeHeart>

<script setup lang="ts">
import LikeHeart from "./motion/vue/LikeHeart.vue";
</script>

<template>
  <LikeHeart>Your content</LikeHeart>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "like-heart";

The wrappers: LikeHeart.tsx (React, TypeScript) and LikeHeart.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-count`	`0`	the count before your like
`data-motion-color`	`#ff4d6d`	the heart's color when liked

- It is a toggle button: its name is its own text ("Like", kept for screen readers), aria-pressed says liked or not, and the count beside it is read with the name. - Enter and Space press it like any button. - The count is grouped the page's way (its lang). - Reduced motion fills the heart and swaps the number at once, with no squeeze or burst. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

like-heart.js is 1.4 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.