Atardecer en las dunas
Doble toque en la foto para me gusta
Toca dos veces la foto y un corazón grande late justo donde has tocado; el corazón pequeño se rellena y suma uno.
Ajustes
Código
<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="Doble toque para dar me gusta"><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="Me gusta"><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>me gusta</span></p></footer><p class="cap">Atardecer en las dunas</p><p class="sr" aria-live="polite"></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Tocar dos veces una foto para darle me gusta es un gesto que la gente ya conoce de las redes, y esta tarjeta lo reproduce sin librerías. Un corazón blanco grande aparece y late justo en el punto del doble toque y luego sube y se desvanece, mientras el corazón de abajo se rellena con un rebote y un anillo, y el contador suma uno.
El color principal es el corazón relleno y el secundario el aro del avatar. La foto es un SVG en línea, así que cámbiala por una imagen tuya. Con teclado, Intro sobre la foto da me gusta desde el centro, y el botón del corazón se activa y desactiva como siempre.