Tracing Beam
Vertical beam that traces scroll progress along the left edge of content.
Preview
Tracing Beam
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Long-form content pages, blog articles, and documentation.
Why this component matters
Motion with meaning. The tracing beam provides scroll context without a traditional progress bar.
Usage guidance
Use alongside long-form text content. The beam should trace the full height of the content area. Purple gradient from IO-UI palette.
Installation
bash
npx shadcn@latest add @aceternity/tracing-beamUsage
example.tsxtsx
import { TracingBeam } from "@/components/ui/tracing-beam";
export default function Example() {
return (
<TracingBeam>
{/* Your content here */}
</TracingBeam>
);
}Source
tracing-beam.tsx
components/ui/tracing-beam.tsx