Aisol Flow Map

Aisol Flow Map draws a small diagram: labelled nodes in a grid, and connecting lines between them.

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/

Steps, and the lines between