webdevpuneet.com

Related Snippets

44 in Text Animations category
3–8 of 44

Typed.js Multi-String Hero

AI Code Typing Preview

Splitting.js CSS Stagger

Typed.js Rotating Headline

GSAP Text Rotator

Scramble Text Links

Typed.js Multi-String Hero — Free Typewriter Headline Snippet

Typed.js Multi-String Hero · Text Animation · Plain HTML, CSS & JS · Live preview

CategoryText Animations
TagsText EffectsCSS AnimationLanding PageJS Libraries

Copy & paste

Source Code

Requires
JS · typed.umd.js
<section class="tjh-hero">
  <div class="tjh-eyebrow">✦ Now hiring</div>
  <h1 class="tjh-heading">We build for<br><span id="tjhTyped" class="tjh-typed"></span><span class="tjh-caret" aria-hidden="true"></span></h1>
  <p class="tjh-sub">One product team, five very different customers — the headline cycles through who we ship for, typed and deleted in a loop by Typed.js.</p>
  <div class="tjh-actions">
    <button class="tjh-btn tjh-primary">See open roles</button>
    <button class="tjh-btn tjh-ghost">Our story →</button>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Multi-string cycling
A single strings array drives an unlimited phrase loop.
Independent type/delete speed
typeSpeed and backSpeed tune each direction separately.
Configurable read pause
backDelay controls how long a finished phrase stays visible.
Smart backspacing
smartBackspace avoids re-deleting shared string prefixes.
Custom CSS caret
A separately styled, independently animated blinking cursor.
Gradient typed text
background-clip: text applies a gradient to the cycling phrase.
Looping by default
loop: true keeps the headline cycling indefinitely.
Minimal setup
One constructor call replaces manual interval-based typing logic.

About this UI Snippet

Typed.js Multi-String Hero — Cycling Headlines with a Real Typewriter Loop

Screenshot of the Typed.js Multi-String Hero snippet rendered live

A rotating headline is a common way to communicate that one product serves several different audiences without needing five separate hero sections. This snippet uses Typed.js — a small, purpose-built typewriter animation library — to cycle a hero headline through five phrases, each one typed out, held briefly, and deleted before the next begins, all driven by a single strings array.

One options object, a full animation loop

new Typed('#tjhTyped', { strings: [...], typeSpeed: 48, backSpeed: 28, backDelay: 1400, loop: true }) is the entire animation. Typed.js owns the interval-based logic of adding one character at a time, pausing once a string is fully typed, deleting characters at a different (usually faster) speed, and moving to the next string in the array — looping back to the first once the array is exhausted. Compare this to Typewriter or Split Text, which build a single-string typing effect from scratch; this snippet gets the equivalent behavior across an arbitrary number of strings from one constructor call.

Independent type and delete speeds

typeSpeed: 48 and backSpeed: 28 are deliberately different — text usually reads better typing in a bit slower than it deletes, since deletion is meant to feel like a quick "clearing" gesture rather than a mirrored typing animation. backDelay: 1400 is the pause after a string finishes typing and before deletion starts, giving the reader time to actually read the phrase rather than watching it vanish immediately.

smartBackspace and why it matters here

Because two of this hero's phrases share no common prefix while others might, smartBackspace: true tells Typed.js to only delete the characters that differ between the current string and the next one, rather than deleting the entire string down to nothing and retyping from scratch. For phrases that do share a prefix, this produces a subtly smarter, faster transition; when there's no shared prefix (as here) it behaves the same as a full backspace.

A custom CSS caret instead of Typed's own

Typed.js can render its own blinking cursor span, but this snippet sets showCursor: false and supplies a separate .tjh-caret element animated with a plain CSS @keyframes blink instead — this keeps the caret's exact color, width, and blink timing fully controllable in CSS rather than through Typed's cursor options, and avoids any layout shift from Typed inserting and removing its own cursor markup.

Customizing it

Add or remove phrases in the strings array, tune typeSpeed/backSpeed/backDelay for a snappier or more deliberate rhythm, or pair this hero with a Hero Section layout below featuring the specific audience the current phrase describes.

Step by step

How to Use

  1. 1
    Add the Typed.js CDN scriptInclude typed.umd.js from the CDN panel.
  2. 2
    Paste HTML, CSS, and JSA hero with an empty typed span and blinking caret renders.
  3. 3
    Watch the headline typeThe first phrase types out character by character.
  4. 4
    Watch it pause, then deleteAfter backDelay, it backspaces before typing the next phrase.
  5. 5
    Let it loopAll five phrases cycle continuously since loop is true.
  6. 6
    Edit the strings arrayReplace the five phrases with your own audiences or value props.

Real-world uses

Common Use Cases

Multi-audience SaaS heroes
Cycle through customer segments in one headline, driven by a single strings array that supports an unlimited loop.
Recruiting and careers pages
Rotate roles or values, with backDelay controlling how long each finished phrase stays visible for reading.
Personal portfolio intros
Cycle job titles or skills in a personal portfolio introduction, with typeSpeed and backSpeed tuned independently for each direction.
Agency landing pages
Rotate industries or services under a standard hero section, using smartBackspace to avoid deleting shared prefixes.
Positioning and onboarding
Show several use cases for one product, or compare with the lighter typewriter effect for a single phrase.
Related: Hero with Animated Stat Counters
See the Hero with Animated Stat Counters for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The strings array is processed in order: Typed.js types out the current string one character at a time at typeSpeed, waits for backDelay once fully typed, deletes it at backSpeed, then advances to the next string in the array. Once the last string has been typed, deleted, and loop is true, it restarts from the first string, creating a continuous cycle.

Without it, Typed.js deletes a finished string down to zero characters before typing the next one from scratch. With smartBackspace: true, if the next string in the array shares a prefix with the current one, Typed.js only deletes the differing suffix and types the new suffix — producing a faster, subtly smarter-feeling transition for phrases that share common wording.

Typed.js can render and animate its own cursor element automatically, but this snippet opts out of that (showCursor: false) and instead renders a separate .tjh-caret span animated with a plain CSS @keyframes blink. This gives full control over the caret's exact width, color, and blink timing directly in CSS rather than through Typed's more limited cursor styling options.

Yes — instead of constructing new Typed(...) immediately on page load, wrap the construction in an IntersectionObserver callback watching the hero section, and only call new Typed('#tjhTyped', {...}) once the hero becomes visible. This defers the animation start until a visitor actually scrolls to it.

Install the typed.js npm package (or keep the CDN script), import Typed, and construct new Typed(selector, options) inside a mount effect (useEffect, onMounted, or ngAfterViewInit) targeting a ref to the span element. Call the returned instance's .destroy() method in the cleanup function to stop the typing loop and remove its DOM manipulation when the component unmounts.