_{Hero made by @ybouane.}

@crazygl/hero-typewriter-effect

A cycling wordmark that types itself out character by character, pauses, deletes, and rolls to the next word — with a blinking block cursor that glows softly against a layered atmospheric backdrop.

Demo

Typewriter Effect

Install

npm install @crazygl/hero-typewriter-effect

Usage

import TypewriterEffect from '@crazygl/hero-typewriter-effect';

export default function Hero() {
  return (
    <TypewriterEffect
      words={['Hello', 'From', 'CrazyGL']}
      subheading="Cycling display text that types itself out one character at a time."
      ctaLabel="Get the source"
      onCTAClick="/install"
    />
  );
}

words also accepts a \n-separated string (matching the customizer textarea). onCTAClick accepts a URL string or a function.

Customise

• Content — words, subheading, ctaLabel, onCTAClick.
• Timing — typingSpeed, deletingSpeed, pauseDuration, pauseAfterDelete (all ms).
• Cursor — cursorColor, cursorWidth, cursorHeight (% of font), cursorBlinkSpeed, cursorGlow.
• Typography — textColor, fontSize, letterSpacing, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor, glowColor, glowStrength, grainAmount, vignetteStrength.

Best for

• Hero sections that say several things at once — agency pages, AI productivity tools.
• Developer-tool homepages and SaaS landing pages.
• Brands whose pitch is "we're a few things; pick one."

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.