CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/kinetic-text-motion

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.

ReactWebGLFont#kinetic#motion#webgl#typography

Usage

import KineticTextMotion from '@crazygl/hero-kinetic-text-motion';

export default function Hero() {
	return (
		<KineticTextMotion
			words={`IMAGINE\nANIMATE\nLAUNCH`}
			animationSpeed={0.8}
			effectType="ripple"
		/>
	);
}

Customise

  • Content — words (one per line, cycled in order).
  • Motion — animationSpeed (transition duration) and intervalTime (hold between words).
  • Effect — effectType (none / blur / distortion / ripple) and effectIntensity.
  • Typography — textColor, textFontSize, headingFontFamily, headingFontWeight, headingFontStyle.
  • Backdrop — transparentBackground or a solid bgColor.

Best for

  • Brand and product taglines that read as a sequence ("design / build / ship").
  • Launch and coming-soon pages wanting a bold animated wordmark.
  • Agency and motion-studio sites needing a kinetic typographic centrepiece.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-kinetic-text-motion
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 KineticTextMotion from '@crazygl/hero-kinetic-text-motion';

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

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

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.

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 Split Typography

A bold grotesk headline is split into horizontal slices that fly in from alternating sides, settle into alignment, and then parallax against the pointer at different depths.

Progressive Blur Text

A giant display word that is razor-sharp at the top and melts into a progressively heavier blur toward the bottom — a true variable-radius blur per row, not a gradient-masked copy. Bold, editorial, fully recolourable.Live customizer

Kinetic Text Motion

Speed0.8sHow fast each word transitions.Interval1sHold time between transitions.EffectIntensity1Text colourFont size230pxSize at which the word is rasterised (capped by the 1024×256 texture).FontWeight600StyleTransparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.