Flield

Flield generates against a palette directly, hue, saturation and lightness ranges included, so there is no upper bound on how many correct variations one palette can produce. Swap in a brand's color range, seed a batch, export the one that fits.

Set a motion preset and the same composition becomes a looping background. That turned into the quiet workhorse: a moving backdrop or a hover state that never needed an animator's time.

Density of controls was the standing problem. Forty of them sit across three tabs, and the canvas has to stay in view while any one moves.

A layer is more than a color and a density. It carries its own seed, its own palette window, its own flow texture and its own curl, so two layers on one canvas are two independent compositions sharing a frame.

The light theme was drawn, not inverted. The canvas is the one thing that does not change between them, because the artwork has to be judged against what it will sit on.

A lock is a small icon beside a field, a palette window looks like any other collapsed section, and a flow texture reads as one more select. Nothing on the screenshot says which four of the forty carry the ideas, so the panel is annotated.

The phone layout is not the desktop one stacked. The canvas takes the screen and the controls sit in a bar along the bottom edge, so randomize falls under the thumb already holding the device.

Changing a motion means watching the canvas, then changing it again, which on a phone is three taps each way. The pin takes two of them back, and what it does only exists between one frame and the next.

Several actions change state somewhere the user is not looking. Locking every field changes icons on tabs that may not be open, and picking a motion starts something that takes a second to become obvious. Both report back in the same place, a brief line above the canvas, so there is one feedback pattern to learn, not one per feature.

A generative tool has a cold start problem. Nothing on screen explains what a flow field is, and a first time visitor has no reason to guess which of forty controls to move first. A thirteen step tutorial opens itself on a first visit and walks through the ideas. The buttons come second, and the flow field slide draws the field itself and names the textures it can draw.

The output is design work, and the unit of it is a set rather than an image. Give the generator a brand's color range and what comes back is a campaign's worth of correct variations. A header, the five social cards under it, a backdrop for the landing page. Each different, all plainly the same family. The seed is a name you choose, so the same asset rebuilds a year later when the campaign needs one more.

Symmetry and tiling change what a composition is. Masks and density change how it sits on the page. Every picture below was drawn by the generator itself, on the seeds and palette the screenshots already use, so the diagram of how the tool works is made by the tool.

Motion adds a duration to the still and changes nothing else about it. The still is one frame of the cycle and the cycle returns to it, so phase runs nought to one and the last frame is the first. A background that loops cleanly sits behind a page with no cut to give it away, which is what makes it usable instead of decorative.

The writing around the tool is part of the work. A tool that makes something most people have no word for has to explain the thing before it can offer to make it. The pages that do the explaining are also the only ones a search engine has anything to index.

Four supporting pages carry that, and the shape is deliberately flat. Three answer a question someone actually types, answer it properly before mentioning the product, and link to the tool. The fourth is the guide, written for someone already using it. None is a funnel step: a reader who only wanted to know what a flow field is gets told, and leaves better off.

None of the four carries a picture of output. Every panel on them is drawn live by the same code the app runs, because a page that demonstrates the thing it defines beats one that describes it, and it costs nothing extra when the generator is already a set of plain functions.

Each follows from a decision already made, and none is a change of direction.

The generator is already plain functions with no dependency on the document until the final draw, so an interface for it is a decision about shape rather than a rewrite. State in a URL is right for handing someone one composition and every control it was built with, and the next step is holding a run of them together. Instrumenting the writing comes last, because the pages had to exist before there was anything to measure.