Tracing Beam: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add tracing-beam.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Track gap (px)gutter

Spring stiffness (higher tracks closer)stiffness

500

Spring damping (higher settles faster)damping

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TracingBeam/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/tracing-beam.en.json

Or, 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.

Inside a nested scroll container

By default the component tracks window scroll. When it sits inside a fixed-height overflow-y-auto container, pass that container's ref to container. The beam's advance and its velocity trail both come from the container's scroll.

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
  <TracingBeam container={scrollerRef}>{/* content */}</TracingBeam>
</div>

When the window itself is the scroll container, container can be omitted and behavior is unchanged.

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
`container`	`RefObject<HTMLElement>`	—	Ref of the nested scroll container; omit to use the window as the scroll container
`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

Tracing Beam