Skip to content

Scroll Text Reveal

Words brighten one by one as the paragraph scrolls into view.

We roast on Tuesdays, ship on Wednesdays, and answer every email ourselves. Scroll slowly: each word brightens as it reaches the middle of the screen.

import { ScrollTextReveal } from '@brand-studio/ui';

export default function ScrollTextRevealDemo() {
  return (
    <div style={{ padding: '30vh 0' }}>
      <ScrollTextReveal text="We roast on Tuesdays, ship on Wednesdays, and answer every email ourselves. Scroll slowly: each word brightens as it reaches the middle of the screen." />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, ScrollTextReveal } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { ScrollTextReveal } from '@brand-studio/ui';

<ScrollTextReveal text="We roast on Tuesdays…" />

Accessibility

Uses CSS scroll-driven animation. Browsers without it, and readers who prefer reduced motion, see the text at full strength.
The text stays one paragraph for screen readers.

API Reference

Prop	Type	Default
`text`	`string`	–
`as?`	`React.ElementType`	–
`className?`	`string`	`''`