webdevpuneet.com

Related Snippets

175 in Animations category
21–26 of 60

Typewriter Glitch Gradient Reveal

SVG Liquid Text Wave

Number to Word Morph Counter

Variable Font Weight Breathe

Letter Gravity Drop Text

Cursor Spotlight Text Fill

Typewriter Glitch Gradient Reveal — Kinetic Text JS

Typewriter Glitch Gradient Reveal · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsText EffectsCSS AnimationMicro-Interactions

Copy & paste

Source Code

<div class="scene">
  <h1 class="reveal-heading">
    <span id="typed"></span><span class="cursor" id="cursor">|</span>
  </h1>
  <button class="replay" onclick="playSequence()">Replay</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), 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

Three chained effects in one sequence: typewriter, glitch burst, gradient shimmer settle
Whole sequence written as a single readable async/await function, no callback nesting
Glitch stage combines a chromatic-aberration text-shadow with a jittery steps() shake keyframe
Gradient settle reuses the standard background-clip: text shimmer technique
Blinking CSS cursor visible only during the typing phase, hidden before the glitch
Replay button resets all classes and state and reruns the entire sequence
Each stage is a small, independently understandable and reusable async function
Zero animation libraries — CSS keyframes plus vanilla JS timing only
Export as HTML file, React JSX, or React + Tailwind CSS
Mobile (375px), Tablet (768px), Desktop device preview buttons

About this UI Snippet

Typewriter Glitch Gradient Reveal — Three-Stage Kinetic Typography Sequence

Screenshot of the Typewriter Glitch Gradient Reveal snippet rendered live

This snippet chains three distinct text effects into one choreographed sequence: a character-by-character typewriter reveal, a burst of glitch text noise, and a settle into a shimmering animated gradient — three techniques that normally exist as separate snippets, combined into a single kinetic typography moment with a clear beginning, middle, and end. The point is not any one stage alone but the transition between them: the eye reads the sequence as "the headline is typing... now it's malfunctioning... now it's resolved into something finished and premium," which is a stronger narrative arc than any single effect provides on its own.

Stage one: the typewriter

typeOut(text) appends one character to typed.textContent every 55ms inside an await wait(55) loop, identical in spirit to the standalone typewriter snippet's tick() approach but written with async/await since this sequence has several distinct phases that must run strictly in order.

Stage two: the glitch burst

Once typing finishes and a brief 400ms pause elapses, glitchBurst(text) adds a .glitching class (which layers a chromatic-aberration-style text-shadow in cyan and pink plus a shaky glitchShake keyframe using steps(2, jump-none) for a deliberately jittery, non-smooth motion) and runs 10 frames where roughly half of each character is randomly swapped for a symbol from GLITCH_CHARS before being restored to the real text. This is a condensed, faster cousin of the full text scramble decode — here the point is a quick visual "malfunction," not a gradual left-to-right reveal.

Stage three: the gradient settle

After the glitch burst restores the correct text and removes .glitching, .final is added. This applies the same four-declaration background-clip: text gradient shimmer technique used in animated gradient text — linear-gradient background, background-size: 300% auto, background-clip: text, and -webkit-text-fill-color: transparent — animated by the shimmer keyframe. Landing on this state reads as the headline "resolving" into its final, polished form after the disruption of the glitch.

Why async/await instead of chained setTimeout

Because this sequence has four ordered phases (type, pause, glitch, settle) each with its own internal timing, writing it as one async function playSequence() with await at each step keeps the control flow linear and readable top to bottom, and makes the "Replay" button a single, safe call — typed.className = '' at the top resets all state before the whole sequence reruns from scratch.

Step by step

How to Use

  1. 1
    Watch it load, then replayThe headline types out, glitches briefly, then settles into a shimmering gradient. Click "Replay" to reset and watch the full sequence again.
  2. 2
    Change the headline textIn the JS panel, update const TEXT = "SHIP IT TODAY" to your own phrase.
  3. 3
    Adjust the typing speedChange the 55 in await wait(55) inside typeOut() — smaller values type faster.
  4. 4
    Adjust the glitch intensityIn the JS panel, change frames (currently 10) for a longer or shorter glitch burst, or the 0.5 probability threshold for how many characters glitch per frame.
  5. 5
    Change the gradient colorsEdit the linear-gradient stops on #typed.final in the CSS panel to match your brand palette.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Product launch and announcement hero moments
The type-glitch-resolve arc gives a launch headline a sense of drama and technical polish, well suited to developer tools, AI products, and tech launches.
Cyberpunk and tech-forward brand headlines
Combines the terminal feel of a typewriter with the hacker aesthetic of a glitch, resolving into a premium gradient finish for a distinctly tech-brand narrative.
Learn sequencing multiple CSS/JS effects with async/await
Study how playSequence() chains typeOut(), a pause, glitchBurst(), and a final class toggle using await, and see how much simpler this reads than the equivalent nested setTimeout callbacks.
Splash screen and loading-to-ready transitions
Use the glitch as a visual metaphor for "processing" or "compiling," with the gradient settle signaling that the product or page is now ready.
Pair with a scroll-triggered replay
Wrap playSequence() in an IntersectionObserver (see the pattern in 3D character flip reveal) to replay the full sequence each time the headline scrolls into view.
Video intro and social media hook openers
The three-act structure — type, glitch, resolve — makes a strong opening beat for a screen-recorded product demo or social video intro.

Got questions?

Frequently Asked Questions

playSequence() is written as a single async function that awaits each stage in turn: await typeOut(TEXT), a paused await wait(400), await glitchBurst(TEXT), then a synchronous class toggle for the gradient. Because each stage function itself returns a promise that resolves when its own internal timing finishes, the whole four-stage sequence reads as flat, linear code instead of deeply nested setTimeout callbacks.

glitchBurst() runs a fixed number of frames (10). On each frame, it maps over every character of the target text and, with roughly 50% probability per character (Math.random() < 0.5), replaces it with a random symbol from GLITCH_CHARS; otherwise it keeps the real character. After the last frame, the text is force-set back to the correct string so no glitch state can leak into the final display.

The blinking cursor is a visual cue that the headline is "still typing." Once typing is done, cursor.style.opacity is set to 0 before the glitch begins, since a blinking cursor next to a glitching, unstable string of characters would read as a bug rather than an intentional effect.

The glitchShake keyframe uses steps(2, jump-none) instead of the default smooth easing. steps() timing makes the transform jump between discrete positions rather than interpolating smoothly, which reads as a jittery, mechanical malfunction rather than a soft wobble.

In playSequence(), remove the await glitchBurst(TEXT) line and the cursor.style.opacity = "0" line before it, then call typed.classList.add("final") directly after the typing pause.

Yes. Click "JSX" for a React component. Manage a "stage" state (typing, glitching, final) with useState, drive the async sequence from a useEffect that runs once on mount, and derive the applied CSS class name from the current stage value.