← All effects

Heart Burst

Micro-interactionVanilla JS · zero dependenciesCanvas overlay · draws only while bursting
-- fps
prefers-reduced-motion detected — one heart, no physics

X-ray · layers

hearts spray upward
the button pops with physics
a palette of pinks (off = one red)

Parameters

Hearts14
Launch power6.0
Gravity0.25
Heart size14 px
your version · updates as you tinker

How this effect works

Every click spawns a handful of hearts, and each heart is four numbers: position, velocity, rotation, age. From there it's schoolbook physics — velocity points mostly up with some sideways spread, and every frame gravity eats the upward speed until the heart arcs over and falls. That arc is the whole trick: things that go up and come down read as physical; things that just float away read as clip-art.

The spring layer lives on the button itself. Instead of a fixed animation, the button's scale runs a tiny spring simulation — the click compresses it, the spring shoots it past 1, overshoots, and wobbles in. It never plays exactly the same twice because it responds to your click rhythm: mash the button and the wobbles stack. The tints layer draws each heart from a small pink-to-violet palette; switch it off for the classic single red and notice how much flatter the spray feels — variety is doing quiet work.

Production notes: respects prefers-reduced-motion (a single static heart, no spray) · the canvas only draws while hearts are alive — an idle button costs nothing · hearts are glyphs, not images: zero assets · the copied snippet is self-contained HTML + CSS + JS.