Shattering the Ceiling — An Interactive Frontend Experience

#wecoded #devchallenge #frontend #css

This is a submission for the 2026 WeCoded Challenge: Frontend Art

My Art

Click the glass to crack it. Keep going to shatter it.

"Shattering the Ceiling" is a fully interactive, chapter-driven story about gender equity in tech — told through a glass ceiling you literally break apart with every click.

Inspiration

The glass ceiling isn't a metaphor you can easily feel — it's invisible by design. I wanted to make it tangible.

This project puts the user inside the story. You're not reading about barriers in tech; you're standing in front of one, pressing against it, watching it crack under pressure, and finally shattering it — chapter by chapter.

Each of the four chapters reflects a real dimension of the problem:

The Room — The silence women face when they walk into spaces not built for them
The Pioneers — Ada Lovelace, Grace Hopper, Margaret Hamilton, and others who built computing and were erased from its history
The Numbers — The data: women went from 37% of CS degrees in 1984 to under 22% today — and gender parity could add $4.3T to global GDP
The World We Build — A manifesto for what tech looks like when everyone gets a seat

The glass ceiling was never inevitable. It was built. And anything built can be shattered.

My Code

codepen.io

Built with

Pure HTML, CSS & vanilla JavaScript — no framework dependencies
GSAP — choreographed animations and procedural crack-drawing sequences
HTML5 Canvas — animated backgrounds that shift per chapter (code rain → circuit nodes → grid → stars)
SVG crack system — fracture lines that radiate procedurally from every click point
Glassmorphism UI — frosted glass overlay that dims and shatters on interaction
Custom cursor with a lagging ring follower
Light / Dark theme toggle — floating pill header
Fully responsive — touch events supported for mobile