An interactive web application showcasing hockey history and fan culture through modern web technologies and nostalgic retro-inspired design. Explore the rich history of hockey with 3D visualizations, interactive maps, and engaging mini-games.
Click above to watch a comprehensive demonstration of all features.
- Interactive 3D model of the Stanley Cup built with Three.js
- Click through championship eras and teams
- Animated camera transitions and auto-rotation
- Detailed team information for each championship ring
- Visualize hockey leagues around the world using Leaflet
- Heatmaps showing fan density and team locations
- Custom GeoJSON league boundaries
- Toggle between different league types and layers
- Hidden Easter egg activated by Konami Code
- Physics-based puck collisions and movement
- Timer-based score challenge
- High score stored in
localStorage
- 80s/90s arcade aesthetic
- Pixelated borders, bold shadows, neon gradients
- Responsive design across devices
| Category | Technology |
|---|---|
| Frontend | React 18 |
| 3D Graphics | Three.js + React Three Fiber |
| Maps | Leaflet w/ custom GeoJSON |
| Styling | Tailwind CSS |
| Animation | GSAP |
| Language | TypeScript |
| Routing | React Router |
- Node.js (v14 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/sprinklepancake/pucktales.git
cd pucktales# Install frontend dependencies
cd client
npm install# Start development server
npm start➡️ Open your browser and navigate to:
http://localhost:3000
npm run buildpucktales/
├── client/ # React frontend
│ ├── public/ # Static assets
│ │ ├── sounds/ # Mini-game audio
│ │ └── textures/ # Images & textures
│ ├── src/
│ │ ├── components/ # Core components
│ │ │ ├── Map.js # Interactive map
│ │ │ ├── PuckGame.js # Mini-game logic
│ │ │ └── StanleyCup.js # 3D Cup visualization
│ │ ├── styles/ # Tailwind styles
│ │ └── GeoJson/ # Map data
│ └── package.json
├── src/ # Backend (if applicable)
│ ├── app.js # Express server
│ ├── routes/ # API endpoints
│ └── models/ # Data models
└── README.md
StanleyCup→ full 3D model & animationChampionshipBand→ clickable ring sectionsYearScrubber→ timeline navigationInfoPanel→ shows team details
- Toggle between layers (leagues, territories, heatmap)
- Team markers with details on click
- Triggered by Konami code: ↑↑↓↓←→←→BA
- Collision physics
- Score + high score save
- Mobile touch support
PuckTales blends modern web technology with retro nostalgia:
- Accessibility: hockey history made approachable & fun
- Interactivity: designed for exploration
- Performance: smooth animations and state management
- Nostalgia: pixel UI + old-school arcade feeling
| Challenge | Solution |
|---|---|
| 3D cup model complexity | Broke model into geometric primitives with custom lathe geometries |
| Limited historical data | Structured custom objects with fallback data |
| Mobile issues | Touch-friendly controls + collapsible UI |
| Performance bottlenecks | Lazy loading & optimized state management |
- Live hockey data via API integration
- More leagues & global expansion
- User authentication and personalization
- Hockey stick timeline visualization
- Player cards with detailed stats
- More 3D animations + gamification
This project is open source under the MIT License.
Hassan Najjar
- GitHub: @sprinklepancake
- Project Demo: YouTube video (linked at top)
🤝 Contributions, issues, and feature requests are welcome.
Feel free to open an issue or PR!
Built with passion for hockey history & modern web technology 🏒✨