CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/pro-text-type-effect

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.

ReactFont#typewriter#typography#fluid-type#gradient#cursor#text-animation

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

One command, zero config.

npm install @crazygl/hero-pro-text-type-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 ProTextTypeEffect from '@crazygl/hero-pro-text-type-effect';

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

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

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.

Type Writer Custom

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

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.

Gradient Text

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

Magnet Text

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

Proximity Text FX

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

Pro Text Type Effect

LoopWhen off, the typewriter types every string once then halts on the last.Variable speedOff: every character uses the same typing-speed value. On: each character gets a random ms between Min and Max — feels more like a real typist.Typing min30msFastest possible character interval when variable speed is on.Typing max80msSlowest possible character interval when variable speed is on.Deleting speed30msMs per character while deleting.Initial delay0msWait this long before the first character is typed.Pause after typed2000msHold time at the fully-typed state before deletion begins.Show cursorWhether to render the blinking caret next to the text.Cursor characterCaret glyph. A clean monospace caret set.Cursor colourWhether the cursor inherits the current line's colour or uses a hard-coded swatch.Blink interval500msCursor blink half-period.Hide while typingHold the cursor at solid-on while characters are being typed/deleted, and only blink when the line is at rest.Sizing modeFluid sizes the heading via CSS `clamp()` so it scales with viewport width.Fluid min28pxMinimum font size at small viewports.Fluid max96pxMaximum font size at large viewports.Fluid vw scale6vwMiddle term in clamp() — how aggressively the heading scales with viewport width.Gradient per lineTint each cycle's line with its own gradient (uses Fill / Fill 2). Off uses a single text colour throughout.Text colourSolid colour when gradient mode is off.Letter spacing-0.01emTracking.Heading fontFamily for the heading. Monospaces (JetBrains Mono, IBM Plex Mono) read most typewriter-like.Heading weight700Heading weight.Transparent backgroundSkip the deepest backdrop so the hero composes onto whatever page background sits behind it.Background colourBase canvas colour.Accent glow colourTint of the soft radial bloom that breathes behind the heading.Accent glow strength0.5Opacity of the bloom.Vignette0.35Edge darkening.CrazyGL · crazygl.comProgrammable hero sections for real websites.