A
Auralix UI

Tracing Beam

A beam that follows the path of an SVG as the user scrolls.

Preview

Badge

Lorem Ipsum Dolor Sit Amet

Sit duis est minim proident non nisi velit non consectetur. Esse adipisicing laboris consectetur enim ipsum reprehenderit eu deserunt.

Another Section

Ex irure dolore veniam

Ullamco ut sunt consectetur sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea velit id esse adipisicing deserunt amet dolore.

Final Section

Ullamco ut sunt consectetur sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea velit id esse adipisicing deserunt amet dolore.

Installation

bash
npx auralix-ui add tracing-beam

Usage

Basic Usage

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

<TracingBeam className="px-6">
  <div className="max-w-2xl mx-auto antialiased pt-4 relative">
    {/* Your content here */}
    <div className="mb-10">
      <h2>Title</h2>
      <p>Description...</p>
    </div>
  </div>
</TracingBeam>

Props

NameTypeDefaultDescription
childrenReactNode-Content to be traced.
classNamestring-Additional CSS classes.
AccordionCheckbox