Sign in

Motions / @iamsuosi/watercolor-tale

A frame of a film in Watercolor Tale

Plays live in your browser, drawn by web code rather than a video, so it can use your computer's processor and graphics while it runs. The sound is on.

Watercolor Tale

An open picture book painted in transparent watercolour on cold-press paper.

Also 水彩绘本

Make a film in this look

Read https://motionhub.dev/llms.txt, then make a film about "<your topic>" in the motion https://motionhub.dev/m/@iamsuosi/watercolor-tale/

Put in your topic and paste it into any agent that can open a URL.

Or install the skill for every agent, then use /motionhub
npx skills add motionhub-dev/motions -g
Works in
RemotionHyperFramesand any engine, from MOTION.md
Version
1.0.4
Format
motion/0.3
Licence
CC-BY-4.0 for the look · MIT for the code
Looks
watercolorplayfullight
Package
176 KB, sha256:128ad7059f21

Use it

  1. Copy the prompt, put in your topic and paste it into your agent
    Read https://motionhub.dev/llms.txt, then make a film about "<your topic>" in the motion https://motionhub.dev/m/@iamsuosi/watercolor-tale/

    Any agent that can open a URL: it reads llms.txt, fetches the motion, checks it against its SHA-256 and makes your film in whatever engine it uses.

  2. Or install the motionhub skill once, for every agent on your computer
    npx skills add motionhub-dev/motions -g

    Claude Code, Codex and the other agents skills knows; without -g, for this project only.

  3. Then call it by name
    /motionhub make a film about <your topic> in @iamsuosi/watercolor-tale
  4. Made a look of your own? Share it the same way
    /motionhub share this project's look as a motion

    Your agent writes the motion under your GitHub name, runs the checks and opens the pull request when you say yes.

MOTION.md

Raw · GitHub

An open picture book painted in transparent watercolour: each spread is painted as it is read, wet colour spreading and drying with a hard edge, one colour glazed over another, a pencil line under the paint and a pencilled note beside it. The page turns between chapters.

Essence, and what it is not

  • An open book on a linen table: two pages of cold-press paper at a soft fold, the narration read on the table below like the book's text.
  • Every thing is a transparent wash: it spreads wet from the brush, pools at its bottom, granulates and dries with a thin darker edge. White is the paper, never paint.
  • Colours mix on the page by glazing (blue over yellow reads green), and a glaze can be lifted off again.
  • A pencil underdrawing shows under the paint; short notes are pencilled beside what they name.
  • A new idea is a new spread: the right page lifts and turns over.

Not ink-scroll (colour, not ink tones; hard dried edges, not feathered ink; a book, not a scroll), not lab-notebook (no grid or ruled diagram; pencil only underdraws and notes), not depth-stage (no silhouettes, no camera), not flat vector (no solid fills, no outlines on top).

Ground and material

The picture book (react/parts/book.tsx) is the ground of every scene. Its paper is a lit relief of cold-press tooth, shaded into the fold; paint is trimmed at the page edges, so a sky may run off the page. parts/wash.tsx is the paint: one SVG filter builds the wandering edge, the drying line and rim, granulation, uneven wet-in-wet, the pooled bottom, blooms and lifts, multiplied onto the paper. parts/pencil.tsx is graphite on the tooth.

Colour roles

  • panel the paper, the only white; panel2 paper in shade; bg the linen; border the page block.
  • text printed ink: title and read-aloud text only. muted graphite: underdrawing, arrows, notes.
  • Pigments, mixed by glazing: warn lemon yellow, data cerulean, good sap green, op burnt sienna, grad cadmium red (the story's warm accent), bad alizarin. Five or fewer on a spread; skies and hills at 0.3–0.6 strength, the subject at 0.7–0.9.
  • Never a pigment on a word, a computer gradient, or black paint.

Type and captions

The title and the text are Fraunces with its soft, wonky storybook shapes (SOFT 100), 88 to 130 px for a title, set in text. Notes are Patrick Hand in graphite, 40 to 60 px, written left to right. Chinese uses LXGW WenKai for both. The caption is the book's text read aloud: Fraunces 46 px, weight 500, printed ink on the linen below the book, no box and no shadow, because the table is calm and the paint never reaches it.

Motion

Things are painted, never slid or scaled in: a wash spreads in 1.2 to 1.8 s (ease-out) and dries over the same time, its edge hardening and its colour paling as wet paint does. A glaze sweeps across in 1.4 to 1.8 s (ease-in-out); a lift clears from one point. Pencil draws at a hand's pace (about 1 s a line); notes are written letter by letter. The page curls over in 1.2 to 1.4 s, outer edge first, after the spread's last line. While wet, paint shines and a bead of pigment rides the front. A falling thing swings gently; nothing bounces, spins or flashes.

Composition and framing

The frame is the open book: pages from x 44 to 1876, y 24 to 862, the fold at x 960, the caption below. A spread holds one picture: a subject on one page with its context on the other, or a landscape across both. Nothing that must be read, and no face, sits on the fold. A third or more of the paper stays unpainted. Notes sit in the paper beside what they name, never on dark paint. The page turns between ideas; the camera never moves. A lesson's board is the swatch card, a global part above the book that outlives the turns.

Sound

Optional: a page turning, a brush, a pencil; at most a soft celesta under the voice.

Components

  • compare — Glaze (react/parts/glaze.tsx): A second transparent colour swept over a dried wash so the two mix on the paper, or lifted off to show the colour beneath. Fits: a thing that changes: green to gold, day to dusk; what was hidden underneath
  • ground — Picture book (react/parts/book.tsx): An open picture book on a linen table, two pages of cold-press paper at a soft fold; the right page turns to the next spread. Fits: every scene: one spread per idea; a page turn between chapters or steps
  • link — Pencil line (react/parts/pencil.tsx): A soft graphite line drawn as it is named: the underdrawing a wash is laid over, or an arrow between two things. Fits: an outline before the paint; the sun's path; light falling on a leaf
  • mark — Wash (react/parts/wash.tsx): A shape in transparent watercolour: wet colour spreads from the brush, pools at the bottom and dries with a hard, darker edge. Fits: anything painted: a tree, a hill, the sun, a house; a pale sky behind them
  • steps — Swatch card (react/parts/swatches.tsx): A swatch card on the book, a brushed patch named in pencil per stage; it stays through the page turns. Fits: the stages of a change; the ingredients of a thing; a summing-up
  • term — Pencilled note (react/parts/note.tsx): A few words pencilled by hand beside the picture, with a small curved arrow to what they name. Fits: the name of a part; a word the lesson teaches; a quiet aside
  • title — Storybook title (react/parts/title.tsx): The title in a soft, round serif over a stroke of wash, printed letter by letter, a pencilled line beneath. Fits: the cover; a chapter's first spread; the moral at the end
  • transition — Spatter (react/parts/spatter.tsx): A loaded brush flicked: drops fly on an arc, land and spread into small wet spots. Fits: many small things arriving at once: seeds, rain, the first red; a flourish

Native moves

  • The wash spreads and dries. Wet colour spreads from one touch of the brush, then its edge dries into a dark line. Fits content like: sunrise; a pond filling; a town on a map.
  • One colour glazed over another. A second colour swept over the first mixes with it; lifted off, it shows what was underneath. Fits content like: green to gold; day to dusk; ripening fruit.
  • Pencil first, paint after. The underdrawing is pencilled as the thing is named; the wash goes over it a beat later. Fits content like: a house before it is built; a creature before its colour; a route before the journey.
  • The page turns. The right page curls over to a fresh spread, light sliding across the paper.
  • The flick. A loaded brush is flicked and drops fly, land and spread. Fits content like: seeds scattering; first rain; the first red in a crown. Fits content like: the next season; the next day of a journey; the next step of a lesson.
  • The swatch card. A loose card on the book gains a brushed swatch, named in pencil, at each stage; it stays through the page turns and is laid open for the summing-up. Fits content like: the colours of a year; the ingredients of a recipe; the stages of a life cycle.

Avoid: pitfalls

  • A straight side inside the page reads as a cut-out → run skies and hills off the page; draw every visible edge as a curve.
  • A glaze shaped unlike its wash reads as a patch → glaze the same shape from a point with reach below 1.
  • A bloom under a glaze shows as a target ring → bloom only unglazed washes.
  • Graphite on mid-tone paint is lost in a compressed video → write notes on bare paper, at 40 px or more.

Freedom in each work

Each film decides its story, its spreads, which pigments, which moves and how it opens and ends; the book, the paint and the pencil stay. Three far-apart structures:

  • Season by season: one place per spread, a glaze changing it.
  • A gentle lesson: one subject large, notes pencilled as each part is named, the card filling.
  • A life told simply: three spreads, the last left half-painted.

Colours tokens.json

  • bg#C9C2B2
  • panel#F7F1E4
  • panel2#EFE6D3
  • border#A79F8E
  • text#33291F
  • muted#5F5A55
  • faint#D9D0BE
  • data#2A78B8
  • grad#D2452F
  • op#A0522D
  • good#6A9A3A
  • bad#B83A4B
  • warn#F0C419

Faces

sans
Fraunces, LXGW WenKai, serif
mono
JetBrains Mono, monospace
display
Patrick Hand, LXGW WenKai, cursive

Credits

Watercolor Tale is an original motion by SuoSi.

Fonts

  • Fraunces: SIL Open Font License 1.1
  • LXGW WenKai: SIL Open Font License 1.1
  • JetBrains Mono: SIL Open Font License 1.1
  • Patrick Hand: SIL Open Font License 1.1

More by SuoSi See all