Zoom Grid Mayhem

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

"You're still on mute."
We've all heard it. With Zoom Grid Mayhem, I wanted to playfully capture the chaos, comedy, and sometimes downright awkwardness of virtual meetings. Inspired by the endless tiles of distracted coworkers, surprise cat cameos, and mysterious ceiling fan views, I built a mini art piece that turns the typical Zoom call into an interactive, animated CSS grid party. It’s a love letter (or a warning?) to remote office life.

Demo

🎮 Check out the mayhem: https://zoomgridmayhem.netlify.app/

Feel free to view the source code via browser inspect tools or fork your own version!
https://github.com/forbiddenlink/zoom-grid-mayhem

Journey

I started with a simple grid layout to mimic a typical video call screen and let my imagination run wild. Using only HTML and CSS (with a tiny dash of animation), I styled each "participant" to reflect common—and absurd—video meeting moments:
The person who's frozen.
The one clearly working out during the call.
Pets taking over the webcam.

One of the most fun parts was experimenting with expressive CSS styles and animations to give each tile its own "personality" using minimal markup. I avoided JavaScript to stay within the spirit of CSS art, relying on @keyframes, :hover states, and creative use of ::before and ::after.

I learned how powerful CSS Grid and creative constraints can be—especially when you're trying to express real-world chaos using code.

I’d love to expand this with user-generated mayhem tiles, randomize the grid chaos, and maybe even build a “live meeting” version that lets users join in. For now, this piece stands as a pixelated tribute to the beautiful absurdity of remote work.