SplitFountainText

Options

first #c44400

css colour

The ink at the start of the duct. Split fountains are at their best with inks that make something worth seeing where they meet: two that mix to mud give a sheet with a dead band across the middle.

second #8a3b6b

css colour

The ink in the middle. Set it to the same value as one of its neighbours and you have a two-ink fountain, which is what most presses actually run.

third #1b6f8c

css colour

The ink at the far end.

angle 96

0 to 360 deg

Which way the duct runs across the sheet. A real fountain runs across the press, so the gradient is square to the sheet; a degree or two off square is the honest amount, and it stops the blend lining up with the lines of type.

blend 0.42

0.02 to 1, good: 0.25 to 0.6

How wide the mixing zone is. Narrow is a press just started, with the inks still separate; wide is one that has been running, with the colours walked well into each other. Both are real points in a run and they look quite different.

wobble 0.35

0 to 1

How uneven the blend is. At 0 it is a perfectly even ramp, which is to say a CSS gradient. The unevenness is the whole tell that ink was involved.

walk 0.12

0 to 0.5

How far the whole fountain walks over one period. On a press the inks creep along the duct as the run goes on, so the boundary moves and never comes back. Here it returns, because a loop has to; keep it small enough that it reads as creep rather than as a sweep.

seed 7

0 to 9999

Seed for the unevenness. The same seed gives the same sheet, so a recording and a live page match.

period 30

6 to 180 s

Seconds for one cycle of the walk. Long: this is the colour of the page, and the colour of a page should not be something you can watch changing.

What it needs

Category

Type, an effect

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.3 ms · 0 context

Pinned to

v0.14.0

• The gradient belongs to the sheet, not to the letters, and that is what makes it a split fountain rather than gradient text. One pass of ink across the whole forme: a word near the left is in one ink, a word near the right is in another, and the heading between them is caught in the blend
• That falls out of mounting it on the sheet. background-clip on a container clips its background to every piece of text inside, however deeply nested, so one gradient inks a whole page in register. Put the gradient on each element instead and every heading gets the same little rainbow
• It is the only text effect here that does not take the text apart. No spans, no splitting, no hidden label: the text is the text the browser already had, so it selects, wraps, translates, searches and reads exactly as before. Nothing else in this library can say that
• The blend is built from several stops per ink rather than one, so its boundary can be nudged. A duct is filled by hand and the rollers do not mix evenly, so the line where two inks meet is never straight; one stop per ink is a CSS gradient and not a press
• The stops are sorted before they are written. A CSS gradient quietly clamps any stop that falls before the one in front of it, which turns a wobble into a hard edge
• -webkit-text-fill-color is set as well as color. Without it WebKit paints the text in its own colour over the clipped background and the effect does nothing at all
• Pure in t: the whole gradient is arithmetic on the clock and a hash of the seed
• One string built and one style written per frame, and only when the string has changed. The cost is the repaint of the text, which is why this wants to be a sheet of headings rather than a page of body copy
• No elements are created and nothing is measured. The DOM is untouched