BUILD WITH AI [Antigravity]
Building “The Loading Screen”: A Real-Time Interactive Experience with Google Cloud Run and Anti-Gravity
How we turned pre-event waiting time into a high-bandwidth, 100% stateless interactive game.
The Concept: “Don’t Panic, We’re Caching the Awesome”
We’ve all been there: waiting for a conference talk to start, staring at a static slide. We decided to change that. The Loading Screen is an interactive, real-time web application designed to turn pre-event “lag” into an analog networking experience.
It consists of a massive “Stage View” (projected on the main screen) and a “Mobile Interface” that turns every attendee’s smartphone into a remote controller.
The Architecture: 100% Stateless & Cloud-Native
When building for live events, the two biggest fears are latency and sudden traffic spikes. To solve this, we designed the system to be completely stateless, optimized for the serverless nature of Google Cloud Run.
Key Tech Stack:
Backend: Node.js 20+ with Express.
Real-Time: WebSockets via Socket.io for sub-millisecond interaction.
Deployment: Dockerized containers on Google Cloud Run.
Scaling: Designed to scale horizontally. Since it operates entirely in memory, it eliminates database bottlenecks during the high-intensity “shaking” phase of the game.
Core Components
- The Stage View (The Visual Centerpiece) The Stage View is a retro-futuristic canvas inspired by 8-bit hacker culture and circuit board aesthetics.
The I/O Portal: A moving digital gateway acting as a 3D vanishing point.
The “Muggle March”: When a user launches a “Muggle” (a pixel-art character) from their phone, it appears on the big screen and marches toward the portal, shrinking in size to create a depth effect.
Dynamic QR Integration: The screen automatically generates a QR code so attendees can jump into the action instantly without typing a URL.
2. The Mobile Interface (Launch Control)
We wanted a “zero-install” experience. No App Store, just the browser.
Shake-to-Launch: Leveraging the HTML5 DeviceMotion API, users physically shake their phones to "throw" their character onto the big screen.
Anti-Gravity Feel: The integration with motion sensors provides a tactile, “anti-gravity” sensation as if the phone is pushing the character into the digital space.
Customization: Users can add a 25-character message that floats above their character, creating a real-time, anonymous chat-bubble parade.
Deployment & Scalability on Google Cloud
By using Google Cloud Run, we achieved a “Pay-as-you-go” model that is perfect for events. The application stays at zero cost until the event starts, then scales instantly as hundreds of attendees scan the QR code.
Become a Medium member
The container is bound to the $PORT environment variable, making it fully compatible with Cloud Run’s managed runtime.
Running it locally
If you want to experiment with this setup, you can run the Dockerized version in seconds:
Bash
Build the lightweight Alpine image
docker build -t loading-screen .
Run the container
docker run -d -p 8080:8080 -e PORT=8080 --name loading-screen-app loading-screen
Lessons Learned
Building The Loading Screen taught us that:
State is the Enemy of Scale: Keeping the app in-memory and stateless allowed us to handle connections without worrying about DB latency.
Permissions Matter: Modern mobile browsers (especially iOS 13+) require explicit user consent for motion sensors. A “Ready to Launch” button is essential for the UX.
Visual Feedback is King: In a crowded room, seeing your specific character appear instantly on a 20-foot screen creates a powerful “wow” moment.
Check out the Project
The project is fully open-source. We encourage you to fork it, add new “Muggle” characters, or adapt it for your own tech meetups!
to probe: https://loading-screen.fiware.app/
Repository: https://github.com/mario-ezquerro/loading-screen
Keywords: #GoogleCloud #NodeJS #WebSockets #GameDev #CloudRun #Serverless