This is a submission for Weekend Challenge: Passion Edition
What I Built
FIFA Jumbotron lets users upload a 10-second video and display it on a virtual football stadium jumbotron.
It uses HTML5 Canvas to create a realistic live match experience with a simple and easy-to-use interface.
Demo
WE ARE 26 - FIFA Fan Fest Jumbotron
Join the celebration! Record your 10-seconds fan celebration live on the grand stadium jumbotron with custom filters and team overlays.
fifa-fan-fest-jumbotron.vercel.app
Code
anshulnegitc
/
FifaFanFestJumbotron
An Angular web application that records a 5 seconds video clip of the user
⚽ FIFA Fan Fest 2026 Jumbotron Experience
Welcome to the FIFA Fan Fest 2026 Jumbotron Experience, an interactive, full-stack, zoneless Angular application that brings the stadium celebration directly to fans. Users can record a 10-second celebration video and watch themselves broadcast on the grand stadium jumbotron with state-of-the-art live chroma-keying (green screen) technology!
🌟 Key Features
Live Chroma-Keying & Compositing: Integrates camera feeds or user-uploaded media seamlessly into the virtual jumbotron using a custom-tailored green-screen algorithm.
Robust Media Handling: Supports standard cameras, simulated fallback images (when permissions are blocked), and custom image uploads.
High-Fidelity Audio Synthesis: Built with the Web Audio API to mix stadium cheering, ambient noise, and microphone audio into a single studio-grade track.
One-Click Broadcaster Options: Easily download or share the final processed video.
Smart Fallbacks & Safety Checks: Detects potential browser autoplay limits or video errors and automatically falls back…
How I Built It
- Started with the idea of building a minimalist FIFA-themed application.
- Initially planned a photo booth with team-specific frames and filters.
- Supporting many teams and maintaining assets became time-consuming, so I pivoted.
- Explored creating a 3-second GIF, which evolved into accepting a 10-second fan video.
- The final idea was to transform the uploaded video into a FIFA-style stadium jumbotron experience.
- Used HTML5 Canvas to render the video onto a virtual jumbotron with a realistic football stadium background.
- Focused on a simple UI, smooth rendering, and an immersive stadium experience.
Prize Categories
Best Use of Google AI
- Built the complete web application using Google AI Studio.
- Used Gemini CLI during development to speed up coding, debugging, and implementation.
- Used Google Omni to generate realistic football stadium video, including crowd animations and stadium ambience.
SOCIAL SHARE CARD GENERATOR