← Back to gallery
MIXED

Click Replay Heart Burst

Like button with WAAPI scale-pop and optional radial particle burst on every click, with aria-pressed tracking liked state and the decorative layer isolated from the button name.

Duration
1s
Resolution
1440×900
Format
MIXED
like-buttonburstparticlemicro-interactionwaapiaria-pressed

Micro-interaction / like button / WAAPI replay

Click replay heart burst

Reimplements the like-button micro-interaction as a one-shot element.animate() pop on each click, with the decorative particle layer living outside the button’s accessible name.

heart pop replay — scale ×1.30 · 420ms

Not liked

One-shot scale pop · liked state stays on button

Heart pop replay

A single heart icon scale-pops on every click. Liked state tracks aria-pressed; the pop ignores the toggle so the feedback plays whether the click turned the heart on or off.

  • waapi
  • scale-pop
  • aria-pressed

Not liked

Heart pop + six particles fly outward

Radial particle burst

Six decorative dots ride on a separate layer. Each click replays both the heart pop and a fresh particle burst via element.animate(), so the effect feels alive under repeat taps.

  • particle-burst
  • multi-layer
  • pointer-events:none

Heart burst inspector

Heart pop replay

Not liked

Pop scale
×1.30
Duration
420ms

Cancel the previous WAAPI animation before kicking off the next, or rapid clicks stack easing curves and the pop drifts.

Live controls

css
const heart = button.querySelector('.heart-icon');

button.addEventListener('click', () => {
  heart.getAnimations().forEach((anim) => anim.cancel());
  heart.animate(
    [
      { transform: 'scale(1)' },
      { transform: 'scale(1.30)' },
      { transform: 'scale(1)' }
    ],
    { duration: 420, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }
  );
  button.toggleAttribute('data-liked');
});