Rise, Shatter, Lead.

#wecoded #devchallenge #frontend #css

WeCoded 2026: Frontend Art 💜

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

What did I build ??

What inspired me ??

The glass ceiling is one of the most enduring metaphors in gender equity — and I wanted to make it visible.

"Rise. Shatter. Lead." is an animated tribute to the women who built the technologies we take for granted every day: Grace Hopper, who invented the compiler; Radia Perlman, whose spanning-tree protocol underpins the modern internet; Kimberly Bryant, founder of Black Girls Code; and Reshma Saujani, who launched Girls Who Code. The central figure — You — sits among them deliberately. Because the next pioneer is still writing their story.

The cracked glass ceiling at the center of the piece isn't decorative. It's a reminder that 27% of the tech workforce being women, and only 18% of tech leadership, isn't a ceiling we've broken yet — it's one we're still cracking.

How I built it ??

The latest version of this piece is built entirely in pure HTML and CSS — no JavaScript whatsoever. Every effect you see is driven by the browser's rendering engine alone:

Star field — 70+ stars rendered using nothing but box-shadow on a single CSS pseudo-element, drifting upward with @keyframes
Glass ceiling crack — SVG lines drawn with animated stroke-dashoffset, each crack radiating outward with a staggered animation-delay
Flying shards — clip-path: polygon() triangles that float and rotate away via keyframe animation
Cinematic headline reveal — each word clips and slides up from a hidden container, staggered for a theatrical entrance
Scrolling pioneers ticker — a seamlessly looping translateX animation across a duplicated flex row, no JS scroll listeners
Hover tooltips & progress bars — pure CSS :hover cascade triggering child opacity, transform, and scaleX transitions