SpecterBeats
Source: Dev.to
Overview
Specter Beats is a browser‑based, gesture‑controlled DJ app that turns motion captured by a webcam into real‑time music effects, filters, and transitions. Built for the Kiroween Hackathon’s Halloween‑themed Costume Contest, it combines spooky visuals with an accessible, hardware‑free mixing experience.
Motivation
- Accessibility: Many communities lack affordable DJ equipment; even basic mixers can cost more than a month’s income in some regions.
- Universal joy: Music, rhythm, and expression belong to everyone, regardless of location or resources.
- Core question: What if anyone, anywhere, on any device could DJ using nothing but a camera?
Core Technologies
| Layer | Role |
|---|---|
| OpenCV | Reads webcam frames and tracks simple motions (hand raise/lower, left/right movement, distance, speed). |
| React | Connects gesture data to audio parameters and renders the UI. |
| Web Audio API | Handles audio processing (filters, reverb, EQ, volume, transitions). |
| TailwindCSS | Provides the responsive, modern styling. |
| Spline | Supplies the 3D animated scenes (floating eyes, glowing globe). |
| Python | Runs the gesture‑processing pipeline. |
| Kiro | Assists with specs, component generation, and steering for consistent design. |
Gesture Tracking
OpenCV normalizes captured motions into clean values that are then fed into the React interface. Tracked gestures include:
- Raising or lowering a hand
- Left/right movement
- Distance from the camera
- Speed of motion
- Changes over time
Audio Parameter Mapping
The React layer maps gesture data to various audio controls:
- Filter cutoff
- Reverb depth
- EQ sweeps
- Volume & transitions
- Effect modulation
Example: Lifting a hand may open a filter, while sliding left triggers an EQ sweep.
Device Compatibility
Because everything runs in the browser, Specter Beats works on:
- Laptops
- Tablets
- Low‑end devices
- Borrowed or shared computers
No downloads, paid plugins, or licenses are required.
UI Design (Halloween Theme)
- 33D environment: Floating eyeballs that track the cursor, creating an immediate spooky vibe.
- Micro‑jump scares: A horror image flashes every 15 seconds for added tension.
- Rotating globe: Symbolizes global access to creativity.
- Ghostly navbar: Blurred glass, gradients, and soft neon accents.
The result is a striking yet smooth interface that feels premium despite its hackathon origins.
Role of Kiro
Kiro helped keep the project lightweight and on‑track:
- Specification to code: Plain‑English behavior descriptions were turned into React hooks, Tailwind layouts, OpenCV functions, and audio mapping logic.
- Rapid pipeline creation: Delivered a full webcam‑to‑gesture hook almost immediately.
- Component generation: Structured specs became complete UI components without design drift.
- Steering: Maintained the Halloween tone, lightweight architecture, and accessibility focus, preventing bloat.
Impact & Accessibility
Specter Beats demonstrates how creative tools can break economic and geographic barriers. Potential users include:
- A student in rural India
- A teenager in Brazil
- A child using a shared family computer
- Anyone who loves music but cannot afford gear
Anyone with a webcam can now experience DJ mixing.
How to Try
- Open the app in a modern browser (no installation needed).
- Allow webcam access.
- Prepare your best spooky DJ gestures and start mixing!
(Insert your public URL here)
Future Directions
- Part 2: Provide code samples, technical notes, and a deeper breakdown of the gesture system.
- Potential evolution into a full platform or continued presence as a beloved hackathon project.
Specter Beats aims to make music creation more playful, expressive, and accessible for everyone.