A film in a GitHub README

A GitHub profile README is Markdown with a little HTML. It can’t run scripts, load styles or embed other pages. I still wanted mine to tell my story, so it opens with a short pixel-art film. It is made with plain tools, and the code is in the profile repository.

The film

The film is drawn in code. Every scene is a function of time that paints a 320 by 136 pixel canvas, and one function draws any moment of the whole film:

seek(canvas, 12.5); // the frame at twelve and a half seconds

Because a frame depends only on its time, the same code plays live in a browser and renders frame by frame to video.

The people are sprites written as rows of letters. Each letter is a tone, not a colour: o is the dark edge of the hair, S is skin, C is the coat. One design serves everyone, and a palette turns it into me or into someone from my team. Each person has a front, a back and a side view, and the side view walks in four frames. The frame advances with the distance walked, not with time, so the feet never slide over the ground.

Scenes hand over to each other the way old handheld games did. The camera pushes on while I walk into the next scene, a circle closes on me and opens somewhere else, or an office door opens into the next room.

A headless browser renders the frames, and two tools encode them. img2webp makes an animated WebP for the README, which GitHub plays like a GIF, and ffmpeg makes an MP4 for everywhere else.

The cards

The cards for my projects are SVGs too. An SVG shown as an image can’t load fonts, so each card carries small subsets of Inter and JetBrains Mono inside it. A GitHub Action draws the cards again every morning, so the release versions on them stay current. A <picture> element picks the light or the dark card to match the visitor’s GitHub theme.