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

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.

ReactFont#scroll-reveal#typography#wipe#chromatic-aberration#blur#color-morph

Usage

import RevealTextScroll from '@crazygl/hero-reveal-text-scroll';

export default function Hero() {
  return (
    <RevealTextScroll
      heading="Reveal text on scroll."
      direction="Bottom → Top"
      effect="Blur"
      edgePercent={18}
    />
  );
}

Customise

  • Content — heading, subheading, ctaLabel, onCTAClick.
  • Reveal — direction (8 angles), edgePercent (soft-band width), scrollStart / scrollEnd (scroll window), autoplaySeconds (auto mode).
  • Effect — effect (None / Blur / Color Morph / Chromatic Aberration) plus blurPx, morphFromColor / morphToColor, caMaxPx.
  • Typography — textColor, textAlign, fontSize, lineHeight, letterSpacing, headingFontFamily, headingFontWeight.
  • Backdrop — transparentBackground, bgColor, vignetteStrength.

Best for

  • Long-form landing-page intros, manifestos, and brand stories
  • Film / season-launch heroes and premium SaaS reveals
  • Editorial headers where the entrance itself is part of the voice
  • Scroll-told pages where the headline resolves as you arrive
01 · Install the package

One command, zero config.

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

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

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

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.

Unblur Text Reveal

A paragraph that resolves word-by-word as the viewer scrolls, with a choice of six animation styles — blur, slide-up, scale, rotate, wave, or glow — and a colour transition from an initial muted hue to the final readable colour.

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.

Blurry Text FX

Each word starts heavily blurred and resolves into focus on a stagger. Plays once on load or loops with a configurable hold.

Hover Text Highlight

A heading whose words light up on hover — a coloured backdrop wipes in from one side, and out the other when the cursor leaves. Pick Background (full bleed) or Underline (band only).

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.Live customizer

Reveal Text Scroll

DirectionWhich edge the wipe arrives from. Diagonals read more cinematic; horizontals read magazine; verticals read intro card.Edge softness18%Width of the soft transition band as a percentage of the heading. 0 = hard wipe; ~20 = cinematic soft; >40 = atmospheric haze.Scroll start (%)15%Scroll progress at which the reveal starts. 0% = element just entering viewport, 100% = element just exiting.Scroll end (%)70%Scroll progress at which the reveal completes. Higher than Start.Layered effectOptional stacked effect that resolves alongside the reveal. None = clean wipe; Blur = letters defocus then sharpen; Colour morph = hue shifts from a start colour to a final colour; Chromatic aberration = R/G/B channels separate and collapse.Blur start18pxBlur amount at the leading edge of the reveal — fades to 0 as the wipe passes.Text colourHeading colour (used as the resolved colour when no morph is applied).AlignmentHeading alignment.Font size84pxHeading font size.Line height1.2Line height.Letter spacing-0.01emTracking.Heading fontFamily.Heading weight800Weight.Transparent backgroundSkip the deepest backdrop so the hero composes onto whatever section background sits behind.Background colourCanvas backdrop colour.Vignette0.3Edge darkening.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.