Skip to content

HuggingFans

HuggingFans reshapes fan engagement by allowing users to virtually "step into the locker room" with their favorite NFL athletes.

Code Video Cerebral Valley

Core trick

Combines a user's selfie with a roster player's photo in a generative video model to produce a shareable clip of them together.

Tags

visioncreative/music

Description

HuggingFans reshapes fan engagement by allowing users to virtually "step into the locker room" with their favorite NFL athletes. The application lets fans select their team (Patriots or Seahawks), browse real rosters, and upload a selfie. Using advanced generative models, it instantly creates a hyper-realistic video of the user interacting with their chosen player, delivering a personalized, shareable moment that bridges the gap between digital fandom and personal connection.
Mistobaan/2026-jan-31-hackathon-gemini-5r★ 00 forksTypeScriptCreated Jan 31, 2026 · last push Feb 1, 2026

README excerpt

# NFL Fan Experience App

An AI-powered application that generates cinematic videos of fans with their favorite NFL players using advanced image and video generation.

[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/entropysource/v0-nfl-fan-experience-app)
[![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/ut3mAQYu0Pd)

## Features

- **Team Selection**: Choose between Patriots and Seahawks with team-branded UI
- **Player Selection**: Pick 1-3 players from your favorite team
- **Selfie Upload**: Upload your photo to be included in the experience
- **AI Video Generation**: Create a cinematic video showing you celebrating with NFL players
- **Progress Tracking**: Real-time progress updates during generation
- **Session Recovery**: Resume interrupted generations from where you left off
- **Asset Persistence**: All generated content stored securely in Vercel Blob

## Technology Stack

- **Frontend**: Next.js 16, React 19, TypeScript, Tailwind CSS
- **AI Generation**:
  - fal.ai Flux Dev for composite images
  - fal.ai Kling 01 for video generation
- **Storage**: Vercel Blob for asset persistence
- **UI Components**: Radix UI primitives

## Setup Instructions

### Prerequisites

- Node.js 18+ installed
- npm or yarn package manager
- fal.ai API key ([Get one here](https://fal.ai/dashboard/keys))
- Vercel Blob storage token ([Create sto

Team