DEV Community

Cover image for FIFA Fan Screen
Anshul Negi
Anshul Negi

Posted on

FIFA Fan Screen

#devchallenge #weekendchallenge #gemini #vercel

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.

favicon fifa-fan-fest-jumbotron.vercel.app

Code

GitHub logo 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…
View on GitHub

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.

Top comments (0)