RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0ACb5hSoxo1svvHlhJqD4sUSDGJ97B1kBGWGGxycXu4=

6s1k2w6SLnWj64d28WQrv9HQMxjAQ6/qFXIbthFaqKc=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

BEaEBzmJ+dCz7bi9Xenx+kQRiui5/usgymUiFzHdUSk=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

JseFDRfctUKg1rAF0E6mL1YOHzQe1gVou75Mw8zcVOY=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

Rf1eI8pDEJSkptFB/XWlj0IN7pQXjrNngR5tBDx8ihI=

Sf9qPmyeAJlqj4x6Kz5SNESMv5Qs7ARqsnNruitgYpA=

USOHvTUI3mh2ib/mMwbKTyTADvigSfSmb3MXH/HsN6A=

XGglpWsF+VpgOjXfIqzwrxv0n1E+aPydxJbt23zu0UA=

Zf6XyBzSm/LtmgDvoXinw+Hi6BMMwoaUJHcowJ8ikX0=

eDXaquyPVYoFNZ+HLRFOqPbAk7N1nlRiJhbhe4g83Es=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

n9lKHF86NGBCOKJ/o3Xl/F++i0ke7eTshw4YJ60x+20=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

tOlureLazS6/pYwbqdKmud6Bvaf9nA4m71Uoyrhnjxo=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

whJ3jNLC0SO8XSaY/XPhiyr+uvZwcHDCMcIF6SZYwb8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

A live grid hover effect inspired by Liveblocks.

[CLONEABLE] Live Hover Interaction

A keyboard-activated (⌘ + K) menu with arrow navigation.

Had a ton of fun building this project and after some great feedback, wanted to put it out for the community. Most of the functionality comes from the page code in the <head> tag, here's a quick breakdown of the four sections:

1) Initialization: Waits for the HTML and CSS to load before identifying 'modal' and 'closeButton' elements through IDs.

2) Keyboard Toggle: Listens for 'Command/Control + K' key press, toggling the 'modal' element's visibility between 'display: none' and 'display: flex'.

3) Close Button: Assigns functionality to a 'closeButton' element, working seamlessly with the keyboard toggle.

4) Arrow Key Navigation: Disables default arrow key behavior and focuses navigation on modal links, customizing the focused state for accessibility. Exclude links by assigning them the 'ignoreLink' ID.

Apply the 'modal' ID to the content container and 'closeButton' ID to the close element.

Enjoy, Will

Command Menu (⌘ + K)

A customizable scroll effect that folds the text. Great for a hero section.

*not optimized for mobile breakpoint

[CLONEABLE] Agency Template

Description

More by Will Gibson