03 ──────
Sport Assets
Reusable 3D sport-ball background component (React Three Fiber + Rapier)
2026 · Open source · Reusable component
- React Three Fiber
- Rapier
- Three.js
- Next.js
- TypeScript
- 3D
- GLB
- Physics
Overview
Physics-based interactive background with instanced sport ball models (basketball, soccer, volleyball, pickleball, tennis). Uses @react-three/fiber, @react-three/drei, and @react-three/rapier. Publishable as a consumable package with configurable model base URL and accent color.
Goal & Motivation
Provide a drop-in, physics-driven hero background for sports-related sites and apps, with full-poly and low-poly GLB variants and optional CSS accent theming.
Corporate Relevance
3D in the browser and reusable component libraries are common in product marketing and dashboards. This demonstrates packaging a R3F + Rapier experience as a dependency, build tooling (tsup), and clear API design for model and styling overrides.