selector · ease-out

Architecture diagram connections

Technical architecture diagrams are the hardest thing to read on a landing page — everything arrives at once and the eye has nowhere to start. Animating only the connections fixes that: the service boxes are visible from the outset, and the wires draw in request order, so the reader traces the path a request actually takes rather than decoding a static graph.

The code

Connection lines between services draw in on scroll — Browser → API Gateway → Auth / Database / Cache. Service boxes and labels are always visible; only the wires animate.

Hero.tsx

<ScrollDraw
  easing="ease-out" speed={1.1} once
  selector=".ink"
>
  <svg>
    {/* Static: labeled service boxes */}
    <rect … /><text>🌐 Browser</text>
    <rect … /><text>API Gateway</text>
    {/* .ink lines draw the connections */}
    <line className="ink" {/* Browser → API */} />
    <line className="ink" {/* API → Auth */} strokeDasharray="4 3" />
    <line className="ink" {/* API → DB */}   strokeDasharray="4 3" />
    <line className="ink" {/* API → Cache */} strokeDasharray="4 3" />
  </svg>
</ScrollDraw>

Live — scroll it

Install

terminal

npm i svg-scroll-draw

MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →

Related examples

Flowchart that draws on scroll

Draw a flowchart step by step as the reader scrolls: boxes, then connectors, in sequence. Keeps the diagram readable before it animates. Copy-paste code.

Map route tracing on scroll

Trace a delivery route across a map as the page scrolls — the journey-line effect used on logistics and travel sites. No mapping library required.

← All examples