Surf it, scroll it, pause it, click it

[benjaminleonard]

How does this 3 38 line CSS PR somehow add sound effects to all the buttons? Beats me.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Apr 2, 2025 9:19am

[david-crespo]

Very cool. I like it. Not sure how I feel about the dropdown buttons getting it, feels slightly weird. Especially how the menu itself appears to move with it (that may be the primary reason it feels weird). Also the docs popover button is missing it.

2025-04-01-button-move-dropdowns.mp4

[benjaminleonard]

I tried without and they felt a little left out, especially since they look like buttons. Pushed a little fix that applies it to a child of the button – that way the trigger doesn't move with it. How does that feel?

[david-crespo]

Definitely better without moving the menu. Another little issue: when I tap on my trackpad, sometimes it's fast enough to not move perceptibly, but other times I get this twitch. Interestingly the video doesn't really capture it, maybe because it's double size? It looks more jerky IRL.

2025-04-02-quick-click-2.mp4

[benjaminleonard]

Definitely better without moving the menu. Another little issue: when I tap on my trackpad, sometimes it's fast enough to not move perceptibly, but other times I get this twitch. Interestingly the video doesn't really capture it, maybe because it's double size? It looks more jerky IRL.

We're relying on the browser active – so there's probably only so much we can influence that. Does it happen on regular buttons too as well as dropdowns. That way we can rule out it being applied to a div inside the button instead of the button itself.

If that's not the issue, we could potentially add a transition. It's a 1px translate, but whatever animation shenanigans might make sure it sticks around for longer than the life of the active property.

[david-crespo]

This works pretty well to do the opposite — make sure it doesn't move in case of super short presses. I don't think we can make it work the other with just :active.

.active-clicked {
   @apply transition-transform duration-[50ms] ease-[cubic-bezier(0.65,0,0.35,1)];
}

[benjaminleonard]

That felt a little weirder to me, like it was occasionally completely broken.

This might be a bit of a browser limitation. I tried a combination of delays / durations / animations to no real benefit. The problem I think is that the application of active and removal is too quick to transition.

We could in theory do with js but that kills the simplicity of it, and probably unnecessary overhead. You might just be an exceptionally quick clicker.

[david-crespo]

I think it's actually the way the tap clicks work on my MBP trackpad. When I tap to click rather than fully pressing, it's not about how fast I do it — it does not appear possible to do it slowly enough to see the full animation. If I tap slower it stops being a click at all.