Tracing Beam
A beam that advances along an SVG path with scrolling — well suited to long-form articles, timelines, and step-by-step walkthroughs.
A gradient beam extending vertically along a rail on the left, whose tip advances with scroll progress and is smoothed by a spring; scroll fast and the velocity pulls the tail out into a comet-like trail. Just pass your content in as children and the component measures the height to decide the path length.
npx shadcn@latest add https://webberui.com/r/tracing-beam.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<TracingBeam />
Installation
npx shadcn@latest add https://webberui.com/r/tracing-beam.jsonOr, once registries are configured in components.json, install it as @webberui/tracing-beam.
Usage
import { TracingBeam } from "@/components/ui/tracing-beam";
<TracingBeam>
<article className="prose">{/* your long-form content */}</article>
</TracingBeam>;The beam extends to the actual height of children. Wrap the content in a scrolling ancestor container and the beam advances as you scroll.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The content presented along the beam; the height is measured from it |
colors | [string, string, string] | ["#18CCFC", "#6344F5", "#AE48FF"] | The beam gradient's three colors (top to bottom) |
gutter | number | 40 | Horizontal spacing between the content and the rail on the left (px) |
stiffness | number | 500 | Spring stiffness for tracking the scroll; the higher, the more responsive |
damping | number | 90 | Spring damping for tracking the scroll; the higher, the steadier |
className | string | — | Forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, the beam presents its full gradient statically, with no pulsing and no scroll animation
- The beam rail is decorative only, marked
aria-hidden, so it does not interfere with screen readers announcing the content - The first render matches SSR; the height is only measured and scroll tracking only enabled after mount, which avoids a hydration gap