How this website was made

Designing Badger

I made the first concepts with an AI image tool and picked a cream cable-knit cricket jumper, a tweed flat cap and round glasses. The first version looked more like a panda than a badger, so the next round fixed his face stripes and made his bat clearly a cricket bat. Then I wrote one fixed description of him to reuse everywhere, so he looks the same in every scene.

Making the footage

Each scene was made with an AI video tool. The method that worked was to make a widescreen start image first, check it, and only then animate it. My first clips came out square, small and with the reference picture flashing up in the first frames, which taught me to check the settings before spending credits.

Checking every frame

Before anything went on the site, I measured each clip frame by frame: how much changed between frames, whether the camera stayed still, and whether two clips joined without a jump. That's how I caught the problems:

• Badger grew a raccoon's tail halfway through one clip
• In the batting scene, the ball sat by his feet for half a second after the swing, so the edit speeds through that moment
• The closing scene came out in daylight, so it has an evening colour grade

Making it sharp

The clips were only 720p, which looks soft on a big screen. Every frame was upscaled to double the resolution with an AI upscaler, Real-ESRGAN, then compressed as AVIF images so the page stays as light as possible.

Making it scroll

The site never plays a video. Each scene is a sequence of still frames drawn on a canvas, and your scroll position decides which one shows. Scroll down and Badger walks forward; scroll back and he walks backwards. Phones get frames cropped to fit the screen, and anyone who has turned motion off gets still images instead.