CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/scroll-text-fade

Scroll Text Fade

A long block of copy that fades word-by-word as the visitor scrolls — early words go dim, current words pop, future words sit faded.

ReactFont#scroll#fade#typography

Usage

import ScrollTextFade from '@crazygl/hero-scroll-text-fade';

export default function Hero() {
	return (
		<ScrollTextFade
			copy="We design and build premium product experiences that move with intent."
			windowSize={18}
			brightColor="#ffffff"
		/>
	);
}

Customise

  • Content — copy, the paragraph that reveals as you scroll.
  • Fade — dimColor / brightColor (the colours interpolated per word), windowSize (width of the active reveal band as a % of the text), softness (edge falloff of the band).
  • Scroll window — scrollStart / scrollEnd, the scroll-progress range (0% = element entering viewport, 100% = leaving) over which the reveal plays out.
  • Typography — fontSize, headingFontFamily, headingFontWeight, lineHeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • Mission / manifesto statements and about-page intros.
  • SaaS and agency landing pages that want a slow, deliberate reveal.
  • Editorial or storytelling sections built around a single strong sentence.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-scroll-text-fade
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import ScrollTextFade from '@crazygl/hero-scroll-text-fade';

export default function Landing() {
  return (
    <ScrollTextFade />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import ScrollTextFade from '@crazygl/hero-scroll-text-fade';

export default function Page() {
  return (
    <section>
      <ScrollTextFade
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Scroll Text Color

A heading whose colour sweeps from start to end as the user scrolls — uses background-clip:text for crisp gradient handover.

Scroll Flow Text FX

Stacked rows of large text drift left/right at offset speeds as the visitor scrolls — like a marquee orchestrated by the page itself.

Scroll Text FX

Each letter scales, rotates and brightens as it passes the scroll midpoint — an editorial mid-line emphasis effect.

On Scroll Typography

A headline whose transform is driven by scroll progress through the viewport — pick an animation flavour (scale / rotate / slide / blur / combo), tune the scroll window, and the headline does the rest.

Scroll Synced Text

A series of statements that swap one at a time as the user scrolls — the heading is pinned at viewport-centre and the next statement crossfades in as you scroll through the hero's 200vh of vertical space.

Scroll Reveal Pro

Multi-line heading where each line is masked and rises into view as the visitor scrolls — staggered, eased, with a small blur dropoff.Live customizer

Scroll Text Fade

Dimmed colourActive colourActive window (%)18%Edge softness0.5Start (%)15%Scroll progress at which the effect starts. 0% = element just entering viewport, 100% = element just exiting.End (%)70%Scroll progress at which the effect completes.Font size56pxFontWeight600Line height1.25Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.