Simulate
01A 20 Hz simulation races six boats, then records four position updates per second
Layline starts with four positions per boat, every second. It fills the gaps. One clock keeps the scene and chart, the instruments and standings at the same moment.
This prototype runs a repeatable fleet simulation. Live tracker data, water current and longer races remain future work.
The render loop reuses working state. The water concentrates detail near the camera instead of drawing a dense grid everywhere.
Interactive race replay Loads as it approaches
Replay systems
Replay
Systems
A smooth curve uses each update's speed and direction. The method is cubic Hermite interpolation.
[ Read the source ]Choose chase, broadcast, tactical, freeform or a 2D chart. Every view follows the same replay time.
[ Read the source ]Seek any moment, step one update, change speed or compare against the raw track.
[ Read the source ]Review starts, upwind progress (VMG), target speed, maneuvers, speed loss and fleet position.
[ Read the source ]The analyst uses six race tools and one sailing glossary. Its answers link back to the replay.
[ Read the source ]Slow frames lower detail. The scene skips unchanged work and reports draw calls and triangle counts.
[ Read the source ]How it works
[01]UpdatesTo motion
The simulator creates sparse tracker-style data. Each step limits what the next step must guess, and replay stops at the final update.
Evaluate
02The path passes through every position and caps heading changes at 60 degrees per second
Render
03The page draws the fleet, water and course in 3D, with a synchronized 2D view
Verify
04Tests check repeatable races, exact recorded positions, bounded turns and final-position behavior
Build decisions
[02]Engineering notes
Replay clock
I kept replay time at the center so scrubbing recalculates the scene, chart, instruments and standings for the same moment.
Built in Layline
[ View the repo ]Implementation notes
- 01Time-series reconstruction, telemetry visualization, interpolation
- 02TypeScript architecture
- 03Three.js, React, cameras, timeline and playback UX
- 04Sports analytics, VMG, maneuver detection, fleet comparison
- 05Render-loop optimization, geometry reduction, draw-call control
- 06User-facing interaction design, React performance, mobile input
- 07RAG, tool calling, SSE streaming