Slippi replays in the browser. This is the code base for slippilab.com.
Replay files contain rich data about every frame: positions, action states, inputs, and more. This lets us start playing from anywhere without resimulation or hesitation. Combined with some replay-focused controls like frame-by-frame, slowmo/fastforward, and short jumps (2s instead of 5s or 10s), we can offer an unmatched viewing experience.
Find replays within a folder quickly using a specific combination of characters, stage, Slippi connect code, Slippi display name, or in-game nametag.
Important moments in the selected replay are automatically detected and listed, so less time is needed to find specific situations when browsing.
Upload your replay and grab a quick link to share a match with anyone.
Without resimulating and/or using 3D models from the game, a lot of detailed effects and realism are not possible:
- dynamic clothing effects like dresses, capes, and hair
- footsnap and other dynamic deviations from .slp positions like throws ("attach thrower bone X to throwee bone Y")
- perspective camera (we use orthographic)
While large data sets do run fine after taking time to parse (tested with 5k replays), we can easily reach the limits of the machine's RAM space. We do some tricks to save space:
- parse files in batches of a few hundred files at a time and close them all before starting the next batch
- only parsing enough of each file to provide filtering support
- only deeply parsing the currently playing file
These are good for most features, but still have scaling limits and close the door slightly on some features like searching across all replays. A desktop app (or maybe some fancy web API/library) could avoid some of these limits by running a proper database of some kind.
The site is a Vite app primarily using SolidJS and Tailwind.
Local development:
npm run dev
Build site:
npm run build
The following projects and people are not associated with this project in any way, but served as references or key dependencies and are greatly appreciated.
-
Project Slippi by Fizzi and the entire Project Slippi team