Scroll Reveal
Wrap anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Scroll Reveal
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
from | "up" | "down" | "left" | "right" | "scale" | "blur" | "up" | |
stagger | number | 0.08 | |
delay | number | 0 | |
once | boolean | true | |
amount | number | 0.25 |
About Scroll Reveal
Scroll Reveal wraps anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger automatically.
Scroll Reveal is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Scroll Reveal
- Landing page sections.
- Feature lists.
- Blog content.
- Portfolio grids.
How it works
It uses Motion's whileInView with an amount threshold and an optional once. Each child gets a variant, so staggering needs no extra code.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Scroll Reveal
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
Style it with className like any other element. It only uses your theme's tokens, so it follows light and dark mode without extra work.
- from (default "up").
- stagger (number, default 0.08).
- delay (number, default 0).
- once (boolean, default true).
- amount (number, default 0.25).
Goes well with Scroll Reveal
Scroll Reveal is already composed into 5 ready-made sections, so you can see it in context or install the whole block.
- Features Grid: Features section
- Features Alternating: Features section
- Testimonials Wall: Testimonials section
- FAQ Grid: FAQ section
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Scroll Reveal
npx shadcn@latest add https://charcoalui.com/r/scroll-reveal.jsonScroll Reveal is free and MIT licensed. The command copies scroll-reveal.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Image Reveal, a Pro piece: A clip-path wipe uncovers the image while it settles from a slight zoom.
Frequently asked questions
- Can I stagger several items with scroll reveal?
- Yes. Wrap several children and each one reveals a beat after the last; stagger sets the gap and from picks the direction, including a blur-in.
- How do I install Scroll Reveal?
- Run npx shadcn@latest add https://charcoalui.com/r/scroll-reveal.json. The shadcn CLI copies scroll-reveal.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Scroll Reveal free for commercial use?
- Yes. Scroll Reveal is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Scroll Reveal work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Scroll Reveal?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Scroll Reveal's props and source and get_install_command returns the exact command.