CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/animated-flow-text

Animated Flow Text

Each word rides its own sine wave with a per-letter phase offset — the line reads like a banner caught in a slow current.

ReactFont#flow#kinetic#typography

Usage

import AnimatedFlowText from '@crazygl/hero-animated-flow-text';

export default function Page() {
  return (
    <AnimatedFlowText
      heading="the current carries the type"
      amplitude={18}
      speed={0.9}
      textColor="#ffffff"
    />
  );
}

Customise

  • Content — heading, optional subheading.
  • Flow — amplitude (wave height in px), wavelength (chars per wave), speed, rotateMax (per-letter tilt in degrees).
  • Typography — textColor, subColor, fontSize, headingFontFamily (Google font), headingFontWeight.
  • Backdrop — transparentBackground, bgColor.

Best for

  • SaaS and product landing pages wanting a lively, motion-forward headline
  • Portfolio and agency sites with a playful, type-driven personality
  • Event, launch or campaign pages where the wording should feel alive
01 · Install the package

One command, zero config.

npm install @crazygl/hero-animated-flow-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 AnimatedFlowText from '@crazygl/hero-animated-flow-text';

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

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

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.

Colorful Type Motion

Each letter cycles through a hue palette on a phase offset — moving colour without a moving gradient. Pick from eight curated palettes spanning soft pastels to electric neon.

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.

Kinetic Text Motion

Words cycle through, each one wiping in and out as 40 horizontal stripes that scale staggered across a WebGL surface. Optional per-fragment blur, distortion or ripple effect.

Text Flow

A wordmark assembled out of thousands of soft particles, each parked at a sampled pixel of the rasterised text. Move the cursor through it and the particles flee from your hand, then spring back to their target positions.

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

Animated Flow Text

Amplitude (px)18pxWavelength (chars)4Flow speed0.9Tilt (deg)6°Text colourSubheading colourFont size88pxFontWeight700Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.