Glowing Scroll Indicator

An animated scroll progress indicator with glowing bars that light up as you scroll.

Component preview

Install using CLI

npx shadcn@latest add "https://www.obsidianui.dev/r/glowing-scroll-indicator.json"

Install Manually

Install dependencies

npm install motion

Copy the source code

Copy the code into components/block/glowing-scroll-indicator.tsx

Usage

Code

1import { GlowingScrollIndicator } from "@/components/block/glowing-scroll-indicator"
2
3export function Demo() {
4return (
5  <>
6    <GlowingScrollIndicator scrollContainerId="scroll-area" direction="vertical" />
7    <div id="scroll-area" className="h-[400px] overflow-y-auto">
8      {/* Scrollable content */}
9    </div>
10  </>
11)
12}

Props

Prop	Type	Default	Description
scrollContainerId	`string`	`'scroll-target'`	Container ID
direction	`'vertical' \| 'horizontal'`	`'vertical'`	Direction