Tracing Beam
Gradient line that draws itself down long-form content.
- 0.8 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
The beam draws as you read.
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/tracing-beam.jsonAdds components/velora/tracing-beam.tsx, installs motion and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
className | string | — |
Accessibility
- Reduced motion
- The beam is drawn at full length from the start instead of following your scroll.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- The beam is aria-hidden; children render unchanged.