Hero made by @ybouane.

@crazygl/hero-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.

Demo

Kinetic Text Motion

Install

npm install @crazygl/hero-kinetic-text-motion

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.