Take the Stage
Project Overview
Take the Stage is an interactive Spark AR video call experience for Instagram and Facebook that gamifies video conversations. I created this project solo for Facebook's XR Hackathon and won 3rd place, earning $25,000.
Concept: Participants take turns being "on stage" in a spotlight while others react. Players earn points based on the reactions they receive from other participants during their turn, creating an engaging and competitive video call experience.
Role: Solo developer and designer - I handled all aspects of the project from concept to implementation.
Technical Implementation
Built entirely with Spark AR Studio, the experience leverages:
- TypeScript: Core logic for turn management, point tracking, and game state
- OpenGL Shader Language (GLSL): Custom shaders for visual effects and the "stage" spotlight effect
- Spark AR APIs: Real-time face tracking, multi-user synchronization, and reaction detection
- Figma & Photoshop: UI/UX design for in-call interface elements
Key Features
- Turn-Based Gameplay: Automated rotation system that puts each participant on the stage
- Reaction-Based Scoring: Real-time point calculation based on other participants' reactions
- Visual Effects: Custom spotlight and stage effects using GLSL shaders
- Multi-User Sync: Synchronized game state across all participants in the video call
- Intuitive UI: Clear visual indicators for who's on stage and current scores
Challenges & Solutions
Challenge: Real-Time Synchronization
Problem: Keeping game state synchronized across multiple participants in a video call with network latency.
Solution: Implemented a state management system that handles network delays gracefully and ensures all participants see consistent game state with minimal lag.
Challenge: Performance Optimization
Problem: Spark AR filters need to run smoothly on a wide range of mobile devices.
Solution: Optimized shader code and minimized computational overhead to ensure 60fps performance even on lower-end devices.
Hackathon Achievement
Take the Stage in action - showcasing the interactive video call experience
Facebook XR Hackathon - 3rd Place Winner
Competed in Facebook's XR Hackathon against developers worldwide and won 3rd place, receiving a $25,000 prize. The judges recognized the project's innovative approach to making video calls more interactive and engaging.
View Official Winners Announcement
What I Learned
- Spark AR Platform: Deep dive into Spark AR's capabilities for creating interactive AR experiences
- GLSL Shaders: Advanced shader programming for real-time visual effects
- Multi-User AR: Challenges and solutions for synchronized AR experiences
- Rapid Prototyping: Developing a complete, polished experience within hackathon constraints
- Game Design: Creating engaging mechanics that work well in video call contexts
Tech Stack
| Category | Technologies |
|---|---|
| Platform | Spark AR Studio |
| Programming | TypeScript, GLSL (OpenGL Shader Language) |
| Design | Figma, Photoshop |
| APIs | Spark AR APIs, Face Tracking, Multi-User Sync |
Impact
This project demonstrated the potential for AR filters to transform passive video calls into interactive, engaging experiences. The success in the hackathon validated the concept and showed how AR can add a new dimension to social communication platforms.
This project showcases my ability to rapidly prototype innovative ideas, work with AR technologies, and create engaging user experiences for social platforms.