Comunidad de diseñohace 4 h
¿Qué tipografía usáis para interfaces?Debate86 comentarios
Vote arrows with rolling digits
Upvote and downvote arrows: the arrow hops and only the digits that change roll up or down, like a mechanical counter.
Settings
Code
<div class="uvq15-vot"><div class="vb" role="group" aria-label="Votes"><button type="button" class="up" aria-pressed="false" aria-label="Upvote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4 4 13h5v7h6v-7h5z"/></svg></button><span class="n" aria-hidden="true">1.284</span><button type="button" class="dn" aria-pressed="false" aria-label="Downvote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20 4 11h5V4h6v7h5z"/></svg></button></div><div class="ps"><p class="mt"><span>Design community</span><span>4 h ago</span></p><b>Which typeface do you use for interfaces?</b><p class="tg"><span>Discussion</span><span>86 comments</span></p></div><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
Community posts live and die by their vote count, so the number deserves a careful transition. Pressing an arrow fills it with color and makes it hop, and the score updates digit by digit: only the figures that actually change roll, upwards for a vote in favor and downwards for one against. Pressing the same arrow again removes the vote.
The main color marks upvotes and the secondary one downvotes, and the score takes the color of your vote. The post title is the editable text. Switching straight from down to up moves the score by two, as on most forums.