Atardecer en las dunas
Double tap photo to like
Tap the photo twice and a big heart beats right where you tapped, while the small heart fills and adds one like.
Settings
Code
<div class="uvq15-dbl"><header><span class="av" aria-hidden="true">N</span><div><b>nuria.viaja</b><small>Merzouga</small></div></header><button type="button" class="ph" aria-label="Double tap to like"><svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="uvq15-dbl-s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fdba74"/><stop offset=".6" stop-color="#fed7aa"/><stop offset="1" stop-color="#fde68a"/></linearGradient></defs><rect width="320" height="240" fill="url(#uvq15-dbl-s)"/><circle cx="214" cy="104" r="34" fill="#fff7ed" opacity=".9"/><path d="M0 150C60 120 120 128 170 146S260 132 320 118V240H0Z" fill="#f59e0b"/><path d="M0 182C70 150 130 160 190 178S280 168 320 160V240H0Z" fill="#d97706"/><path d="M0 214C80 190 150 196 220 212S300 206 320 202V240H0Z" fill="#b45309"/><path d="M96 168l6-14 4 14M88 172h22" stroke="#7c2d12" stroke-width="3" stroke-linecap="round" fill="none"/></svg><span class="bh" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2Z"/></svg></span></button><footer><button type="button" class="lk" aria-pressed="false" aria-label="Like"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.4 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.5 0 5.5 3.5 4.2 6.8-1.8 4.6-9.3 9.2-9.3 9.2Z"/></svg></button><p class="ct"><b class="n">3.218</b><span>likes</span></p></footer><p class="cap">Sunset over the dunes</p><p class="sr" aria-live="polite"></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
Double tapping a photo to like it is a gesture people already know from social apps, and this card reproduces it without libraries. A large white heart pops and beats at the exact point of the double tap, then floats away, while the heart button below fills with a bounce and a ring and the like count goes up by one.
The main color is the filled heart and the secondary one the avatar ring. The photo is an inline SVG, so swap it for an image element of your own. With the keyboard, Enter on the photo likes it from the center, and the heart button toggles as usual.