Tracing Beam

An animated SVG beam that traces a path as the user scrolls through content. Inspired by Aceternity UI’s Tracing Beam . Perfect for timelines and long-form pages.

Installation

npx shadcn@latest add https://prismaui.com/components/tracing-beam.json

Import


import { TracingBeam } from '@/components/ui/tracing-beam';

Basic Usage

Wrap your page content with TracingBeam to add a scroll-tracking beam on the left side.


<TracingBeam>
  <article className='flex flex-col gap-8'>
    <div>
      <h2>Section One</h2>
      <p>Content goes here...</p>
    </div>
    <div>
      <h2>Section Two</h2>
      <p>More content...</p>
    </div>
    <div>
      <h2>Section Three</h2>
      <p>Even more content...</p>
    </div>
  </article>
</TracingBeam>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The page content rendered alongside the beam.
`className`	`string`	—	Additional CSS classes for the wrapper.