1.204 aplausos
Clap button with counter
Each press adds a clap with a bubble and sparks; hold it down to clap in bursts up to fifty.
Settings
Code
<div class="uv-mcl"><button type="button" class="b" aria-label="Clap"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-6-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/><path class="sp" d="M3.5 7.5 2 6M5.5 4.5 5 2.5M8.5 3.2 9.5 1.5"/></svg></span><span class="pt" aria-hidden="true"><i style="--a:0deg"></i><i style="--a:45deg"></i><i style="--a:90deg"></i><i style="--a:135deg"></i><i style="--a:180deg"></i><i style="--a:225deg"></i><i style="--a:270deg"></i><i style="--a:315deg"></i></span><span class="bub" aria-hidden="true">+1</span></button><p class="ct" aria-live="polite"><b>1.204</b> claps</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
A playful way to let readers show appreciation, inspired by blogging platforms. Every press makes the hand squeeze, sends a ring of sparks outward and floats a bubble with your personal count, while the total below goes up. Holding the button fires claps in quick succession until the limit of fifty, after which it gives a small shake.
The counter is formatted with the page language, keyboard users can press Enter or Space repeatedly, and the total lives in a polite live region. Send the count to your backend in batches instead of on every single clap.