Loading hero…

@crazygl/scrollflowtextfx

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.

React

Font

#scroll

#marquee

#typography

Usage

import ScrollFlowTextFx from '@crazygl/hero-scrollflowtextfx';

export default function Hero() {
  return (
    <ScrollFlowTextFx
      row1="design · build · ship · "
      row2="motion · type · code · "
      row3="studio · crazygl · "
    />
  );
}

Customise

Content — row1, row2, row3 (each row's repeating text).
Motion — baseDrift (constant idle crawl), scrollDrift (scroll-driven shift strength).
Scroll window — scrollStart, scrollEnd (the % progress range the effect maps to).
Typography — row1Color, row2Color, row3Color, fontSize, headingFontFamily, headingFontWeight.
Backdrop — transparentBackground, bgColor.

Best for

Studio, agency, and portfolio landing pages.
Bold editorial intros and brand keyword strips.
Section dividers that react to scroll for a kinetic feel.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-scrollflowtextfx

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 ScrollFlowTextFX from '@crazygl/hero-scrollflowtextfx';

export default function Landing() {
  return (
    <ScrollFlowTextFX />
  );
}

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 ScrollFlowTextFX from '@crazygl/hero-scrollflowtextfx';

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

Similar heroes

Live customizer