TextReveal

Reveal a paragraph word by word as it scrolls through the viewport.

TextReveal splits a string into words and fades each word from a dimmed base to full opacity as the text scrolls through the viewport. Use it for short statements on landing or marketing pages. Scroll the page to see the demos animate.

Import#

typescript

import { TextReveal } from "@reactberry/system/blocks";

Usage#

typescript

import { TextReveal } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function Manifesto() {
  return (
    <Box maxWidth="800px" mx="auto" py="xl">
      <TextReveal fontSize="xxxl" fontWeight="700">
        We design tools that stay out of the way so teams can focus on the work
        that matters.
      </TextReveal>
    </Box>
  );
}

Examples#

Scroll range#

Change offset and revealEnd to control when the reveal starts and finishes. Here it runs while the text moves from the bottom of the viewport to just above the middle.

Base opacity#

Raise baseOpacity to keep words that are not revealed yet easier to read.

API#

TextReveal#

Prop	Type	Default	Description
`children*`	`string`	—	The text to reveal. Must be a plain string.
`baseOpacity`	`number`	`0.18`	Opacity of words that are not revealed yet.
`offset`	`ScrollOffset`	`["start end", "end start…`	Scroll offset passed to Motion's `useScroll`, targeting the text element.
`revealEnd`	`number`	`0.88`	Scroll progress at which the last word is fully revealed. Clamped between 0.1 and 1.

All remaining TextProps (except children and as) are spread onto the Text element, which always renders as a div.

Accessibility#

Each word is aria-hidden and the container receives aria-label set to the full string.
When the user prefers reduced motion, the string is rendered as plain text with no animation and no aria-label.

Notes#

Words are split on whitespace. Word i of n fades in between progress i / n * revealEnd and (i + 1) / n * revealEnd.
Each word is an inline-grid span with 0.25em right margin and 0.1em bottom margin; the foreground word uses currentColor.
TextRevealProps is exported from src/blocks/TextReveal but not re-exported from @reactberry/system/blocks.