Today
Live nowThe count springs larger and back. It appears on idea cards in the feed; the vote button on an idea's own page has no animation.
Engage Marin · for review
Engage animations
Options for how Engage Marin responds when residents vote, post an idea, and claim their profile. Choose a tab, then click each option to try it. The colors are Engage Marin's own, and the scenes are drawn from illustrations already in use on the site.
Your device has Reduce motion turned on. Engage Marin skips these animations for anyone with that setting, and the live site would do the same for you.
Upvote
Subtle and short, only when a vote is added
Removing a vote stays silent. Click a button to vote, and click it again to undo.
A · Ring burst
A gold ring and small blue and gold dots flick out from the arrow while the button settles. It confirms the vote counted without leaving the button.
B · Plus one
A small "+1" rises off the button and fades. The quietest option, and the most literal about what happened.
C · Sparkle
Three gold sparkles twinkle around the button. Warmer than A, and slightly busier in a long feed.
Downvote
Acknowledged, not celebrated
Downvote counts are never shown publicly, so the resident sees no number change. A small response confirms the downvote registered without rewarding it. Click the down arrow to try each one.
Today
Live nowThe button changes color with no motion.
A · Press
The button dips like a key being pressed and the arrow settles into place. Feels physical, carries no emotion.
B · Fill
The muted tint pours into the button from the top while the arrow settles. The downvote visibly lands in place, with no motion outside the button.
C · Ripple
One soft ring spreads from the button and fades, like a pebble in water. Visible engagement in a muted color.
Fuller screen, only when the idea is posted
Plays once on the confirmation screen, and only when the idea cleared screening and is live. An idea held for review gets the calm confirmation with no animation, as it does today.
Today
Live nowThree volleys of blue and gold confetti.
A · Bird flyover
A small flock flaps from the bottom left of the screen to the top right. The birds are the three from the homepage Headlands illustration.
B · Lighthouse sweep
The Point Reyes Lighthouse rises in the corner and its beam sweeps once across the screen. Drawn from the lighthouse campaign illustration.
C · Redwoods rise
A line of redwoods grows up from the bottom of the screen, holds for a moment, and settles back down. Drawn from the redwood campaign illustration.
D · Surf and gulls
A wave washes up the bottom of the screen while two gulls glide across. Drawn from the Stinson Beach campaign illustration.
E · Marin-shape confetti
Today's confetti, with the paper squares swapped for birds, redwoods, and gold poppies. The smallest change from what is live.
Make adding an email feel like finishing something
After a guest posts an idea, the confirmation shows their "Hello, my name is" name tag and asks for an email to claim their profile. Each option reacts as the resident starts typing, builds anticipation as the address takes shape, and pays off when they press the button. Try clicking into the field and typing an address.
These are demonstrations. Nothing typed here is sent or saved.
A · Claimed stamp
Clicking into the field lifts the name tag. A faint "Claimed" stamp appears and darkens as the address takes shape, and gives a small wiggle once the address is complete. Pressing the button stamps it onto the tag.
B · Unlock as you type
The three things a profile adds sit under the name tag, locked. Each lock opens as the address takes shape: the first when typing starts, the second at the "@", the third when the address is complete. Pressing the button lights all three in gold.
C · Letter in the mail
An envelope sits beside the name. Clicking into the field opens the flap, and a copy of the name tag rises out as the address takes shape. Pressing the button tucks it in, seals the envelope, and sends it flying off toward the inbox.
Outside examples
References
- Asana, Celebrations revampedAsana's creatures that cross the screen when a task is completed, the model for the idea-posted scenes.
- Zapier on Asana celebrationsDescribes the flight path the bird flyover borrows.
- Confetti demosThe confetti library Engage Marin uses today, including the custom shapes behind the Marin-shape confetti.