She Compiles the Stars
This is a submission for the 2026 WeCoded Challenge: Frontend Art
Show us your Art
Live demo: [https://codepen.io/Aggrey-Paintsil/pen/GgjGwGJ]
Inspiration
I am a computer science student in Ghana, and when I think about gender equity in technology, I don't think of it as a distant Western conversation. I think about the women in my own classrooms — brilliant, capable, often the only woman in the room — who have to work twice as hard to be taken half as seriously. I think about the pioneers whose names we rarely learn in school. And I think about the ceiling: invisible, but very real.
That is what this piece is about.
"She Compiles the Stars" is a three-act interactive art experience built entirely in vanilla JavaScript and HTML5 Canvas — no frameworks, no libraries, just code.
The Three Acts
Act I — The Constellation Forms
1,800 particles drift across a deep space background and slowly assemble into the silhouette of a woman, fist raised. Each particle finds its place, the way every woman in tech has had to find hers — often starting scattered, often starting alone, but always moving toward something.
Act II — She Reaches Beyond the Ceiling
A glass ceiling hovers above her — translucent, almost invisible, but unmistakably there. The border frame draws on Kente cloth geometry, a nod to my Ghanaian heritage and a reminder that this story of resilience belongs to women everywhere, not just in Silicon Valley.
Act III — The Ceiling Breaks
Click "shatter the ceiling" and golden cracks radiate outward. Glass shards explode downward. The particles scatter free. The stars belong to everyone now.
The Pioneers
Encoded into the piece are six women whose contributions built the technology world we live in — yet whose names are rarely taught:
- Ada Lovelace — wrote the first algorithm in 1843, before computers existed
- Grace Hopper — invented the compiler and made programming accessible to humans
- Katherine Johnson — calculated the trajectories that sent humans to the moon
- Hedy Lamarr — co-invented spread-spectrum communications, the foundation of WiFi and Bluetooth
- Radia Perlman — invented the spanning tree protocol that makes the internet function
- Fei-Fei Li — created ImageNet and shaped the entire field of modern AI
The counter in the top corner reads 6 — six pioneers shown here. The real number is countless.
Why Afrofuturism?
I made a deliberate choice to root this piece in an Afrofuturist aesthetic — dark cosmic backgrounds, warm gold and rust tones drawn from earth and fire, geometric patterns inspired by Kente weaving. Afrofuturism imagines futures where African and diasporic people are not erased but centred. That same imagination is what gender equity in tech demands: not just adding women to existing systems, but building futures where they were never excluded to begin with.
The typography pairs Cormorant Garamond (elegant, literary, the serif of manifestos) with DM Mono (code, terminals, the language of builders). Together they say: this is both a story and a system.
What I Built With
- HTML5 Canvas — particle system, silhouette targeting, nebula backgrounds, starfield, glass shatter physics
- SVG — Kente-inspired geometric border frame with tiling patterns
- Vanilla JavaScript — custom particle engine (1,800 particles with individual targets), procedural crack generation, shard physics with gravity, film grain via ImageData, counter animation, 3-act state machine
- CSS — custom cursor, staggered reveal animations, Cormorant Garamond + DM Mono font pairing
- Zero dependencies — no libraries, no build tools, one single HTML file
My Code
github https://github.com/aggreypaintsil168/she-compiles-the-stars.git
A Note
I used AI tooling to help develop parts of this submission — in keeping with the challenge rules. The concept, the meaning, the Afrofuturist direction, the choice to name these specific pioneers, the decision to ground it in my experience as a student in Ghana — those are entirely my own.
The glass ceiling is not abstract to me. This piece is my way of coding against it.
MIT License © 2026
Cover image generated from a screenshot of the live piece.
Top comments (0)