This is a submission for the 2026 WeCoded Challenge: Frontend Art
1. The Motto: "Insanity and Courage"
As my daughter often says, my motto for this life chapter (and especially this project) is "Insanity and Courage".
To be honest, I never saw myself participating in something like this. My previous attempt at the first stage of this challenge, Echoes of Experience, was met with such a "polite silence" in terms of reactions that it felt like a clear hint: "Maybe you're in the wrong garden, Katya."
But then, the idea for this visual performance hit me. It was so persistent that it wouldn't let me sleep. I didn't think about how I would build it; I just knew I had to. And that’s when the "real fun" began...
2. The Artistic Vision: Scales of Reality
The central motif of this installation is a pair of scales that remain visually balanced by design. This represents formal, legal equality in the workplace. However, the true story is told through the falling items:
The "Second Shift": While both sides show equal professional standing (the laptops), the female side is gradually overwhelmed by the "invisible" weight of unpaid domestic labor.
The Invisible Burden: Falling household items (strollers, pans, appliances) represent the mental load and multitasking that often fall disproportionately on women.
Pressure & Stress: The pulsing gender symbols and the darkening gradient are visual metaphors for the mounting systemic pressure that grows as responsibilities multiply.
The Finale: A theatrical ending serves as a reminder: we all see the imbalance, we all acknowledge it, yet the cycle continues. This piece is a call to look closer at the "hidden" side of the scales.
3. The Performance (Video)
https://github.com/user-attachments/assets/deb7ac12-7865-4ac5-af44-22f3767447b8
4. Project Structure & The "Renovation Budget" Rule
If you’ve ever done a home renovation, you know the rule: calculate your budget and time, then multiply by two. If you’re lucky.
My "renovation" of this code was supposed to take a week. It took that week plus another 8 days of pure troubleshooting.
The Tech Stack:
- Vanilla JavaScript (No libraries, just raw logic).
- CSS Custom Properties for deep design tokens.
- SVG for the scales architecture.
- AudioDirector Class for rhythmic synchronization.
5. The "Behind the Scenes" Struggles
Here is a list of things that made me want to pull my hair out (and how I fixed them):
- The Z-Index Layer Cake: Managing 6 layers of depth was like hell’s accounting. Making sure a falling pan lands inside the scale pan—behind the front rim but in front of the back wall—required a level of CSS discipline I didn't know I possessed.
- The Spiral of Despair: I tried doing the spiral fall with pure CSS. My laptop almost turned into origami. I switched to a JS-based spiral using polar coordinates ($r = a + b \cdot \theta$) and requestAnimationFrame. No more "jumping" icons!
- The Zoom Conflict: Scaling the body messed up every absolutely positioned element. I had to create a dedicated .page__zoom container and move the entire universe inside it.
- Audio-Visual Sync: My discrete zoom felt "soft" and lagged behind the music. I had to implement a "Snap Mode" and fine-tune parameters like frontloadFactor and leadSeconds to make the zoom feel snappy and anticipatory.
- The Ghost of Backgrounds: At one point, the background just stopped showing up on restarts because of a conflict between body and .start-overlay. I had to clear the document background and move all scene-active styles into a predictable CSS class.
6. Repository & License
You can find the "gory details" of my code here:
👉 GitHub: wecoded-gender-art-2026 (https://github.com/kate8382/wecoded-gender-art-2026.git)
The project is shared under the MIT License (yes, the one I have on GitHub—feel free to use it, just don't blame me for the z-index trauma!).
7. Conclusion
In the end, despite the headaches, the minutes of total despair, and the constant internal question—"Why am I doing this to myself?"—I am incredibly glad I reached the finish line.
Regardless of the contest results, I am proud of this work. It might not look exactly like the "perfect" version I initially imagined, but it is a living, breathing visualization of a thought that was important to me. I survived the 8-day budget overrun, and I’m still standing.
P.S. No laptops or chipmunks were harmed in the making of this project. 🐿️💻
Top comments (7)
Great article! I love the youtube video. It make unique!
Thank you so much for the kind words and support! ✨ Honestly, I poured everything into this project: my soul, a total brain explosion 🤯, and even a bit of my eyesight from those late-night battles! 😅 Thanks again!
I know the feeling :)
I think that you unfollow me by mistake?
Oh, I’m so sorry! 😅 I’m still figuring out how everything works here on dev.to on my phone, I must have clicked something by mistake. 🤦♀️ Fixed it now! So sorry! 🙏✨
No worries :). yeah! I have issues with Dev.to on my computer sometimes.
Thank you for understanding! 😊 And sorry for the late reply — after all my misclicks on the phone yesterday, I decided not to risk it anymore and wait until I was back at my usual screen. 😅 What can I say... I’m quite a social media user! 🤦♀️
Thanks again for being so patient!