Reactive Branding: Logos That Respond to You

I’ve been thinking a lot about what happens when a brand identity stops being a static asset and starts being something alive. We spend all this time crafting logos and motion pieces, but they’re still fundamentally locked — they play the same way every time. So I built a particle system that responds to you in real time. Your hand controls displacement: palm distance sets the radius, finger spread sets the area of effect. Your face controls brightness — smile and the particles light up, frown and they dim. It’s all running through MediaPipe for the tracking and WebGL for the rendering, so it’s surprisingly performant right in the browser.

Why this matters

The use cases are what get me excited here. Imagine a trade show booth where the brand reacts as someone walks past — not a pre-rendered loop, but something that genuinely responds to the person standing in front of it. Or a conference screen that shifts and breathes based on the energy in the room. These are the kinds of moments that create genuine surprise and delight, the stuff people actually remember and talk about afterward. It moves branding from “look at this” to “interact with this,” which is a fundamentally different relationship between a person and a brand.

The technical side

The hand tracking was the more interesting engineering challenge. MediaPipe gives you landmark positions for each finger joint, so I’m calculating palm distance from the camera as a normalized value and mapping finger spread angle to the effect radius. The face tracking uses mouth landmark positions to derive a smile coefficient — it’s not perfect, but it’s responsive enough that the connection between your expression and the visual output feels immediate and magical. The particle system itself is standard WebGL instancing, but wiring it up to these human inputs is what makes it feel like the brand is actually paying attention to you.