Tifo Forge: Turning Football Passion Into a Stadium Tifo

This is a submission for Weekend Challenge: Passion Edition.

During the World Cup, millions of people can watch the same match.

But every stadium tries to say something different before kickoff.

Sometimes it is belief. Sometimes defiance. Sometimes memory. Sometimes unity.

I follow football closely, and some of the moments I remember most are not goals. They are the few seconds before kickoff when the camera pulls wide and an entire stand reveals one message at once.

That was the idea behind Tifo Forge.

It is an interactive experience that turns a team, a supporter emotion, and a symbol into an animated stadium tifo.

Not another match tracker. Not another football chatbot.

Tifo Forge turns supporter emotion into a stadium moment.

---

What I Built

Tifo Forge asks the user to make three choices:

1. A national team
2. A supporter emotion
3. A visual symbol

The emotions are simple on purpose:

• Believe
• Defy
• Unite
• Remember

The symbols include ideas such as lightning, a phoenix, wings, a heart, and dawn.

Once those choices are made, Gemini creates a structured design plan. The browser then turns that plan into an animated stadium display.

I deliberately avoided uploads, accounts, and long setup screens. I wanted someone to open the page and reach the reveal in under a minute.

Three choices are enough to raise the stand.

The final result can be replayed, reset, or saved as an SVG poster.

---

Demo

Try Tifo Forge:

https://tifo-forge.vercel.app/

I kept thinking about those few seconds before kickoff when everyone in the stadium knows something is about to happen, but nobody has seen the full picture yet.

That became the interaction:

Choose the team
      ↓
Choose the feeling
      ↓
Choose the symbol
      ↓
Raise the tifo

When the user clicks Raise the Tifo, the stadium darkens.

Rows of cards flip into place. The pattern spreads across the curved stand. The central symbol appears, and the chant locks into position.

The user is not asking for a random poster.

They are deciding what the stand believes, how it moves, and what it raises.

One feeling. One stand. One voice.

Japan · Unite · Dawn — the selected inputs, Gemini direction, and completed stand in one view.

---

One Real Example: Spain, Defy, Lightning

The easiest way to explain the system is with one real generation.

The user chooses:

Team: Spain
Emotion: Defy
Symbol: Lightning

Gemini returned:

{
  "slogan": "SHOCK THE WORLD",
  "layout": "radiating-burst",
  "animation": "stadium-pulse",
  "energy": 95,
  "designReason": "A radiating burst of electric energy mimics a lightning strike, galvanizing the crowd to defy all doubts and roar as one."
}

Each value changes something visible:

• slogan becomes the chant
• layout controls the mosaic geometry
• animation controls how the reveal moves
• energy controls the visual intensity

For this result, radiating-burst maps to a center-weighted SVG card formation, while stadium-pulse staggers the timing across the stand.

Gemini selects from a controlled set of supported layouts and animations, so every plan maps to a renderer path that already exists and has been tested.

The model chooses the direction.

The renderer handles the geometry.

Spain · Defy · Lightning — Gemini selected the message, formation, motion, and intensity; the procedural renderer executed the final stand.

---

Code

The full source is available here:

https://github.com/mneang/tifo-forge

The repository includes the Gemini API route, structured-output validation, procedural SVG renderer, animation system, accessibility behavior, replay and export controls, and the quota-resilient fallback flow.

---

How I Built It

How Gemini Works Inside Tifo Forge

I did not want Gemini writing HTML, CSS, or SVG.

That is too unpredictable for an experience where the reveal has to stay clean.

Instead, I wanted Gemini making creative decisions while the application handled everything deterministic.

Gemini connects:

Team identity
+
Supporter emotion
+
Visual symbol

and turns them into:

Message
+
Formation
+
Motion
+
Intensity

The response comes back as constrained JSON.

That output is validated with Zod, normalized, and then passed into the procedural renderer.

Supporter selections
        ↓
Gemini creative direction
        ↓
Structured-output validation
        ↓
Procedural SVG renderer
        ↓
Animated stadium reveal

This split kept the project manageable:

• Gemini interprets the inputs
• validation keeps the response usable
• the renderer controls the final experience

Without Gemini, the project would become a fixed rules engine with much less variation.

Without the renderer, the visual output would be much harder to control.

I kept Gemini's job narrow: turn three choices into a design plan the application could actually use.

---

The Tifo Direction Framework

I used four dimensions to keep each result focused.

1. Message

Can thousands of supporters read and repeat it quickly?

The chant has to be short, emotional, and suitable for a large banner.

2. Formation

Does the layout communicate the feeling before the explanation is read?

A radiating burst feels different from a split banner or a diagonal rise.

3. Tempo

How should the stand reveal itself?

A united design may build row by row. A defiant design may strike outward or sweep diagonally.

4. Intensity

How much visual energy fits the chosen feeling?

Remember should not move like Defy. Believe should not always feel like Unite.

Having these four dimensions also kept me honest while building. Every layout and animation had to answer one question:

Does this actually communicate the chosen emotion?

---

Technical Execution

Tifo Forge was built with:

• Next.js and TypeScript
• Google Gemini API
• Zod structured-output validation
• Motion for React
• Procedural SVG rendering

I added visible keyboard focus, reduced-motion behavior, replay, reset, and SVG download so the experience works beyond one ideal desktop demo.

Each team uses a curated palette inspired by its current football identity, while avoiding historical or political references that could distract from the experience.

I kept the scope narrow on purpose.

The project makes one promise and tries to deliver it well.

I would rather make one interaction feel finished than ship five half-built modes.

---

Reliability by Design

Tifo Forge is built to stay usable even when the Gemini free-tier quota is temporarily reached.

The system:

• tries Gemini first
• validates every structured response
• caches successful Gemini plans
• falls back to a deterministic local design plan when needed
• labels the source clearly in the interface

That way, a temporary API limit does not turn into a broken demo.

I also constrained the renderer to a tested set of layouts and animations. Gemini still makes the creative decisions, but every result maps to a rendering path the application can handle cleanly.

The tradeoff is less arbitrary visual freedom in exchange for a more reliable experience.

---

Prize Categories

Best Use of Google AI

Gemini is the creative-direction layer at the center of Tifo Forge. It translates the selected team, emotion, and symbol into the message, formation, motion, intensity, and design rationale that control the final reveal.

---

Final Takeaway

A tifo is never just an image.

It is thousands of people agreeing to feel the same thing at the same time.

Tifo Forge gives that feeling a message, a formation, and a moment to rise.

What should 50,000 supporters feel together?

That is the question behind the project.

---

Independent fan project. Not affiliated with or endorsed by FIFA.