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 |

Por qué lo construí

Un doodle quieto funciona en un post, pero un movimiento pequeño hace que el lector mire dos veces. Rolling-boil agrega ese movimiento sin convertir el doodle en una animación pulida de producto. El nombre junta un hervor de cocina con el line boil de la animación dibujada a mano.

Lo pido con frases como “anima el doodle”, “que se mueva” o “dale vida”. La entrada es el SVG del dibujo que hizo Doodle.

Un movimiento con una idea

El modelo encuentra el momento del dibujo y mueve la parte que lo cuenta. Una taza que echa vapor dice “el café está caliente”. Para un personaje cansado con una taza, el vapor fluye y el personaje parpadea, mientras el resto queda quieto.

• Grupos: cada parte que se mueve va en un <g> con data-motion y sus atributos, como data-amount y data-period.
• Partículas: una gota de sudor o una miga se aleja de su origen en 3 poses. Una partícula que no se mueve no se lee como partícula.
• Tamaño: una parte que se mueve mide al menos 2 por ciento del ancho del viewBox. Una parte más pequeña no se ve en el GIF.

El script de movimiento

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

El script entinta el dibujo con la tinta de Doodle y agrega el line boil. Escribe un SVG animado con CSS, renderiza cada cuadro con Chrome headless y une los cuadros en un GIF en bucle con ffmpeg. Una corrida tarda de 30 a 60 segundos.

También escribe una hoja con 4 cuadros del bucle. El modelo la mira y responde un chequeo de gusto, por ejemplo “¿el movimiento principal ayuda a la idea?”.

Con --draw, la pluma dibuja el doodle línea por línea. Con --no-boil, las líneas quedan quietas.

Uso y límites

Substack no reproduce un SVG animado, así que el GIF va en el post y el SVG va en una página web. El GIF mide 800 píxeles de ancho por defecto.

Si pasa de 5 MB, el modelo corre el script otra vez a 600 píxeles. El límite de Substack para un GIF no está verificado.

Afilé esta skill con Sharpener después de una sesión real de dibujo.