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

npm

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

pnpm

pnpm dlx shadcn@latest add https://joaocarmassi.com/components/tracing-beam.json

yarn

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

bun

bunx --bun shadcn@latest add https://joaocarmassi.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.