Scroll Reveal Text

A paragraph that lights word by word as it scrolls through the viewport, from a faint grey to bone.

$149 once · every Pro piece

Customize

Text

Size (px)

Weight

Start line (viewport)

End line (viewport)

Progress is tied to the scroll position and eased on a spring, so a wheel notch becomes a short sweep; the word at the leading edge runs hot, and scrolling back up un-lights the words in reverse. The text stays one real paragraph; only colours change.

Install

npx shadcn@latest add @obsyde/scroll-reveal-text

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { ScrollRevealText } from '@/components/obsyde/ember/scroll-reveal-text/ScrollRevealText';

export function Example() {
  return (
    <ScrollRevealText
      text="Words light from faint grey to bone as this paragraph rises through the viewport. The word at the leading edge runs hot, so you can see exactly how far the reading has got; scroll back up and they cool again. Progress follows the scroll position on a spring, so a flick of the wheel still reads as one continuous sweep."
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/scroll-reveal-text/ScrollRevealText.tsxcomponent
ember/scroll-reveal-text/scroll-reveal-text-demo.cssstyles
ember/scroll-reveal-text/scroll-reveal-text.cssstyles
ember/scroll-reveal-text/ScrollRevealTextDemo.tsxdemo
ember/type-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`text`Text	`string`	`'Words light from faint grey…'`
`size`Size (px)	`number`	`40`
`weight`Weight	`number`	`500`
`start`Start line (viewport)	`number`	`0.85`
`end`End line (viewport)	`number`	`0.4`