CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/type-writer-custom

Type Writer Custom

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

ReactFont#typewriter#custom-sequence#typography

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-type-writer-custom
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 TypeWriterCustom from '@crazygl/hero-type-writer-custom';

export default function Landing() {
  return (
    <TypeWriterCustom />
  );
}
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 TypeWriterCustom from '@crazygl/hero-type-writer-custom';

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

Smart Typewriter Pro

Typewriter that only deletes the diverging tail between phrases — keeps shared prefixes intact and types only the new ending, like a writer correcting themselves.

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.

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.

Clip Type Stagger

Each character is clipped from below and rises into place on a stagger — like setting movable type one piece at a time. Plays once on load or loops with a configurable hold.

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.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.Live customizer

Type Writer Custom

Type speed (ms)80msDelete speed (ms)40msPause (ms)1600msLoopCursorCursor colourText colourFont size72pxFontWeight700Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.