Post Action Bar
Four post actions with four different weights: the like bursts, the repost nods, and the private save says nothing at all.
Shipped the redesign at 2am and the only bug was a rogue semicolon.
Build a post action bar - like, comment, repost, save - where each action has a different weight. Weight is the whole design. A row where every action celebrates equally teaches the user nothing about which one matters: - LIKE is the loud one: the icon pops (scale 1 -> 1.3 -> 1 over 0.32s), fills with the accent colour, and throws six particles. Position the particles with cos and sin of an even split around a circle so it reads as a burst, not as a shower with a direction. - COMMENT is neutral: it does not toggle, it just counts. - REPOST is a middle weight: colour and a small pop, no particles. - SAVE is SILENT and has NO COUNT. Saving is private, and a public number on it would be a lie about who can see it. Counts must roll, not swap. Put each number in a fixed-height clipped box and render it inside AnimatePresence mode="popLayout" keyed on the value: the old number rolls up and out while the new one rolls in from below (about 0.18s). A silent text change is invisible. Give every icon button a hit area larger than the icon, using padding with matching negative margins so the row's spacing is unchanged while the tap targets grow to something a thumb can hit. Accessibility: aria-pressed on each toggle plus an aria-label. A filled heart with no pressed state is invisible to a screen reader. Under prefers-reduced-motion, drop the burst and the roll; icons change colour and fill and counts update in place. Colors as tokens: paper card, muted ink for the resting state, one accent for the like, semantic green for the repost. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.