sisyphus-pixel
a 32×32 canvas of a man pushing a boulder. climbing loops four frames. resting holds a still pose.
colors
this site
sky matches the page
library default
the published palette
dusk
any keys you pass
states
climbing
four-frame push
resting
one still pose
speed
fps 1
one push takes four seconds
fps 4
one push takes one second
how this pixel animation was made
frames
The sprite was drawn in Piskel at 32×32. Four frames make the climb. One frame is the sitting pose used while resting.
c matrix
Piskel exported each frame as a C array: rows of color indexes, one cell per pixel. That matrix was the source for the frame data in the package.
row glyphs
Each row of the matrix became a 32-character string. A character names a part of the scene, so the frames stay readable without hex colors baked in.
- .sky
- #hill
- oboulder
- Oshade
- Hfigure
Resting pose. The rows above this block are sky.
colors
At paint time each glyph is replaced by a color. Pass only the keys you want to change. The rest stay on the library defaults. Switching state restarts the climb from the first frame.
package
The same frames ship two ways. createSisyphus draws on a canvas you already have. The React component creates the canvas, starts on mount, applies later prop changes, and stops on unmount.
import { createSisyphus } from "sisyphus-pixel";
const scene = createSisyphus(canvas, {
state: "climbing",
scale: 4,
fps: 1,
colors: { hill: "#8c52ff", figure: "#171717" },
});
scene.update({ state: "resting" });
scene.destroy();import { Sisyphus } from "sisyphus-pixel/react";
<Sisyphus
state="climbing"
scale={4}
fps={1}
colors={{ hill: "#8c52ff", figure: "#171717" }}
/>