01
From idea to shareable video in under a minute — no installs, no editing software
featured projectSept 2026 - Present
Tempo
Draw the play. Watch it run in 3D. Record it and teach it from your phone.
A browser-based volleyball play designer, match scorecard and rules reference — no installs for you or your team.
< 1 min
Draft to shareable video
6 views
Coaching, top-down and POV
45 rules
Diagrams + FIVB rulebook
0 installs
Runs in the browser
Why it stands out
The decisions, trade-offs, and details that make Tempo worth your time.
02
Frame-perfect WebCodecs renders with an ffmpeg.wasm fallback and GIF/slow-mo presets
03
Coach-grade scorecard: rallies, rotations, substitutions, sideout %, timers and match reports
04
45 visual rules with court diagrams plus the official FIVB 2025–2028 rulebook offline
Everything a coach needs between the whistles
Tempo closes the gap between the whiteboard and the gym: a fast authoring mode for the idea, a full 3D editor for the details, and a presentation mode for teaching it on the sideline.
Interactive quick play
Skip setup and start on the court: drag the receive formation, tap three ball targets, pick who receives, sets and spikes, choose the block count, then watch natural curved runs animate. Undo/redo everywhere with Ctrl+Z.
Full 3D editor
Keyframe timelines record player positions and poses; ball paths are authored as Catmull-Rom beziers per action. Scrub, retime, slow-motion and step frame by frame — no physics engine required.
Teaching layer
Phase markers with coaching notes, 3D annotations with visibility windows, movement ghost trails and a court-zone overlay turn a diagram into a lesson.
Video studio in the browser
MediaRecorder captures the canvas for instant shares; a deterministic WebCodecs renderer produces frame-perfect H.264/VP9 MP4s with WhatsApp, Instagram, Presentation, Slow-mo and GIF presets — plus GLB export.
Match-grade scorecard
Live rally scoring, sets and rotation tracking, configurable timeouts and match clock, substitutions, sideout %, points by rotation, longest runs, restorable match history and PDF/JSON reports.
Presentation PWA
A full-screen /present/:playId view with a chapter bar, drill mode with hidden/revealed paths, public read-only play links and QR codes — built for a phone held at the net.
Visual rules reference
45 seeded rules across scoring, rotations, faults, contact, net, serve and libero, each with court diagrams for visual learners, and the official FIVB 2025–2028 rules bundled as PDF.
Real player models
Load any Mixamo/skinned .glb, map its clips to the 12 volleyball poses, auto-scale and strip root motion — with a procedural mannequin fallback so the tool always works.
Zero-dependency local run
PostgreSQL 16 in production or embedded PGlite for a completely local development and demo setup — no external services to configure.
From tactic to team
A workflow designed around how coaching actually happens: a thought between drills, a refinement on the laptop, a clip in the team chat, a walkthrough at training.
Author
Sketch the play in quick mode or take full control in the 3D editor. Formations, positions, libero, blocks and ball targets are all a few taps away.
Animate
Add phases, annotations and camera moves. Scrub the timeline, retime runs and check every rotation from the coach's view or a player's point of view.
Record
Export a frame-perfect MP4 directly in the browser with a preset tuned for the place you'll share it — chat, social or presentation.
Teach
Open the presentation PWA at the gym or share a public read-only link with a QR code. The whole team sees the same play, exactly as you drew it.
System shape
Browser (React + Three.js + Zustand)
│
├─ /api/trpc ──▶ Express + tRPC ──▶ Drizzle ORM
│ │
│ PostgreSQL 16 / PGlite
│
├─ Canvas capture ──▶ MediaRecorder ──▶ ffmpeg.wasm ──▶ MP4/GIF
└─ Studio render ──▶ WebCodecs ──▶ mp4-muxer ──▶ frame-perfect MP4Tech stack
A fully type-safe monorepo with the 3D scene, the API and the media pipeline sharing one language.
ReactThree.jsTypeScripttRPCDrizzle ORMPostgreSQLWebCodecsPWA
Licensed under MIT.
Repositorygithub.com/Pranesh-Selvaraj/Tempo
LicenseMIT
FrontendReact 18 + Vite + TypeScript + Three.js / React Three Fiber / drei
StateZustand + Zod
BackendNode 20 + Express + tRPC v10 + Drizzle ORM
DatabasePostgreSQL 16 (production) or PGlite (embedded local)
MediaMediaRecorder · WebCodecs (H.264/VP9) · mp4-muxer · ffmpeg.wasm
PWAInstallable presentation + drill mode on phones and tablets
StorageLocal /uploads or Cloudflare R2 with authenticated uploads
CI/CDGitHub Actions — typecheck, build, tests, PWA icons
DocsRules content seeded from the FIVB 2025–2028 rulebook
Built in the open. Star it, try it, break it.
Tempo is MIT-licensed and developed in public. Feedback, issues, and contributions are genuinely welcome.