Hero made by @ybouane.

@crazygl/hero-type-writer-custom

A typewriter with fully customisable per-step sequencing: type N chars, pause, delete M chars, type more, then loop.

Demo

Type Writer Custom

Install

npm install @crazygl/hero-type-writer-custom

Usage

import TypeWriterCustom from '@crazygl/hero-type-writer-custom';

export default function Hero() {
  return (
    <TypeWriterCustom
      phrases={"Hello, World!\nGoodbye, Yesterday.\nHi there, Future."}
      typingSpeed={80}
      deletingSpeed={40}
      pauseDuration={1600}
    />
  );
}

Customise

• Content — phrases (one per line), subheading.
• Timing — typingSpeed (ms/char), deletingSpeed (ms/char), pauseDuration, loop.
• Cursor — cursorChar (|, _, ▌, █), cursorColor.
• Typography — textColor, fontSize, headingFontFamily (default JetBrains Mono), headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Developer tools and terminal / CLI products.
• SaaS landing headlines that rotate value props.
• Portfolio and "I build X / Y / Z" intro heroes.

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.