Rolling boil

| Motion | What moves | Default period | Use for |
|---|---|---|---|
| `sway` | Turns 3° to each side around the bottom of the part | 2.4 s | Plants, a figure that hesitates, a sign on a post |
| `bob` | Goes up 6 units and comes back | 1.2 s | A floating object, a happy jump |
| `breathe` | Grows 1.5 % taller from the feet | 2.4 s | A full character, a sleeping object |
| `pulse` | Grows 5 % from the center | 1.2 s | A heart, a notification dot, a mark that stays in place |
| `float` | Drifts in a small figure eight | 2.4 s | A cloud, a balloon, a thought |
| `wiggle` | Shakes in 4 small steps | 0.8 s | Nerves, a phone that rings, a box that is about to fall |
| `spin` | Turns a full circle | 2.4 s | A wheel, a fan, a loading circle |
| `flow` | Dashes travel along each line, from the start of the path to the end | 1.6 s | Steam, wind, water, the arrows of a diagram |
| `blink` | Shows the closed face for 0.2 s | 4.8 s | The eyes of the character |
| `swap` | Shows one pose at a time | 0.4 s per pose, so 1.2 s for 3 poses | Hand-drawn poses, such as an arm that waves, or falling crumbs |

Why I built it

A still doodle works in a post, but a small motion makes the reader look twice. Rolling-boil adds that motion without turning the doodle into a slick product animation. The name joins a kitchen boil and the line boil of hand-drawn animation.

I ask for it with phrases such as “animate my doodle”, “make it move”, or “dale vida”. The input is the drawing SVG from Doodle.

A motion with an idea

The model finds the moment in the drawing and moves the part that tells it. A mug that steams says “the coffee is hot”. For a tired character with a mug, the steam flows and the character blinks, while the rest stays still.

• Groups: each moving part goes in a <g> with data-motion and its attributes, such as data-amount and data-period.
• Particles: a sweat drop or a crumb moves away from its source in 3 poses. A particle that stays in place does not read as one.
• Size: a moving part is at least 2 percent of the viewBox width. A smaller part does not show in the GIF.

The motion script

node <skill-dir>/scripts/motion.mjs --preset <preset> <dir>/<slug>.anim.svg

The script inks the drawing with the doodle ink and adds the line boil. It writes an animated SVG with CSS, renders each frame with headless Chrome, and joins the frames into a looping GIF with ffmpeg. A run takes 30 to 60 seconds.

It also writes a frame sheet with 4 frames of the loop. The model looks at it and answers a taste check, such as “does the main motion help the idea?”.

With --draw, the pen draws the doodle line by line. With --no-boil, the lines stay still.

Use and limits

Substack does not play an animated SVG, so the GIF goes in the post and the SVG goes on a web page. The GIF is 800 pixels wide by default.

Above 5 MB, the model runs the script again at 600 pixels. The GIF limit of Substack is not verified.

I sharpened this skill with Sharpener after a real drawing session.