-
-
Home Page — The landing page introduces Hoopside and its vision for interactive basketball history
-
Era selectionEra Selection — Explore basketball eras and discover historical games through tracking data.
-
Game Selection — Browse historical games and choose a matchup to explore in 3D
-
Sideline CameraView — Follow player movement from a sideline perspective in the interactive 3D court. 90
-
Cinematic CameraView — Experience historical plays through an immersive cinematic view.
-
Baseline CameaView — Examine spacing, positioning, and movement from behind the basket
-
Visualizer — Replay real games in 3D using historical tracking data and player movement.
-
Camera Angles Available — Switch perspectives to study positioning, movement, spacing, and plays.
-
Analytics — Explore player movement, game events, and statistics to understand each possession
About the Project
Inspiration
Basketball history is usually preserved through videos, photographs, and statistics. But these formats only show us fragments of what happened. We wanted to preserve something deeper: the movement, positioning, and spatial relationships that made those moments possible.
Hoopside was inspired by a simple question: What if you could step inside a historical basketball game instead of just watching it?
What it does
Hoopside is an interactive 3D basketball archive built around historical player-tracking data. Users can browse seasons and games, enter a 3D recreation of a real game, move through it frame by frame, follow play-by-play events, inspect box scores, switch camera perspectives, and explore historical context.
Rather than watching a fixed replay, users control how they experience the game.
How we built it
Hoopside is built as a modern web application using Next.js, React, and TypeScript, with Three.js powering the interactive 3D court and player visualization.
Historical tracking data is transformed into spatial coordinates and synchronized with game events, allowing player movement to be rendered across time. The application combines the 3D scene with playback controls, game statistics, play-by-play information, analytics, and historical context.
We also built the experience around dynamic loading and client-side rendering so the 3D engine can run smoothly in the browser.
Challenges we ran into
The biggest challenge was turning raw tracking data into a smooth and understandable 3D experience.
We had to synchronize thousands of spatial data points with game time, interpolate player movement between frames, handle different camera perspectives, and keep the application responsive while rendering a full 3D scene.
We also had to design an interface that exposed a large amount of information without overwhelming the user.
Accomplishments that we're proud of
We are proud of turning data that normally exists as coordinates and statistics into something people can actually experience.
Hoopside isn't simply a visualization of basketball data. It lets users interact with that data spatially and temporally—moving through real games and exploring what happened from different perspectives.
The result is a completely different way to experience sports history.
What we learned
We learned that great data experiences aren't necessarily about showing more data. They're about giving users a better way to understand it.
Building Hoopside also taught us a lot about 3D rendering on the web, animation, spatial data, performance optimization, state management, and designing interfaces around complex datasets.
Most importantly, we learned how powerful it can be when data becomes an experience rather than a spreadsheet.
What's Next for Hoopside
We want to expand Hoopside into a larger interactive archive of basketball history with more games, seasons, players, and datasets.
Future versions could include deeper player comparisons, advanced spatial analytics, searchable historical moments, possession exploration, and additional ways to discover patterns hidden inside tracking data.
Our long-term vision is simple:
Don't just watch basketball history. Step inside it.
Built With
- css
- next.js
- react
- sportvu
- tailwind
- three.js
- tracking
- typescript
