Visualize 5-1 and 6-2 systems with animated court diagrams,
player movements, and phase breakdowns.
Free. Open-source. Mobile-friendly.
Try it live | Report a Bug | Support Development
R1 Receive phase — setter penetration highlighted with zone overlay, movement arrows, and player info panel
VBall Rotations helps players, coaches, and fans understand volleyball rotation systems through interactive court visualizations. Instead of static diagrams, you get animated transitions between phases, clickable player tokens with role-specific info, and the ability to customize your own team lineup.
Transition phase — movement arrows show where players shift from receive positions |
Mobile — full court with compact controls |
Click any player or filter by position to see their zone of responsibility, movement arrows, and coaching tips. Each rotation and phase has specific positional data.
OH filter active — outside attack and right-side hit zones with positional tips in the sidebar
Tap any player token to see their role, zone, row assignment, coaching tips, and where they move next. Available in every rotation and phase.
Mobile player info — zone, row, tips, and next movement
Searchable reference for volleyball terms, court legend, rotation systems, and all 5-1 variants explained.
Customize player names, jersey numbers, and roles. Switch between 5-1 and 6-2 systems, choose rotation variants (Standard, Spread, Slide-Heavy, Reverse), toggle libero, and adjust display preferences.
Rotation Systems
- 5-1 System with 4 variants: Standard, Spread, Slide-Heavy, Reverse
- 6-2 System with full rotation support
- All 6 rotations with 3 phases each (Serve, Receive, Transition)
- Overlap-legal serve positions
Interactive Court
- SVG court with animated player tokens
- Movement arrows and ghost trails between phases
- Zone overlays showing area of responsibility
- Role-based position filtering
Learning Tools
- Clickable player tokens with role-specific tips
- Searchable volleyball glossary
- Contextual help popovers
- Learn mode with phase descriptions
Sharing & Customization
- Shareable URLs with full team config (QR code)
- Editable player names, numbers, roles
- Multiple display modes (jersey, role abbreviation, name)
- Court flip, reduce motion, libero toggle
Mobile-First
- Responsive design with dedicated mobile controls
- Swipe gestures for navigation
- Touch-friendly bottom sheet settings
- Safe area support
Keyboard Shortcuts
| Key | Action |
|---|---|
Arrow Left / Arrow Right |
Step backward / forward |
Space |
Play / Pause |
1 - 6 |
Jump to rotation |
Escape |
Close modal or clear focus |
- Node.js 18+
- npm
git clone https://github.com/MoeHameed/vball-rotations.git
cd vball-rotations
npm install
npm run devOpen http://localhost:3000.
npm run build
npm start| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 (strict mode) |
| Styling | Tailwind CSS 4 |
| Animation | Framer Motion 12 |
| Sharing | qrcode.react + lz-string |
src/
├── app/ # Next.js App Router
│ ├── page.tsx # Main application page
│ ├── layout.tsx # Root layout with metadata & SEO
│ └── globals.css # Tailwind + custom styles
├── components/
│ ├── compare/ # Side-by-side rotation comparison
│ ├── controls/ # Playback, rotation, phase controls
│ ├── court/ # Court SVG, player tokens, zones, arrows
│ ├── help/ # Glossary, help popovers, support modal
│ ├── info/ # Player info sheet, position tips
│ ├── onboarding/ # Welcome screen
│ ├── setup/ # Settings drawer, player cards
│ └── sharing/ # Share button + QR modal
├── data/
│ ├── rotations-5-1.ts # 5-1 rotation positions & zones
│ ├── rotations-5-1-*.ts # Spread, Slide, Reverse variants
│ ├── rotations-6-2.ts # 6-2 rotation positions & zones
│ ├── position-info.ts # Role-specific tips per rotation
│ └── variants.ts # Variant metadata
├── hooks/ # Custom React hooks
│ ├── useRotation.ts # Rotation state management
│ ├── useTeam.ts # Team/player state
│ ├── useAnimation.ts # Playback animation
│ ├── usePreferences.ts # User preferences (localStorage)
│ └── useUrlState.ts # URL sharing/persistence
└── lib/
├── rotationEngine.ts # Core engine: maps players to positions
├── constants.ts # Role colors, default players
├── courtMath.ts # Court coordinate conversions
└── types.ts # TypeScript interfaces
Contributions are welcome. If you find an inaccurate rotation position, a UI bug, or want to add a new feature:
- Fork the repo
- Create a feature branch (
git checkout -b fix/rotation-3-receive) - Make your changes
- Run
npm run buildto verify - Open a pull request
For rotation data changes, please verify positions against official volleyball overlap rules.
If you find this tool useful, consider supporting development:
Found a bug? Open an issue Questions? hello@mohammadhameed.dev
MIT — use it, fork it, learn from it.