SpecterBeats

🎧 Specter Beats: A Gesture-Controlled DJ Experience Built for Everyone, Everywhere

Turning motion into music with nothing but your camera.

👻 What Is Specter Beats?

Specter Beats is a browser-based, motion-controlled DJ app designed to make music creation accessible to anyone in the world. Using only a webcam, simple hand gestures can control effects, filters, and transitions in real time. No DJ hardware, no expensive gear, no friction — just pure creativity.

The project was built for the Kiroween Hackathon, where the challenge was to create an unforgettable, Halloween-themed user interface. That led to the blend of eerie Spline scenes, floating eyes that track the cursor, animated glitch flashes, and a glowing purple globe that anchors the experience.

But behind the spooky visuals is a deeper mission:

to make the joy of mixing music available to communities who don’t have access to traditional DJ equipment.

🌍 Why I Built It

In many parts of the world, professional DJ gear is completely inaccessible — either because it is too expensive, too bulky, or simply not available locally. Even basic mixers can cost more than an entire month’s income in some regions.

Yet music is universal. Rhythm, motion, and expression belong to everyone.

Specter Beats started with one simple question:

What if anyone, anywhere, on any device, could DJ using nothing but a camera?

That idea became the spark for a tool that blends accessibility, creativity, and technology in a fun, Halloween-themed package.

🕹 How It Works

Specter Beats uses three core technologies working together:

1. Camera Input

OpenCV reads video frames from the user’s webcam and tracks simple motions like:

• Raising or lowering a hand
• Left/right movement
• Distance and speed
• Gesture changes over time

These motions are normalized into clean, usable values.

2. Gesture-to-Audio Mapping

In the React interface, gesture data is connected to audio parameters such as:

• Filter cutoff
• Reverb depth
• EQ sweeps
• Volume and transitions
• Effect modulation

So lifting your hand might open a filter, while sliding left can trigger a sweep.

3. Lightweight Browser-Based DJ Engine

Everything runs inside the browser using efficient React components and Web Audio API logic. That means it works on:

• Laptops
• Tablets
• Low-end devices
• Borrowed or shared computers

No downloads. No paid plugins. No licenses.

🧛‍♂️ The Haunted UI

Since this was built for the Costume Contest category, the front end is designed to feel like a premium, spooky interactive experience:

👁 Floating Eye Scene (Spline)

A distorted 3D environment of floating eyeballs that track your mouse movement, pulling users into the theme the second they arrive.

🕸 Glitch Flash Effect

A micro-jump scare that quickly flashes a horror image every 15 seconds for an unsettling atmosphere.

🌐 Purple Crystal Globe (Spline)

A rotating, ethereal globe that visually represents the idea behind the project:

global access to creativity.

🔮 Glass-Pill Navigation

A modern, ghostly navbar using blurred glass, gradients, and soft neon.

Together, they form an interface that is both striking and surprisingly smooth.

⚙️ Tech Stack

Specter Beats is built with:

• React
• TailwindCSS
• OpenCV
• Python (gesture processing pipeline)
• Spline (3D animated scenes)
• Web Audio API
• Kiro (vibe coding + specs + steering)

Performance matters, especially for motion and audio, so every component is lightweight and efficient.

🤖 How Kiro Supercharged Development

Kiro played a huge role in the speed and quality of this build.

Vibe Coding

I structured the app by describing the behavior I needed in plain English. Kiro translated that into:

• React hooks
• Tailwind layouts
• OpenCV processing functions
• Audio parameter mapping logic

The most impressive output was a full webcam-to-gesture pipeline hook that worked almost immediately.

Spec Development

For complex UI sections, I wrote structured specs. Kiro turned those into complete components without design drift.

Steering Docs

I used steering to maintain:

• The Halloween tone
• Lightweight architecture rules
• Accessibility focus

This prevented the app from drifting toward bloat or design inconsistency.

🎯 The Impact

Specter Beats isn’t just a fun Halloween experiment. It opens the door for a broader movement:

creative tools that remove economic and geographic barriers.

• A student in rural India
• A teenager in Brazil
• A kid using a shared family computer
• Someone who loves music but cannot afford gear

Anyone with a camera can now experience the joy of mixing sound.

🧪 Try It Yourself

The app runs directly in your browser — no setup needed.

(Insert your public URL here)

Prepare your webcam and your best spooky DJ gestures.

👋 Closing Thoughts

Specter Beats is a small project with a big vision:

to make music creation more playful, more expressive, and more accessible.

Whether it becomes a full platform or remains a hackathon favorite, the experience of building it — especially with Kiro’s help — was incredibly rewarding.

If you want code samples, behind-the-scenes technical notes, or a deeper breakdown of the gesture system, I can add a Part 2!