Aisol Flow Map

Aisol Flow Map draws a small diagram: labelled nodes in a grid, and connecting lines between them. Use it for a course path, an admissions flow, a process with a branch in the middle.

Nodes are placed by grid cell — column and row, not pixels — and the connectors are drawn in the same grid coordinates. That is the whole trick: nothing is measured, so the diagram cannot drift when a font loads or a container resizes, and the Framer canvas stays still.

Flow reads left to right, top to bottom; each step leads to the next. There are no arrowheads by design — a stretched SVG marker distorts — so direction is carried by the order and by wording you control.

- Reduced motion is respected properly: when the visitor has motion turned off, the animation does not run and the observer is never attached.

- Nothing is measured. No getBoundingClientRect, no scroll listeners, no layout reads — so the Framer canvas stays still while you work.

- The static renderer is a separate, pure branch: no observers, no timers, no transitions. What you see on the canvas is the finished state.

What you control

• Nodes: key, label, note, grid column and row, tone (default / accent / optional), link

• Connections: from, to, dashed or solid, and which way the elbow turns

• Grid size, gap, radius, line width, line colour

• Draw-in animation with duration and stagger, or off

• Heading level, text size, five colours

• Bind a CMS collection through the node slots

• Map name for screen readers, the leads-to wording used on phones, and the empty-state text

On phones the lines are dropped and each node says where it leads in words — the connections survive the layout change instead of disappearing with the drawing. A connection pointing at a key that does not exist is skipped rather than drawn wrong, and screen readers get the relationships as a sentence.

More components at Aisol Studio → https://thistle-timing-694660.framer.app/