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

Ultimate Scroll Text

A long paragraph that reveals as the viewer scrolls — word-by-word, letter-by-letter, or line-by-line — with a soft ghost copy underneath that hints at the next words just before they arrive.

ReactFont#scroll-reveal#typography#long-form#stagger#scroll-text

Usage

import UltimateScrollText from '@crazygl/hero-ultimate-scroll-text';

export default function Page() {
  return (
    <UltimateScrollText
      text={'We build calm software for focused teams.\nNo noise. No bloat. Just the work.'}
      unit="Words"
      scrollStart={15}
      scrollEnd={70}
      ghostEnabled
      ctaLabel="Read the manifesto"
      onCTAClick="/manifesto"
    />
  );
}

When used in React you can pass onCTAClick either a URL string or a function callback.

Customise

  • Content — text, ctaLabel, onCTAClick (url string or function), unit (Words / Letters / Lines).
  • Scroll mapping — scrollStart, scrollEnd (% of progress the reveal spans), autoplaySeconds (time-based sweep when the page doesn't scroll).
  • Ghost layer — ghostEnabled, ghostOpacity, ghostColor.
  • Type & layout — textColor, textAlign, fontSize, lineHeight, letterSpacing, maxWidth, wordGap, headingFontFamily, headingFontWeight.
  • Atmosphere — accentColor, accentStrength, vignetteStrength, transparentBackground, bgColor.

Best for

  • Editorial / manifesto sections and brand storytelling.
  • Long-form landing intros where the copy should feel deliberate.
  • Scroll-driven narrative moments between product sections.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-ultimate-scroll-text
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 UltimateScrollText from '@crazygl/hero-ultimate-scroll-text';

export default function Landing() {
  return (
    <UltimateScrollText />
  );
}
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 UltimateScrollText from '@crazygl/hero-ultimate-scroll-text';

export default function Page() {
  return (
    <section>
      <UltimateScrollText
        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

Reveal Text Scroll

A heading revealed by a directional wipe — one of eight angles — with an optional layered effect: a blur-in, a colour morph from start to end, or a chromatic-aberration split that resolves as the reveal completes.

Animated Text Reveal

A paragraph that unblurs and fades in word by word as the viewer scrolls — with an initial blur and initial opacity that mean even the un-revealed words sit softly on the page rather than disappearing.

TextFluxUnveil

A paragraph whose first N words start fully revealed (setting up context) and the rest fade in as the viewer scrolls — perfect for 'context → reveal' headlines.

Text Cycler

A wordmark that cycles between several words or phrases, each one entering with a character-, word-, or line-staggered fade — pick the stagger order from first / last / center / random.

Clip Type Stagger

Each character is clipped from below and rises into place on a stagger — like setting movable type one piece at a time. Plays once on load or loops with a configurable hold.

Rolling Text

Each character rolls through a vertical stack of duplicate copies of itself in a continuous loop, with a blur pulse mid-roll and a per-character stagger.Live customizer

Ultimate Scroll Text

Reveal unitWhat the reveal animates one-at-a-time. Words is the most readable; Letters reads cinematic and slow; Lines is the briefest.Scroll start (%)15%Scroll progress at which the reveal starts. 0% = element just entering viewport.Scroll end (%)70%Scroll progress at which the reveal completes.Ghost copyRender a faded copy of the full paragraph beneath the revealed copy so the eye anticipates the next words.Text colourColour of the revealed paragraph.AlignmentParagraph alignment.Font size56pxParagraph font size.Line height1.2Line height for the paragraph.Letter spacing-0.01emTracking.Max width900pxMaximum paragraph width.Word gap0.25emExtra spacing between words.FontFamily. Display sans serifs (Inter, Geist, Bricolage Grotesque) read most editorial.Weight600Weight.Transparent backgroundSkip the deepest backdrop so the hero composes onto whatever section background sits behind it.Background colourBase canvas colour.Accent glow colourTint of the soft radial bloom behind the paragraph.Accent glow strength0.35Opacity of the bloom.Vignette0.35Edge darkening.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.