FIFA Fan Screen

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

⚽ 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.