Node Canvas

Node Canvas borrows the visual grammar of node-based editors — the dotted infinite canvas, cards with input and output ports, smooth bezier wires — and uses it to structure an entire page. It draws on audio patch bays, visual-effects compositors and modern automation tools. Cards become nodes, sections become stages of a flow, and the reader literally follows the wire down the page. Warm off-white canvas, one hot orange, colour-coded node headers. It should feel hands-on, technical and fun to explore.

Principles

• Every card is a node: give it ports, a header and a type.
• Connect related things with visible wires; let the page flow.
• Colour codes node types — triggers, actions, logic — consistently.
• Orange means 'run'; it's the only action colour.
• Show data inside nodes: field names, sample values, counts.

Motion

Nodes pop in at 94% scale one after another, then the wires between them draw along their bezier paths in 700ms. A small dot pulses along each wire every few seconds, showing data travelling between steps.

Do & don't