Hero made by @ybouane.

@crazygl/hero-pro-text-type-effect

A pro-grade typewriter: cycles through multiple strings with variable per-character speed, fluid font sizing (clamp), per-line gradient fills, and a choice of cursor characters from block to slug to bar.

Demo

Pro Text Type Effect

Install

npm install @crazygl/hero-pro-text-type-effect

Usage

import ProTextTypeEffect from '@crazygl/hero-pro-text-type-effect';

export default function Page() {
  return (
    <ProTextTypeEffect
      lines={[
        'Hello, reference folks!',
        'This is the ultimate typing text component',
        'Check out what all you can do from the panel on the right →',
      ]}
      variableSpeed
      cursorChar="▋"
      useGradientFill
    />
  );
}

lines may also be a single \n-separated string (matches the customizer textarea).

Customise

• Content — lines (cycled strings), subheading, ctaLabel, onCTAClick (URL or function).
• Typing — loop, variableSpeed, typingMin / typingMax (or constant typingSpeed), deletingSpeed, startDelay, pauseDuration.
• Cursor — showCursor, cursorChar, cursorColorMode, cursorBlinkSpeed, hideCursorWhileTyping.
• Sizing — sizingMode (fluid clamp vs fixed), fluidMin / fluidMax / fluidScale, or fontSize.
• Typography — useGradientFill with fillColor1 / fillColor2, textColor, letterSpacing, headingFontFamily, headingFontWeight.
• Backdrop — bgColor, accentColor / accentStrength bloom, vignetteStrength, transparentBackground.

Best for

• Marketing pages juggling several value props in one hero slot.
• SaaS product heroes ("All your stack. One dashboard. Zero ops.").
• AI tool homepages with rotating use-cases.
• Any landing page that says "we do X, Y, and Z."

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.