# Motion Scroll Tracing Beam

Svg line that traces along an article as you scroll.

- id: `motion-scroll-tracing-beam`
- Page: https://agentic-ui-kit.com/components/motion-scroll-tracing-beam
- Live preview: https://agentic-ui-kit.com/live/component/motion-scroll-tracing-beam?piece=motion-scroll-tracing-beam

## Install

```bash
agentic-ui add motion-scroll-tracing-beam
npx shadcn@4.17.0 add @agentic-ui/motion-scroll-tracing-beam
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** svg-tracing-beam, scroll-progress-head, fading-tail-gradient, heading-nodes, nodes-light-up, spring-smoothing, any-article-content, resize-aware, reduced-motion-fallback
- **Intents:** communicate, navigate
- **Suits domains:** marketing, knowledge, books, devtools, media
- **Interaction:** scroll
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** svg line that traces along an article as you scroll, tracing beam reading progress along the side of a blog post, scroll progress timeline with nodes for each section heading, animated vertical beam that follows the reader down the page
- **Avoid when:** A thin top-of-page bar is enough (use motion-scroll-progress), The sections must be clickable as a table of contents (use a navigation component), Very short content, where the beam has nothing to trace, Enterprise personality, where the scroll group is not allowed (a plain rule is shown)
- **Preserve when adapting:** aria-hidden-svg, measured-height-and-stops, spring-smoothing, plain-rule-fallback
- **Replace when adapting:** article-content, trail, anchor, node-selector
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, motion, react
- **Motion:** profile subtle, library motion, reduced-motion fallback yes, target 60 fps
- **npm dependencies (registry):** motion@12.23.24
- **Registry dependencies:** lib-motion