ObsidianUIObsidianUI
DocumentationGlowing Scroll Indicator

Glowing Scroll Indicator

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

Install using CLI

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

Install Manually

1

Install dependencies

npm install framer-motion
2

Copy the source code

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

Usage

1import { GlowingScrollIndicator } from "@/components/ui/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 NameTypeDefaultDescription
scrollContainerIdstring'scroll-target'Container ID
direction'vertical' | 'horizontal''vertical'Direction
Glowing EffectHorizontal Scroll