ObsidianUIObsidianUI
DocumentationRolling Ball Scroll Indicator

Rolling Ball Scroll Indicator

A playful scroll indicator with a rolling ball that moves and rotates based on scroll progress.

Install using CLI

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

Install Manually

1

Install dependencies

npm install framer-motion
2

Copy the source code

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

Usage

1import { RollingBallScrollIndicator } from "@/components/ui/rolling-ball-scroll-indicator"
2

3export function Demo() {
4return (
5  <>
6    <RollingBallScrollIndicator scrollContainerId="scroll-area" />
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
Retro Pixel ButtonRubik Cube