browsers mostly skip updating hover state while you scroll so I made super-hover, a tiny utility library that checks what's under your cursor every frame! `pnpm add super-hover`

so why would you use this? well, you probably shouldn't. deprioritizing hover updates is most likely done for performance, so browsers can focus on scrolling, painting and any layout work needed as new elements enter the viewport. which is probably what you want by default!

BUT :) updating hover every frame opens up some fun interactions, like this super sick section by Locomotive, which first gave me the idea a while ago:

I noticed myself recreating this functionality for the 3rd time for various personal projects and wished this existed, so here it is now

yo u should check @_chenglou midjourney gallery for an even simpler approach! in particular, the part about non-throttled cursor updates:

@_chenglou oh, how many times you showed his site to us haha, and i still missed (or forgot) about this part... thank u!!

Can we please start shipping prompts already instead of shipping random npm packages?

you can def get to this in a few prompts, but at this point it would make more sense to just point the agent to your codebase and describe on which elements you want to achieve an effect like this. so i don’t think it makes too much sense to publish a general prompt but also if you are only worried about installing an npm pkg, you can also point your agent to the codebase on github and say, hey copy this without installing or something code is super short and doesnt have any runtime deps:)

I just mean in general, and now days it’s almost safer to ship instructions to an agent than an npm package.

hmm but how bad is it really for performance? Could it be worth it to add a nice touch to prod? Interesting!

it is def worse than just using the default `:hover` so I'd say it depends on your use-case: If it's for some fun creative effects, landing pages / portfolios, for sure, but i'd def avoid it for webapps or anywhere where perf is super super important will do some benchmarks later to get a more accurate picture tho

This should throttle or have performance considerations no?

yes, certainly haha will try to do some benchmarking later to get a more accurate picture how much worse it is tho

@AndrewPrifer Interesting I build an npm package called virtual-text-layout that uses pretext alongside Tanstack virtual to do infinite scrolls. I do have a live demo link on the package page.

@AndrewPrifer uu this seems interesting, i’ll take a look!

AWESOME!!!!!!!!

how you gonna show us selected ambient works and have no audio 😭😭

🫶

No visible frame drops on react-scan. Thats optimised like crazy. Also im curious is there any other way of doing this? like we can calculate where we are on the container and according to the height of each element we can determine which element is active? @jh3yy

1. yeah react-scan can be a good proxy, but it doesn't give a full picture eg. on a more complex site with more elements, where the browser has to do much more work, I'd expect bigger differences between this and native :hover. I'll try to do some proper benchmarking later to get a more accurate picture tho 2. yeah you're right! as @asciidiego also pointed out, this can be achieved much more simply (and prob more performant) if you know your elements' positions/heights/layout etc: I think this library maybe has a place as a drop-in solution where you don't know, or don't want to manage all of that yourself - eg arbitrary tall elements, unknown layouts, framework rendered lists, etc. or idk, maybe I'm just trying to justify the work I did for this in hindsight hahah

@AndrewPrifer @devenini + @plcossette coded

@AndrewPrifer @devenini @plcossette oh yes!

@AndrewPrifer @devenini @plcossette Oh, funny! Didn’t see it!

Genius.

Heck yeah

Should have included some benchmarks about the performance.

will do!

So cool

so good it makes my head spin

can i supply chain attack this

the core package has no runtime dependencies, and react/vue are optional peer deps if you use said framework, if that's what you mean. but yeah, otherwise my npm account could be theoretically be compromised like any other account haha

lovely

amazing work, as always! :)

@vaibhav_khulbe It’s the little things 🤌🔥

You can "hack" the browser's native optimization by making a small CSS animation based on margins, in a loop, and hidden. This way, the browser recalculates the hover on every frame.

interesting! do u have an example? or which property to animate?

I "accidentally" discovered this while building this website. There's a connection between the top marquee and the list. If you remove the marquee, the browser blocks the hover state when scrolling.

Any performance issues?

in this demo none, but on a more complex website/lists i'd expect some differences. Will do some benchmarks later!

👌👌

no. makes me dizzy

@sloikodavid i’d say whoever is using this would be responsible to just not use it on reduced-motion enabled. but fair feedback, will include an example about it in the docs, thank you!

Wow that’s something new! Is the difference really noticeable tho?

you mean on terms of performance? in this particular demo there is none, but on a more complex website/list I’d expect some differences

Yeah that was my question, very cool! Are you planning releasing other frameworks like these for performance optimized animations?

dope and on trackpads?

trackpads acts like a mouse, so it should work the same unless I misunderstood your question haha

oh so it lags behind yeah I wasn't noticing before

Hovers should also be disabled when mouse button is down (during text selection)

good catch, will include it, thank u!!

for fun! :)

Won't degrade the performance?

What font is used here?

fira mono:)

great project!

tuff find

Omggg! I would loved this months back when I was trying to build my long ass movie tracker. I had similar kind of interaction, didn't work well so skipped it THIS IS GENIUS! Where is my terminal, gotta install it

bro sent the link 😭 really wanna hover this one

CPU = 100%

Honestly impressed you noticed this at all, it's the kind of subtle UX 99% of devs scroll right past (pun intended). Bookmarked.

haha. but yes I think that also means this is a non-issue:)

These are the kinds of things that make an experience feel premium without the user even knowing why That’s what makes it premium 👌