design-infraReport a problem or share feedback← Catalog
Tracing Beam
curatedfreeaceternity/tracing-beam
A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.
$
npx shadcn@latest add @aceternity/tracing-beamnpm deps: motion
Our notes
Scroll-linked beam down the left of long content (changelogs, docs, case studies).- Source
- Aceternity UI
- Kind
- component
- Categories
- scroll-effect
- Use as
- wrapper — wraps your existing element
- Applies to
- blogfeatures
- Motion
- on scroll · subtle · motion + svg · medium cost · respects reduced motion
- Tags
- content, utility
- Licence
- Free for unlimited personal & commercial projects; no redistributing as a competing library. Pro/All-Access is a one-time purchase.
- Live demo
- ui.aceternity.com
- Docs
- ui.aceternity.com
Similar
Compare all 4 →- Features · Levels (scroll-spy)oc/feature-levels♥ Free recreation of the Aceternity multi-level features block Owen loves — default pick for feature walkthroughs on landing pages.
- Feature Sticky Sectioncult-ui/feature-sticky-sectionSticky section with controllable panels and scroll behavior
- Sticky Scroll Revealaceternity/sticky-scroll-revealSticky visual + scrolling text sections for feature walkthroughs.