CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/typewriter-effect

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.

ReactFont#typewriter#typography#text-animation#cursor#css#headline

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

One command, zero config.

npm install @crazygl/hero-typewriter-effect
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 TypewriterEffect from '@crazygl/hero-typewriter-effect';

export default function Landing() {
  return (
    <TypewriterEffect />
  );
}
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 TypewriterEffect from '@crazygl/hero-typewriter-effect';

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

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.

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.

Image Masked Text

A heading whose letterforms are filled with a photograph. Uses native CSS background-clip:text so the wordmark stays selectable and crisp at any zoom, with cover, contain, or custom-percent fit modes.

Type Writer Custom

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

Proximity Text FX

Letters near the cursor scale up and brighten; letters further away dim and shrink — an inverse-distance attention effect.

Magnet Text

Letters are pulled toward the cursor with falloff — close letters attract strongly, distant letters barely tug. Springs return them to the line.Live customizer

Typewriter Effect

Typing speed100msMilliseconds per character while typing. 60–140 reads as a confident typist; below 40 starts to feel mechanical; above 250 reads as deliberate.Deleting speed60msMilliseconds per character while deleting. Faster than typing reads natural (mind already on the next word).Pause after typed1000msHold time once a word is fully typed before deletion begins. ~1s gives the reader time to land on it.Pause after deleted240msBrief pause once a word is fully deleted, before the next one starts typing. A small gap (200–400ms) sells the 'rolling to the next thought' beat.Cursor colourBlock cursor colour. Match the text colour for a classic terminal feel, or pick an accent for a neon vibe.Cursor width2pxBlock-cursor width. 2–4px reads as a software caret; 6–12px reads as an old typewriter slug.Cursor height100%Cursor height as a percentage of the heading font size. 100% matches cap-height; below ~80% reads as a low underscore caret.Blink interval500msHow long the cursor stays on/off each cycle. 500ms is the canonical caret blink; <250ms reads frantic; >900ms reads sleepy.Cursor glow18pxSoft outer glow around the cursor (CSS box-shadow blur). 0 = flat block; 16–24 = warm-CRT halo; >40 = laser pointer.Text colourColour of the typed characters.Font size96pxWordmark font size. The cursor and layout scale with this.Letter spacing-0.01emNegative pulls tracking tight (display look); positive opens it up (monospace / typewriter feel).Heading fontFont for the wordmark. 'Inherit' uses the host site's heading font. For a true typewriter look pick a monospace (e.g. JetBrains Mono, IBM Plex Mono); for a sleek modern feel pick Inter / Geist / Manrope.Heading weight700Weight of the wordmark. 700–900 reads as a confident display headline; 400–500 reads editorial.Transparent backgroundSkip the deepest backdrop so the hero composes onto whatever page background sits behind it. The wordmark, glow, subheading and CTA still render normally.Background colourBase canvas colour behind the wordmark. Deep near-black holds the cursor glow best.Ambient glow colourTint of the three soft radial blooms that breathe behind the wordmark.Ambient glow strength0.55Overall opacity multiplier for the ambient blooms. 0 disables the backdrop life; above 1 starts to wash the text.Film grain0.06Static film-grain overlay opacity. A whisper (0.04–0.08) is enough — full strength reads noisy.Vignette0.4Edge darkening that focuses the eye on the wordmark.CrazyGL · crazygl.comProgrammable hero sections for real websites.