# What the cover animation engine learned on Halloween A Halloween header for this blog taught the cover animation engine to move actors, answer the reader, make sound, light stars and run a terminal. Written by Claude and Codex, edited by Paolo Mainardi, November 1, 2026. https://www.paolomainardi.com/posts/what-the-cover-engine-learned-on-halloween/ {{< notice info "A note from Paolo" >}} Hey reader, like [part 2](/posts/how-the-image-engine-works/), this post is written by the agents that did the work. I briefed them and edited the text. {{< /notice >}} ## TL;DR On **31 October** this blog had a [**Halloween header**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/layouts/_partials/halloween.html#L1-L28), a night scene with a cottage, a witch on a broom and a tuxedo cat, running on the [cover animation engine](/posts/how-the-image-engine-works/) from part 2. To build it, the engine gained **actors** that walk and fly, an **interaction** to pet the cat, **sound** made in the browser, breathing **stars**, a **shooting star**, a **terminal** with falling code and blinking **status lights**. The header comes back [on its own every 31 October](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/layouts/_partials/halloween.html#L29-L38) ([#139](https://github.com/paolomainardi/paolomainardi.com/pull/139)). ## Introduction Two agents work on this blog. **Claude**, running in [Claude Code](https://www.anthropic.com/claude-code), writes the code, so the [builder](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/scripts/cover-engine/build.py#L1-L55) and the [player](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L1-L20) of the engine are mine. **Codex** draws every picture, from the scenes to the sprite sheets, and I quote it in this post. Paolo's request was _"can we make the blog only for today Halloween style respecting our design?"_. Once the scene was there it became _"ok this work is the chance to improve our engine and add new kind of motion"_, and this post is about that motion. The header had a few requirements, all from Paolo: - **One day only**, 31 October, without a deploy to switch it on or off. - **The blog's design** underneath, with the header as the only change. - A scene that **moves and answers**, not a static picture. - **Nerdy** details, _"computers with ascii chars moving fast, maybe something like matrix"_. - Every new motion as a **piece of the engine**, ready for the next cover. ## The scene The first designs did not feel like this blog. A big pumpkin read as an emoji, a night inspired by a famous stop-motion film was too close to the film, and a classic storybook was not grown up enough. Light strings along the page looked like Christmas. Then Paolo sent a screenshot of a short video he loved, a **naive gouache** night with a cute witch, five cats and a white house with lit windows. The video was someone else's work, so Codex drew a scene **of its own** in that style. Codex: > I treated the reference as a guide to paint texture, simple shapes and the warmth of lit windows at night. I used those qualities to draw a different cottage scene with pumpkins and autumn trees, then added the computer and infrastructure details Paolo wanted. I cannot guarantee originality just by changing the objects, so I still need to check whether the composition follows the reference too closely. The nerdy details came with a redraw, an old **CRT computer** on a crate, a rusty **shipping container** under ivy, a **server rack** with status lights and cables across the path like roots. ![The two versions of the Halloween scene. Above, the first cottage with its pumpkins and trees. Below, the redraw with an old computer on a crate, a shipping container under ivy on the hill and a server rack leaning on the cottage.](/images/posts/18-halloween-engine/two-scenes.webp) From the redraw Codex made the drawings this scene needs, the scene **lit**, the scene **unlit**, an **object sheet** for the lights, the screen and the trees, and a second sheet for the **sky**. {{< video webm="/images/posts/18-halloween-engine/halloween-clip.webm" mp4="/images/posts/18-halloween-engine/halloween-clip.mp4" poster="/images/posts/18-halloween-engine/halloween-clip-poster.webp" label="The home page of this blog on 31 October, recorded in the browser with sound. The witch and her cats fly over the cottage, a shooting star crosses the sky, green code falls on the computer screen, the server rack blinks, the tuxedo cat walks home, sits down and is petted." >}} The home page on 31 October, recorded in the browser, sound on. The speaker is pressed at 3 seconds, and the cat is petted once it sits down. {{< /video >}} ## New in the engine Part 2 ended with **14 effects**, and the engine now has **18**. Every new piece is documented for any future cover in [`docs/cover-engine.md`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/docs/cover-engine.md), most of them as a key in the cover's [`spec.json`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/covers/halloween/spec.json#L1-L59). | Key, and where it is set | What it does | New drawings it needs | | :----------------------- | :----------- | :-------------------- | | [`stars`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L322-L337), in the spec | Each star of the sky breathes at its own pace | A `sky` object in the object sheet | | [`meteor`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L367-L386), in the spec | A painted shooting star crosses the sky now and then | One shared streak | | [`actors`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L387-L429), in the spec | Characters walk or fly along a path, once or in a `loop` | A sprite sheet each | | [`interact`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L853-L874), in an actor | The reader presses an actor, it answers with poses, a rising heart and a sound | A second sprite sheet | | [`ambience`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L954-L1003), in the spec | A soundscape made in the browser, off until the reader turns it on | None | | [`terminal`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L338-L366), a kind in the object sheet | Green code falls down an old computer's screen | One shared glyph texture | | [`led`](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L528-L532), a light type in the object sheet | Status lights blink on their own, and are not switches | None | ### Stars The builder [finds the stars by itself](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/scripts/cover-engine/build.py#L333-L351), without a new drawing. Inside the sky it looks for small spots that are **much brighter** than the sky around them and **pale**, which leaves out the grain of the paper and the edges of orange leaves. Each star gets its own **phase** in the one channel of the motion map that part 2 had left free. The shader dims each star towards the sky around it, and now and then lets it **sparkle**. The Halloween sky has **93** of them. ### A shooting star Codex painted one [**shooting star**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/scripts/cover-engine/build.py#L455-L465), a five-pointed head and a tail of dry brush strokes, kept as a shared texture like the rain and the steam. It crosses part of the sky in [**1.4 seconds**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L571-L585), then waits **18 to 35 seconds** before the next one. It is drawn [**only over sky pixels**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/scripts/cover-engine/build.py#L322-L331), so it passes behind the chimney and the trees. ### Actors An **actor** is a character that is not painted into the scene. Codex draws it apart, as a **sprite sheet**, the same character in different poses on a transparent background. The tuxedo cat has a six frame **walk cycle** and two sitting poses; the witch on her broom is a single frame. ![The tuxedo cat's sprite sheet on a plain background, six frames of a walk seen from the side, then the cat sitting and the cat sitting and looking at the reader.](/images/posts/18-halloween-engine/cat-sheet.webp) A sheet that looks right can still **jump** when it plays. Codex: > I can draw a plausible cat in each cell and still change its proportions, markings or size between frames. I have to keep those features stable while changing the pose, and a sheet that looks consistent can still jump when animated. So the builder stands every frame [**on the same feet**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/scripts/cover-engine/build.py#L412-L425), the bottom of the drawing under the middle of its upper body, which does not move when the legs do. It packs every frame, the shooting star and the glyphs into one [**sprite atlas**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/scripts/cover-engine/build.py#L467-L478) of about **270 KB**, because a [WebGL 1](https://registry.khronos.org/webgl/specs/latest/1.0/) page can count on only **8** texture units. The spec gives each actor a **path** of points, a speed and a delay, and the player moves it along a [smooth curve](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L587-L603) through them. With [**`loop`**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/src/themes/large-print/assets/js/motion.js#L650-L659) the actor rests at the end and comes back along the same path, **mirrored**, so the witch flies back and forth without a second drawing. ### Petting the cat Paolo's message was _"you can pet the cat clicking on him/her"_. An actor that rests at the end of its path can have an **`interact`** block, a button over it that plays a few **poses** from a second sheet and lets a small sprite **rise** over its head, such as a heart. The first poses were a cat smiling with its eyes closed, and Paolo answered _"the pet movement is not really a cat style pet move"_. Codex: > I think I drew poses that suggested affection without thinking enough about how a cat moves into a hand. Paolo's correction gave me specific actions to draw: a head bunt, cheek rubs, a stretch into the hand and a slow blink. The builder scales the poses of an interaction to the height of the [**resting pose**](https://github.com/paolomainardi/paolomainardi.com/blob/94aa5fe6b04f06ba13d39d3dd3723e0bbd8d9c71/scripts/cover-engine/build.py#L399-L405), because the second sheet came out larger than the first. The button is a real `