FancyUI
Saved GitHub Get started
Diagram — fibre-optic beam — preview

Diagram — fibre-optic beam

FancyUI FANCYUI

Light packets travel a glass fibre between two nodes and bloom on arrival.

#glow#ambient

Open docs

Use in FancyUI

Type
Interaction
Interaction
Ambient
Style
Glow
Code availability
Open source

Why it works

Packets with a white-hot head and a dispersing chromatic tail run along a curved fibre, then bloom where they land, so the diagram shows direction and flow rather than a static connection.

When to use it

Integration diagrams, data pipelines, agent wiring on a product page.

Things to watch

The container and both node refs must exist, so nothing draws during SSR or before mount. Reduced motion swaps in a still gradient path. A ResizeObserver recomputes the curve.

Implementation clues

  • SVG path between measured rects
  • curvature offsets the control point
  • dash-driven packets
  • duration derived from a seed