Liquid Scroll Progress

A self-contained progress indicator: the component stays visually fixed in place while wheel or touch input drives a virtual progress value — filling the pipe, connectors, and stacked cards in sequence, with glass-morphism styling and animated bubbles.

Preview

Introduction

Implementation

Customization

Usage

Installation

Install the component using the CLI.

npx shadcn@latest add https://shreyashtech.me/r/liquid-scroll-progress.json

Usage

Import the component:

import { LiquidScrollProgress } from "@/components/liquid-scroll-progress"

Use it in your code:

<LiquidScrollProgress />

Props

Property	Type	Default	Description
sections	LiquidScrollProgressSection[]	DEFAULT_SECTIONS	Array of { title } — one per card, filled in order as progress advances.
liquidColor	string	"#159cff"	CSS color used for the liquid fill (pipe, connectors, and cards).
className	string	-	Additional classes applied to the outer section.