The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
World Cup Constellation — 96 Years of Football History in 3D Space
An immersive, interactive 3D data visualization of every FIFA Men's World Cup from 1930 to 2026.
What it is:
Every tournament is a planet. Every match is a star. You fly through a navigable galaxy of 23 tournaments and 900+ matches — group stages cluster into colored constellations, knockout rounds unfold outward in depth, and the Final burns at the centre like a sun.
What makes it different:
Not a table, not a chart — a spatial experience you physically navigate
Each of the 23 World Cups occupies its own region of 3D space
Matches are color-coded by group, sized by importance, and carry live score data
2026 World Cup is updated in real time — completed matches show results, upcoming ones show venues and dates
Cinematic entry gate, football-shaped orbs, xG data, drama scoring — every detail considered
Tech stack:
React · Three.js (React Three Fiber) · TanStack Start · Zustand · TypeScript · Vite
What it demonstrates:
Ability to translate complex historical data into a spatial, emotional experience
Advanced 3D rendering and camera choreography in the browser
Algorithmic data compression (compact match builders — 60% token reduction)
Real-time data integration alongside historical records
Click the link to see the action
https://fifauniverse.lovable.app/
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
3D Key animation exploration for Ayvapay
So clean. That key motion has real weight to it, reads premium without trying too hard. Killer exploration. 🔥
Just shipped my new studio website and I'd love this community's honest feedback.
Built entirely from scratch, no page builders.
Tech stack:
- Next.js 15 (App Router) + React 19 + TypeScript
- Three.js / React Three Fiber + custom GLSL shaders for the 3D hero scenes
- Motion for animations, Lenis for smooth scroll
- Tailwind CSS v4, fully responsive, bilingual (IT/EN)
The idea is a monochrome, motion-led design where every page has its own WebGL hero and custom micro-interactions, chasing that "wow" feel without sacrificing performance.
Live at nextwebterni.it
What do you think? I'm especially curious about the UX and the animations. Any honest critique is welcome!
Just submitted my entry to #OmmaBuildathon ☕🇪🇹
"Bunna — Where Coffee Was Born"
An immersive 5-scene 3D web experience celebrating Ethiopia's ancient coffee ceremony — built entirely on Omma's free trial.
What's inside:
🌿 Scene 1 — Hero: Rotating coffee beans, gold lighting
🌄 Scene 2 — The Farm: Ethiopian highlands, hover to discover 850 AD origins
🔥 Scene 3 — The Roasting: Fire particles, crackling sound
☕ Scene 4 — The Ceremony: Click the Jebena to pour. Abol. Tona. Baraka.
✨ Scene 5 — The Blessing: "Coffee brings us together. Ethiopia gave it to the world."
Built with:
→ @omma_build Canvas + Chat
→ Real 3D GLB assets (jebena, coffee beans, cups, plant)
→ Procedural Web Audio API for Ethiopian ambient music
→ Three.js particle systems for fire, steam, incense & pollen
→ 100% free trial — zero paid credits
This is my culture. This is my story. Built in code. 🙏🇪🇹
#OmmaBuildathon #Spline #3DWeb #Ethiopia #WebExperience #CoffeeCeremony #Bunna
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?