Post

This demo doesn't use a single line of JS code to respond to the arrow keys. Movement of the player is handled 100% by the upcoming `focusgroup` HTML attribute! Focusgroup was definitely *not* made for this 😅 But, so cool to have this out of the box on the web. More ➡️ open-ui.org/components/s...

Luke

@lukewarlow.dev

5 Mar

See now I'm wondering how you've done this demo... Grid isn't supported yet so how do you move both directions? Either way that's an amazing abuse of this 😂

Maikel Krause

@maikelkrause.bsky.social

5 Mar

Was wondering the same! Also, how is the state (eaten or not eaten) done, there's not really a "has tabbed to" state. I noticed they only did one "wrap" (portal) in the video, maybe the path is hardcoded? 🙂 And then "eaten" state could be just "all elements before current focus".

Patrick Brosset

@patrickbrosset.com

5 Mar

I wish there was a has-ever-been-focused pseudo in CSS. Unfortunately I had to resort to JS for the eaten state.

Luke

@lukewarlow.dev

5 Mar

Isn't there some trick with CSS variables where you can use them as a state toggle?

Patrick Brosset

@patrickbrosset.com

Hmm, not sure. The thing here is that movement happens with keyboard arrow keys. There’s no clicks. Clicks would be easy, I could select checkboxes or open details elements which world hold the state. I don’t know of a thong that changes state on focus and then preserves it.

5/3/26, 9:16 pm0 reposts2 likes

Patrick Brosset

@patrickbrosset.com

6 Mar

Found a trick that works! - Draw dot with background in cell - Set animation to remove dot, but set play-state:paused, and fill:forwards - On focus, play-state:running That does the trick. I was expecting the animation to revert back to its initial state, but no. It preserves its state.