Tracing Beam Scroll

A side navigation or progress bar where a glowing "beam" of light physically traces a curved SVG path downwards as the user scrolls, matching their vertical progression.

Live Demo

Navigation Node

Tracing Beam Scroll

As you scroll down the container, the vibrant cyan and indigo gradient beam physical traces your path down the guide rail on the left.

What It Is

A side navigation or progress bar where a glowing "beam" of light physically traces a curved SVG path downwards as the user scrolls, matching their vertical progression.

✓When to Use

Lengthy technical documentation
Story-driven landing pages (Timelines)

✕When NOT to Use

Short pages
Pages with no distinct structural sections

Configuration Tips

01Map scrollYProgress to an SVG path's stroke-dashoffset or to the top positioning of a glowing div element inside a relative track

You've Seen It In

Aceternity UINext.js Conf Pages

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Create a vertical timeline where scrolling maps directly to a glowing gradient beam traveling down a long SVG curve on the left side of the screen.

Code Example (Tailwind CSS)

export function TracingBeamProgressDemo() {}

Related Effects

Parallax Scroll

Background elements move at a different speed than foreground elements while scrolling, creating an illusion of 3D depth and immersion.

Sticky Heading

As the user scrolls down a list, the category header sticks to the top of the viewport until pushed out by the next category header.