Entrance Reveal React component
A wrapper that reveals its content as it scrolls into view: children (or the words of a heading) appear one after another, rising from behind a mask, fading up, sharpening out of a blur, scaling or sliding in, once or every time.
About the Entrance Reveal component
Entrance Reveal brings content in as it scrolls into view, instead of having everything already sitting there. Wrap a heading, a paragraph, a list or a row of images in it and each piece appears in turn: rising out of a mask like type set into a slot, fading up, sharpening out of a blur, scaling or sliding in.
A heading can be split into words or letters so it builds up one word at a time. Screen readers still get the whole sentence at once, and reduced-motion settings show everything straight away.
When to use it
Use it for landing-page headings, feature lists, stats rows, image grids and any section that benefits from a little choreography as people scroll.
Use it on a few key moments per page; revealing every paragraph makes a page feel slow.
Installation
Add the Entrance Reveal component to your project with the shadcn CLI. It lands in components/entrance-reveal.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/entrance-revealOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<EntranceReveal /> accepts 9 props (required ones are marked *). It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| children* | React.ReactNode | — |
| variant | "fade-up" | "blur" | "rise" | "scale" | "slide" | "fade-up" |
| split Split a string child into words (or letters) that reveal one after another. | "none" | "words" | "letters" | "none" |
| stagger Delay between children (or words), in ms. | number | 80 |
| delay Delay before the first item, in ms. | number | 0 |
| duration Duration of each item's reveal, in ms. | number | 900 |
| once Reveal only the first time; otherwise it hides again when it leaves the screen. | boolean | true |
| threshold Share of the element that must be visible before it reveals (0–1). | number | 0.25 |
| as | "div" | "section" | "ul" | "ol" | "h1" | "h2" | "h3" | "p" | "span" | "div" |
- children*React.ReactNode
- variant"fade-up" | "blur" | "rise" | "scale" | "slide"Default: "fade-up"
- split
Split a string child into words (or letters) that reveal one after another.
"none" | "words" | "letters"Default: "none" - stagger
Delay between children (or words), in ms.
numberDefault: 80 - delay
Delay before the first item, in ms.
numberDefault: 0 - duration
Duration of each item's reveal, in ms.
numberDefault: 900 - once
Reveal only the first time; otherwise it hides again when it leaves the screen.
booleanDefault: true - threshold
Share of the element that must be visible before it reveals (0–1).
numberDefault: 0.25 - as"div" | "section" | "ul" | "ol" | "h1" | "h2" | "h3" | "p" | "span"Default: "div"
npm dependencies
Installed for you by the shadcn CLI.
Entrance Reveal FAQ
- Which styles are there?
- rise (slides up from behind a mask), fade-up, blur, scale and slide. rise looks best on big headings; fade-up and blur suit cards and paragraphs.
- Can it animate word by word?
- Yes. Pass a plain string as the child and set split="words" (or "letters"); stagger sets the gap between them.
- Will it replay when I scroll back up?
- By default it reveals once. Set once={false} and it hides again when it drops off the bottom of the screen, so it replays next time.
- Does it work with lists?
- Yes. Use as="ul" or "ol" with <li> children; they keep their place in the list and get the reveal styles directly.
