Interactive tool
Codex Pet Spritesheet Player
The player crops real 192×208 cells from a Codex pet atlas and uses the state-specific frame timing defined by the V2 contract.
Preview real frames
This is not a CSS approximation. Each frame is read from the selected row and column of spritesheet.webp and drawn to a pixel-preserving canvas.
Supported states
- idle
- running-right
- running-left
- waving
- jumping
- failed
- waiting
- running
- review
Use the npm player
import { SpritePlayer } from "codexpetlab-player";
<SpritePlayer
src="/spritesheet.webp"
state="idle"
width={384}
/>