NBA Particles

An interactive visualization that renders NBA team data using 12,000 animated canvas particles. Select any of the 30 NBA teams to see their logo form from particles, then dive into live team statistics, full rosters, and individual player stats - all displayed as dynamic particle formations.

Features:

• 12,000 Animated Particles - Smooth physics-based particle system with morphing transitions between views
• All 30 NBA Teams - Grid view showing every team logo, click to explore
• Live Team Stats - Current season statistics pulled from NBA API
• Full Rosters - Browse complete team rosters with player details
• Player Stats - Individual player statistics across multiple pages
• Gravity Mode - Click team badges to scatter particles with gravity physics
• Responsive Design - Works on desktop and mobile devices

How It Works:

The app samples target positions from text, logos, and layouts, then animates particles toward those positions using spring physics. Each view generates a new set of target points - whether it's a team logo, stat table, or player list - and particles smoothly transition between formations.

Clicking on interactive regions (team logos, navigation arrows, player rows) triggers view changes. The gravity mode adds a fun physics playground where particles fall and bounce before reforming.

Technical Stack:

• React 19 with hooks and context for state management
• Canvas API for high-performance particle rendering
• Vite for fast development and optimized builds
• TypeScript throughout for type safety
• NBA API Proxy for fetching live statistics

Views:

Grid View

All 30 NBA teams displayed as a particle grid. Each team logo is rendered using particles sampled from the actual team logo image.

Team Home

Large team logo formation with navigation to stats and roster views. Click the logo to trigger gravity mode.

Stats View

Team statistics displayed as particle-rendered text tables. Paginated across multiple screens covering offensive, defensive, and advanced stats.

Players View

Team roster with player names, numbers, and positions. Click any player row to see their individual stats.

Player Stats View

Individual player statistics including points, rebounds, assists, and shooting percentages across multiple pages.

Running Locally:

git clone https://github.com/Tecttano/NBA-Particles.git
cd NBA-Particles
npm install
npm run dev

Performance Notes:

Rendering 12,000 particles at 60fps requires careful optimization. The particle system uses:

• Typed arrays for position/velocity data
• Batched canvas draw calls
• RequestAnimationFrame for smooth animation
• Efficient spatial sampling algorithms for target generation

The result is smooth particle animations even on mid-range hardware.