Live Performance XR Platform

BETWEEN STATES

This is not a second screen experience.
This is an extension of the stage.

Audio-Reactive WebXR Mobile-First No Headset Required
Scroll

00 — Concept Visual

One phone.
An extension of the stage.

LIVE
Audio Reactive System

FFT analysis maps bass, mid & treble to visual parameters in real time

Face-Linked Identity Layer

MindAR face tracking anchors glitch visuals to the user's face

Embodied Interaction

Gyroscope & accelerometer translate physical motion into distortion

Mobile XR via QR Access

No headset, no download — scan once, experience instantly

01 — Core Premise

Identity is not an object.
It is interference.

Fluid

Identity continuously transforms, refuses to stabilize into a fixed form.

Unstable

Glitch as behavioral language — disrupting visual coherence from within.

Transforming

Expression as interference, not object. Presence as signal, not image.

"The medium is the message" — McLuhan, 1964[1]. Here, the body is the medium.

02 — Personas

Designed for those who
live inside the music.

Primary · 70% Focus

Alex, 26

Festival Attendee & Content Creator

Demographics

Age 18–35 · Attends concerts, raves, and queer arts events · Urban, digitally fluent

Goals
  • Enhance and document the live music experience
  • Create unique, shareable content from events
  • Feel genuinely immersed, not just present
Behaviors
  • Records video through their phone constantly
  • Engages with AR filters and social overlays
  • Seeks participatory, interactive experiences
Pain Points
  • Passive viewing mediated entirely through a screen
  • Generic filters with no connection to the live moment
  • Feels like a spectator, not a participant
"I want to capture the moment but I also want to be in it."
Secondary · 30% Focus

Jordan, 38

Festival Producer & Queer Arts Organizer

Context

Produces 4–8 events per year · Manages 200–5,000 person events · Seeking novel audience engagement tools

Goals
  • Differentiate their event from others in market
  • Increase audience engagement and dwell time
  • Offer interactive layer without hardware overhead
Needs
  • Scalable, QR-based deployment with no installs
  • Customizable visuals per artist or event theme
  • Culturally resonant with queer arts communities
"I need something that feels specific to our event — not a generic app."

03 — Behavioral System

The system moves
through four states.

01

World in Context

Minimal visual intervention. The system is latent, waiting for signal.

02

Emergence

Glitch elements begin to appear. Forms suggest identity before collapsing.

03

Distortion

Audio and motion intensify. Fragmentation increases. Signal overwhelms form.

04

Collapse / Becoming

Identity dissolves into abstraction. No stable form is achieved. Only flux.

04 — Experience Storyboard

From scan to becoming.

QR · Entry
Step 1

QR Scan

User scans code at venue. Experience loads instantly in browser — no download required.

🎤 📷 📡
Permissions
Step 2

Tap to Activate

Single tap grants mic, camera, and motion access. The system awakens.

Rear Camera · Environment
Step 3

World in Context

Rear camera activates. Ambient visuals overlay the live environment. System is latent.

Front Camera · Identity
Step 4

Identity Mode

Front camera activates face tracking. Glitch attaches to the face. Self becomes canvas.

Collapse · Becoming
Step 5

Collapse / Becoming

Audio peaks. Identity dissolves into abstraction. No stable form is achieved. Only flux.

05 — XR Differentiation

Why XR? Because the
environment drives the visuals.

1

Embodied Interaction

Device movement alters visual output in real time. Tilt, shake, proximity — physical gestures become expressive data shaping the experience.[3]

2

Face / Body Anchoring

Identity-linked visuals via front camera. Self becomes the canvas. Glitch attaches to the face, distorts, and ultimately collapses.[4]

3

Site-Specific Meaning

Visuals driven by the live audio environment. The experience cannot be replicated outside its context. It only exists in the moment.[2]

06 — Information Architecture

A connected system.
Every layer, mapped.

🎤
Microphone
Live audio · FFT
📷
Rear Camera
Environment · AR
🫦
Front Camera
Face tracking · Identity
📡
Motion Sensor
Gyro · Accelerometer
Web App · Browser-Native
Hydra · Generative Visuals p5.js · Audio Mapping MindAR · Face Tracking State Machine · 4 Modes
Vite · No install required
📱
Participant Device
AR overlay · Visual output
🔊
Live Audio Environment
DJ · Stage · Crowd

07 — XR Experience Layers

Not flat. Not fixed.
Four spatial layers, stacked.

Layer 4 Interaction Layer Audio + Motion — real-time input driving all layers below Mic · Gyro · FFT · State Machine
Layer 3 Visual Layer Hydra generative output — glitch, distortion, abstraction Hydra · Three.js · p5.js
Layer 2 Identity Layer Front camera — face anchoring, self as canvas MindAR · Front Camera
Layer 1 Environment Layer Rear camera — physical space as foundation of the experience Rear Camera · WebXR

Each layer feeds into the one above. The physical environment generates audio; audio drives state; state shapes visuals; visuals anchor to the face. The stack is embodied — not abstract.[3]

08 — Technical System

Browser-native XR.
No app. No headset. Just presence.

Audio Input
Mic · Environment
FFT Analysis
Bass · Mid · Treble
State System
4 behavioral modes
Visual Mapping
Hydra · p5.js
AR Overlay
WebXR · Mobile
Device Motion Distortion Parameters
Face Detection Identity Anchoring
Hydra p5.js WebAR Vite WebRTC FFT

09 — Market Positioning

Deploy it anywhere
live music happens.

Festival Activation

Scalable QR-based entry. No hardware overhead. Transforms passive crowds into active participants instantly.

Live Performance

Enhancement tool for DJs, producers, and electronic acts seeking deeper audience connection.

Gallery Installation

Interactive identity exploration for curatorial and gallery contexts. The body as medium.

Queer Arts Programming

Culturally resonant tool for queer arts organizers. Visibility that refuses fixed categorization.

10 — Prototype in Action

Already working.
Already real.

Feature 1 · Basic

Audio-Reactive Visuals

Hydra generative output responds to live FFT analysis. Bass, mid, and treble each map to distinct visual parameters.

Feature 2 · Advanced

Face Tracking Identity Layer

MindAR browser-based face detection. Glitch visuals anchor to facial landmarks. Self becomes the canvas in real time.

Feature 3 · Basic

Motion-Driven Distortion

Device gyroscope and accelerometer feed directly into visual distortion. Physical gesture shapes the image.

Feature 4 · Basic

4-State Behavioral Machine

Audio + motion thresholds trigger automated state transitions. The system behaves — it is not controlled.

Feature 5 · Basic

3D Object in AR Space

Three.js 3D model rendered in the scene with audio-driven opacity. Presence linked to sound intensity.

11 — Roadmap

12 months to
production.

0–3 mo
Phase 1
  • Core system stability
  • Mobile performance
  • Visual coherence
Solo builder
3–6 mo
Phase 2
  • QR deployment system
  • Artist customization
  • Face/body anchoring
1–2 collaborators
6–9 mo
Phase 3
  • Pilot live event
  • User feedback
  • UX + onboarding
2–3 team
9–12 mo
Phase 4
  • Festival partnerships
  • Multi-user sync
  • Production deploy
3–4 team

$1M Conceptual Allocation

Development
40%
Production + Events
25%
Design + Visuals
20%
Marketing + Partnerships
15%

12 — Bibliography

Research & Grounding.

Non-AI Sources

  1. [1]
    McLuhan, M. "Understanding Media: The Extensions of Man." MIT Press, 1964. — Media theory framing body as medium.
  2. [2]
    Salter, C. "Entangled: Technology and the Transformation of Performance." MIT Press, 2010. — Site-specific, embodied performance & tech.
  3. [3]
    Dourish, P. "Where the Action Is: The Foundations of Embodied Interaction." MIT Press, 2001. — Embodied computing & spatial interaction design.
  4. [4]
    Muñoz, J. E. "Cruising Utopia: The Then and There of Queer Futurity." NYU Press, 2009. — Queer identity as fluid, forward-oriented becoming.
  5. [5]
    Benford, S. & Giannachi, G. "Performing Mixed Reality." MIT Press, 2011. — Mixed reality as live performance medium.

AI Tool Citations

  1. [AI-1]
    Anthropic. "Claude Sonnet 4.5." Used for conceptual iteration, pitch structure, and copy refinement. 2025.
  2. [AI-2]
    Hydra Community. "Hydra-Synth Documentation." hydra.ojack.xyz — Real-time visual synthesis reference for patch design. 2024.
  3. [AI-3]
    MindAR.js Team. "MindAR.js — Web AR Library." hiukim.github.io/mind-ar-js-doc — Face tracking & image tracking library docs. 2024.

13 — Proof Points

Already working.
Already real.

MVP

Working prototype with audio-reactive visuals and face tracking

0

Headsets required. Browser-native XR delivery via QR code.

Scalable across venues, formats, and events worldwide

1 QR

Single scan to enter the full immersive experience

Between States is an extension of the stage.
Let's build it together.

Let's Build This

or find me on Instagram @noir_mak