components / sprite-scrubber
sprite-scrubber.
scrub through a sprite-sheet grid by dragging across it — pointer x maps to a frame index.
loading...
drag across to scrub — frame 01/12 · sweeps 0
installation
bunx @justin06lee/chrome@latest add sprite-scrubberprops
| name | type | default | description |
|---|---|---|---|
| src * | string | - | url or data uri of the sprite sheet grid. |
| frames * | number | - | total number of frames in the sheet. |
| cols * | number | - | number of columns in the grid. |
| rows * | number | - | number of rows in the grid. |
| edgeLeft | number | 0.22 | left edge zone as a fraction in [0,1]. bounds onEdge sweep detection only — frames always map across the full width. |
| edgeRight | number | 0.78 | right edge zone as a fraction in [0,1]. bounds onEdge sweep detection only — frames always map across the full width. |
| reverse | boolean | true | moving left plays forward. |
| aspectRatio | string | - | css aspect-ratio for the root (e.g. "1 / 1"). |
| mode | "pointer" | "pointer" | interaction mode. |
| onFrameChange | (frame: number) => void | - | fired when the displayed frame changes. |
| onEdge | (edge: "left" | "right") => void | - | fired when the pointer reaches one edge zone after last visiting the opposite one — once per full sweep. |
| onLoad | () => void | - | fired once the sprite sheet image has loaded. |
| renderLoading | () => ReactNode | - | custom node rendered while the sheet loads. defaults to a minimal "loading..." overlay; return null to disable. |
| className | string | - |