This is a submission for
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:
sloganbecomes the chant
layoutcontrols the mosaic geometry
animationcontrols how the reveal moves
energycontrols 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.
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.
SOCIAL SHARE CARD GENERATOR