Shatter & Connect: Breaking the Glass Ceiling 💥 | WeCoded 2026
This is a submission for the 2026 WeCoded Challenge: Frontend Art
✨ Experience the Live Interactive Art Here ✨
(Make sure to click the screen to shatter the glass!)
https://ais-dev-rvpcycmxankiaibdalp5xn-142058924679.asia-southeast1.run.app/
Inspiration:
When thinking about gender equity in tech, the first image that came to mind was the infamous "glass ceiling"—an invisible but very real barrier that keeps underrepresented groups from reaching their full potential.
I wanted to create an interactive piece that not only visualizes this barrier but also celebrates what happens when we finally break it.
In this piece:
The Nodes: The brightly colored, diverse dots represent individuals in the tech community. At first, they are constrained, bouncing against a semi-transparent ceiling, unable to rise higher.
The Shatter: The user interaction (clicking the screen) represents collective action. It takes intentional effort to break systemic barriers.
The Network: Once the glass shatters and falls away, the nodes burst upward and move freely. As they get close to one another, they draw vibrant gradient lines, forming a strong, interconnected web.
The core message is simple: Gender equity isn't just about letting individuals rise; it's about the beautiful, resilient, and collaborative network we can build together once the barriers fall.
My Code:
I built this using HTML5 Canvas for the particle physics (handling the bouncing, shattering, and line-drawing) along with CSS and JavaScript to manage the UI transitions.
https://codepen.io/Megz-Lawther/details/QwKvyWQ
Thank you,
Megan Lawther.
17.03.2026
Top comments (0)