CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/on-scroll-typography

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.

ReactFont#scroll#kinetic#typography

Usage

import OnScrollTypography from '@crazygl/hero-on-scroll-typography';

export default function Hero() {
	return (
		<OnScrollTypography
			heading="kinetic"
			animation="combo"
			scrollStart={15}
			scrollEnd={70}
		/>
	);
}

Customise

  • Animation — animation (scale / rotate / slide / blur / fade / combo), with scaleAmount, rotateAmount, slideAmount, blurAmount.
  • Scroll window — scrollStart / scrollEnd (percent of the hero's viewport pass over which the effect plays) and autoplaySeconds (ping-pong fallback when interactivity is off / reduced motion).
  • Typography — textColor, subColor, fontSize, headingFontFamily, headingFontWeight.
  • Backdrop — bgColor or transparentBackground.

Best for

  • Editorial and portfolio landing pages with a scroll-told story.
  • Brand statement sections where one word should command the screen.
  • Long-form marketing pages that want kinetic typography between blocks.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-on-scroll-typography
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 OnScrollTypography from '@crazygl/hero-on-scroll-typography';

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

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

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

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

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

Kinetic Text

Stacked lines where each word is timed independently — bounce in, rotate, scale, on a choreographed sequence. Pick whether the show plays on load, follows scroll, or loops forever.Live customizer

On Scroll Typography

AnimationScale amount2.4Rotation (deg)22°Slide (px)220pxBlur (px)14pxStart (%)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.Text colourSubheading colourFont size140pxFontWeight800Transparent backgroundBackgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.