Nhatcapdang
Scroll

Scroll Reveal

A scroll-based reveal animation component that elegantly reveals content with a slide and fade effect when the element enters the viewport.

Usage

Installation

npx shadcn@latest add @nhatcapdang/scroll-reveal
yarn dlx shadcn@latest add @nhatcapdang/scroll-reveal
pnpm dlx shadcn@latest add @nhatcapdang/scroll-reveal

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The content to reveal on scroll

Features

  • Fade and slide animation: Content fades in while sliding up from below
  • Overlay reveal effect: A colored overlay slides across to reveal the content
  • Viewport detection: Uses useInView hook to trigger animation when element is 50% visible
  • One-time animation: Animation only plays once when first entering viewport
  • Customizable timing: Built with Motion for smooth, professional animations

Scroll Progress

A scroll progress indicator component that displays a visual progress bar and percentage as users scroll through content.

Scrollspy

A lightweight scrollspy container that syncs active anchors with section positions and URL hash updates.

On this page

UsageInstallationPropsFeatures