FlowField / Blog
Inside FlowField

A website you move through, not just down.

Why we built FlowField as a connected canvas, and the decisions that keep it a website people can actually use.

By FlowField3 min read
THIS WEBSITE, SEEN FROM ABOVETHE OPENINGIdeas.In flow.YOU ARE HERETHE STUDIOOur thinking.SHOWCASEThe work.Let’s talkSCROLL FOLLOWS A STORY. PAGES BRANCH OUT.
The canvas holds the content. A reading route moves the viewport through it, while individual pages branch out into their own journeys.
01 / Inside FlowField

Let the website explain the obsession.

We could describe our interest in node-based editors with a paragraph and a screenshot. Instead, we wanted the website itself to demonstrate it. Text, product illustrations, and calls to action live as nodes on a shared canvas. Connections lead from one part of the story to the next.

The appeal is partly organizational: separate ideas have their own space, while their relationships remain visible. It is also playful. Zooming out lets you see what is on the table; moving closer gives one idea room to become specific.

02 / Inside FlowField

Keep a familiar way to move.

An open canvas asks visitors to navigate before they know what they are looking for. That is a lot to ask of someone deciding whether to work with a studio. We wanted a reading order without giving up the spatial layout.

Scrolling moves the camera along a planned route. That route can turn left, right, or down, while the visitor keeps using an ordinary scroll gesture. The dots offer shortcuts to sections. The menu and contact action stay available, so exploring never becomes a prerequisite for getting in touch.

03 / Inside FlowField

Make movement explain a connection.

A line drawing across the canvas can help you anticipate where the next idea lives. It loses that purpose when its leading edge disappears off-screen or arrives long before the camera. The animation and the view need to tell the same story.

We use the connector’s progress to help frame those transitions. The aim is to keep the developing connection visible without locking the camera to every bend. Reading should feel continuous. The animation is there to orient people, not ask them to admire the navigation system.

04 / Inside FlowField

Let pages branch without losing their address.

A case study needs more room than a landing-page preview. On this site, opening one moves into another area of the canvas. Closing it returns to the previous journey. The page still has a URL, so someone can share it or arrive there directly.

That distinction matters. The spatial transition is a presentation choice; the content still needs the ordinary qualities of a website. Titles, readable text, real links, browser history, and direct access to a page all belong in the experience. The canvas should not take them away.

Follow a branch into the showcase
05 / Inside FlowField

Know where to stop.

A website built with nodes does not need every feature of an editor. Adding a note, drawing an arbitrary connection, or rearranging a heading would be possible. But those actions would not help a visitor understand our work or decide whether to talk to us.

That is the same question we bring to product work: what does this interaction let someone accomplish? Our canvas is an opinionated way to tell a story. An operational editor would need a different set of choices. The underlying medium is flexible; its purpose should be specific.

A NAME FOR HOW WE TELL THE STORYNodetelling.CONNECTED CONTENT. A READABLE ROUTE.01 / THE IDEAStart with why.02 / THE PROOFMake it real.03 / NEXTLet’s talk.AN APPROACH BY FLOWFIELD
Nodetelling3 min read

Nodetelling: stories built with nodes.

Connected content, a guided canvas journey, and pages that branch into the story. We call it Nodetelling. Here’s what we mean.

Read article
All articles
Svelte Flow
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Let’s talk