Color Before the Lines: an interactive watercolor in Rive

Color Before the Lines is my iPhone and iPad app that turns the coloring book around: you start from a real watercolor wash and draw the lines afterwards, finding the shapes hidden in the color. This Rive piece tells that idea in a few seconds. A watercolor blooms into the paper, then pen lines draw themselves over it and reveal the figure hidden in the wash: two fish, a bird with a sweeping wing, a snail.

Move or drag across the sheet to wet the paper and bring more pigment out around the pointer, tap for the next watercolor, and switch the lines off to see the color alone. The wet brush is five feathered drops that trail the pointer: a listener writes the pointer position into the view model, and each drop follows it through its own interpolator converter, which gives a lagging, watery trail with no code.

Everything runs in plain Rive, with no scripts and no shaders. The bloom is a soft mask: feathered organic pools grow with eased, staggered timing, and the real watercolor is screen-blended on top, so the pigment bleeds outward with soft edges while a paper grain is multiplied over the sheet. Each watercolor also carries an image mesh whose inner vertices settle during the bloom, so the pigment visibly flows into place.

The lines are hand-authored vector paths fitted to each watercolor, in the app's three pens: ink, a grey pencil and a white gel pen. One lineProgress value in the view model drives every trim path through a range mapper per pen, so the ink draws first, the pencil follows and the highlights land last, and the same value rewinds them when the lines are switched off. Parallel state machine layers run the scene cycle, the lines, the wet brush and a slow drift that keeps the washes breathing.

I built it with the Rive CLI and an AI coding agent, authoring RML from a small generator and tuning paths and timings by eye against browser renders. Calm, paper-like motion was the rule, with a calm mode that follows reduced motion. Try it: https://colorbeforethelines.com/rive