Show us your Art

Art is rarely static, and neither is the pursuit of equity. I wanted to build a living, breathing digital canvas—an experience that requires the user's active participation to find its final form.

I present to you The Equity Pulse.

For the best experience, please turn on your sound, explore the canvas with your mouse, and don't be afraid to grab and drag the nodes once the system is aligned! (If you are on a mobile device, you will also feel haptic feedback as you uncover the artwork).

Accessibility Note: If you have sensory sensitivities, please use the Sparkles / Accessibility toggle in the top right corner to enable the Reduced Motion mode, which disables the parallax effects and pulsing animations.

Inspiration

When I read the prompt for "Gender Equity in Tech," I didn't want to just draw a shattered glass ceiling. I wanted to build a representation of the system itself. The tech industry often celebrates the myth of the "solitary male genius," while the profound, foundational contributions of women are pushed into the background. I wanted to bring those invisible threads to the forefront.

My inspiration is broken down into four interactive acts within the art piece:

Act I: The Fragmented Chaos
When you load the canvas, you are greeted with a simple, cinematic question: "Technology changed the world. But who wrote the code?" Upon entering, the canvas is filled with floating, chaotic programming symbols ({, <, /, 0, 1). This represents the raw, historically fragmented state of our industry. Code without human alignment is just chaos.

Act II: The Catalyst (The Click)
Equity does not happen naturally in a state of rest. It requires an active catalyst—a conscious effort. When the user clicks the screen, a glassmorphic shockwave ripples across the void. The chaotic code melts into smooth nodes that mathematically align to form the "=" (Equals) symbol.

Act III: The Constellation of Collaboration
True equity is built on collaboration. Among the purple nodes of the equals sign, there are bright yellow ones. These represent the hidden history of tech. As the user hovers over them, a gamified Gender Equity Index tracks their discovery, revealing the brilliant women and men who built our modern world together—from Margaret Hamilton's Apollo 11 software to Ada Lovelace's first algorithms.
As each story is uncovered, a generative pentatonic chime echoes (via the Web Audio API), and laser-like SVG lines connect the nodes, proving that innovation is a literal constellation of shared human effort.

Act IV: The Climax
When the user discovers all 8 historical collaborations, the system reaches 100% on the Equity Index. The entire equals symbol synchronizes, glowing with an intense cyan light, displaying the final message: "Equity emerges through true collaboration."

My Code

This art piece was built with a Senior-level approach to architecture, performance, and physics.

Sherman95 / wecoded-frontend-art

🌌 The Equity Pulse

A gamified, interactive tech-art experience built for the 2026 WeCoded Challenge (Frontend Art: Gender Equity).

🎨 The Concept

The Equity Pulse represents gender equity not as a static painting, but as an interactive, dynamic system that requires human action to find alignment.

It starts with a cinematic question: "Technology changed the world. But who wrote the code?" Initially, the canvas is filled with chaotic programming symbols ({, <, /, 0, 1), representing the raw, fragmented state of the tech industry. When the user interacts with the system, the chaos melts into glowing nodes that align to form the "=" (equals) symbol.

This piece goes beyond visual art—it's a gamified discovery experience honoring the historical collaborations between men and women that shaped modern technology.

✨ Key Features

Cinematic & Narrative Progression: An evolving story unfolds as you discover nodes, guided…

View on GitHub

The Tech & Engineering Behind the Art:

Core Engine: React 19 and Vite.

Physics & Kinematics: Powered by Framer Motion. I utilized complex spring physics to calculate the trajectory of the 60 particles. The drag and dragSnapToOrigin constraints allow users to physically grab the nodes and stretch them like rubber bands, adding a highly tactile feel to the art.

Generative Audio & Haptics: No external .mp3 files were used. The musical chimes are synthesized in real-time using the native window.AudioContext oscillator. Mobile users experience tactile immersion via navigator.vibrate.

Extreme Optimization: 60 nodes constantly reacting to mouse parallax can destroy browser performance. I engineered the canvas for a buttery-smooth 60fps by wrapping the particles in React.memo, throttling the mouse event listeners with requestAnimationFrame, and utilizing will-change: transform to force GPU hardware acceleration.

Aesthetics: Tailwind CSS v4 handles the deep space background, glowing box-shadows, and the frosted Glassmorphism cards that display the historical text.

Built with passion and late-night coffee by Ronald Azuero.
IT Student (7th Semester) at Universidad Técnica de Machala (UTMACH).
From Piñas, Ecuador 🇪🇨 to the world.