DEV Community

Cover image for Shatter Bay — Breaking the Glass Ceiling in Tech
Melody Kelly. N
Melody Kelly. N

Posted on

Shatter Bay — Breaking the Glass Ceiling in Tech

WeCoded 2026: Frontend Art 💜

Show us your Art

Shatter Bay is an interactive frontend artwork representing the breaking of barriers in the technology industry.

The experience begins with rising code and digital energy trapped beneath a fragile glass ceiling. As interaction builds, cracks begin to form until the ceiling finally shatters, allowing the code to rise freely.

The project is designed as a symbolic moment of breakthrough, representing the progress toward gender equity in technology and the collective effort required to dismantle systemic barriers.

🔗 Live Project:
[https://shatter-bay.vercel.app/]

Inspiration

The inspiration behind Shatter Bay comes from the widely recognized metaphor of the glass ceiling — the invisible barriers that prevent many talented individuals from reaching leadership or recognition in their fields.

In tech especially, countless developers possess the creativity, skill, and ambition needed to innovate, yet systemic barriers have historically limited opportunities for many underrepresented voices.

This artwork transforms that metaphor into an interactive digital experience:

Rising code represents talent, creativity, and potential.

The glass ceiling represents invisible structural barriers.

The cracking and shattering symbolizes collective progress toward equity and inclusion.

Rather than presenting the idea as static imagery, I wanted users to participate in the act of breaking the ceiling, reinforcing the idea that progress happens through continued effort and participation from the entire tech community.

My Code

The project was built using frontend technologies to create an interactive and immersive experience.

Technologies used:

React
CSS
JavaScript

Interactive animations and particle effects

The goal was to combine symbolic storytelling with creative frontend engineering, demonstrating how code itself can be used as a medium for artistic expression.

💻 Source Code Repository:
(https://github.com/melodykellynwaogu/shatter)

Thank you to the DEV community and the WeCoded Challenge for creating a space that celebrates creativity, diversity, and the voices shaping the future of technology.

Top comments (0)