Atardecer en las dunas
Double tap sur la photo pour aimer
Touche deux fois la photo et un grand cœur bat à l'endroit touché ; le petit cœur se remplit et ajoute un j'aime.
Réglages
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="Touche deux fois pour aimer"><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="J’aime"><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>j’aime</span></p></footer><p class="cap">Coucher de soleil sur les dunes</p><p class="sr" aria-live="polite"></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Toucher deux fois une photo pour l'aimer est un geste déjà connu des réseaux sociaux, et cette carte le reproduit sans bibliothèque. Un grand cœur blanc apparaît et bat au point exact du double tap, puis s'envole et disparaît, tandis que le cœur du dessous se remplit avec un rebond et un anneau et que le compteur gagne un j'aime.
La couleur principale colore le cœur plein et la secondaire l'anneau de l'avatar. La photo est un SVG en ligne, à remplacer par ta propre image. Au clavier, Entrée sur la photo l'aime depuis le centre, et le bouton cœur s'active et se désactive comme d'habitude.