On a trip to London I thrifted a small paperback called Heads, Bodies & Legs, a 1946 booklet by Denis Wirth-Miller and Richard Chopping. Beautifully illustrated eccentric characters, each were cut into three strips, head, body, and legs. You flip through the strips to build new combinations. There is even a center spread where a character design crosses the fold without breaking the concept.

The cover of Heads, Bodies & Legs: a bearded man in a straw hat holding a sign with the title, surrounded by puffins, printed in teal, red and yellow.
A spread cut into three strips: two characters, each a head, a body and a pair of legs, one holding a doll on a string and one playing a flute.
Another spread of the same three strips, flipped to new combinations: a singer in a ruff and a bearded man in a fez, both over the same polka-dot bodies and checked legs.
The center spread: a moustached harlequin and a woman crowned with roses, both in patterned bodies that end in fish tails, swimming through a shoal that runs straight across the fold.
Heads, Bodies & Legs, 1946.

I quite enjoyed going back and forth to try out different combinations. Flipping the pages to unintentionally land on something fun was quite delightful.

I thought it would be a fun way to use AI to really sweat the details of animation. So I spent some time with Claude geeking out on the animations. I picked a Web font pairings as a use-case to make digital flipbooks. A header, a sub-header and a body have to work together, and starting from an accidental pairing seemed like an interesting way to use the flipbook concept. Flipping through a curated list of fonts, trying to capture the same serendipity.

Try it →

Quick demo of the tool

Getting the right feel

First prompt output was single rigid sheet with basic transform animation. It moved correctly, but it flet like metal sheet swivelling on a hinge.

A browser element can't bend, so I decided to cut the page into narrow strips, each turning at its own angle. It immediately solved the rigidity problem. It also helped simulate lighting and shadows more accurately.

Two open books at the same moment of a page turn, side by side with "vs" between them. On the left the turning page is one flat, rigid panel, its lines of print perfectly straight. On the right the same page is cut into 24 narrow strips outlined in blue, each at a slightly different angle, so the page curves and its lines of print bend with it.
A rigid sheet vs the same page cut into 24 strips

Fine tuning the timings with ephemeral UIs

Interactive panel for fine-tuning the page turn.

Once the shape was working, I had Claude build small throwaway control panels to get the timings and parameters right by hand: how far the edge runs ahead, when the spine overtakes it, how much the sheet sags. Having nunaced control over each parameter hepls you dial in the animations perfectly. Its a shame I got to know about Josh Puckett's dialKit a bit later. Will give it a try on future iterations to see if it saves time.

Being able to ask for ephemeral controls like this, and getting them in a couple of minutes, is what made the whole process fun. It also gave me far more control over the final output and reduced iterations.

A sheet of every frame a 60Hz display draws during one page turn, each labelled with its elapsed milliseconds and the angle of the sheet at both ends. The fore-edge lifts first and runs ahead; the root overtakes it at 133ms and the sheet falls root first; it lands at 353ms.
Page turn animation sprite sheet

As animations got complex, asking Claude to lay them out as sprite sheets with timestamps and transitions helped a ton. Frame drops and misalignments were easy to spot, and it gave me something specific to point at instead of unecessarily long rant about how it is not what i want.

Try it →

It was a fun experiment in optimizing for a feeling, and sweating the implementation details. More on how my process has shifted because of AI tools in Observations about AI-native design tools.