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>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Typewriter Glitch Gradient Reveal — Kinetic Text JS

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

TagsText EffectsCSS AnimationMicro-Interactions

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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to walk through exactly how playSequence() uses async/await to guarantee the four stages run strictly in order, and why glitchBurst() force-sets the text back to the correct string after its last frame rather than trusting the random loop to land on the right characters by chance. It's also worth an accessibility conversation: ask how you would respect prefers-reduced-motion by skipping straight to the final gradient state for users who have that preference enabled, since the type-glitch-shake sequence is a lot of motion. For extending it, ask for a version where the glitch intensity is proportional to headline length, one that adds a brief audio "static" sound synced to the glitch frames, or one where the final gradient state itself responds to scroll position instead of animating on a fixed loop. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a headline animation that types out character by character, briefly glitches through random symbols, and then settles into a continuously shimmering animated gradient, in plain HTML, CSS, and vanilla JavaScript — no animation library, sequenced with async/await.

Requirements:
- A typing stage that appends one character of a target phrase to a display element every fixed interval, with a separate blinking CSS cursor element visible only during this stage (hidden once typing completes and before the glitch stage begins).
- A short pause after typing finishes, before the glitch stage starts.
- A glitch stage that, for a fixed number of frames, replaces roughly half of the phrase's characters (chosen randomly each frame, preserving spaces) with random symbols from a small glitch character set, while a CSS class applies both a chromatic-aberration-style text-shadow (offset colored shadows) and a jittery shake animation using stepped (not smooth) timing; after the last frame, the text must be force-restored to the exact correct phrase and the glitch class removed.
- A final stage that applies a multi-stop animated linear-gradient text fill (using background-clip: text and a transparent text fill color, animated via background-position) that shimmers continuously and indefinitely once reached.
- The whole four-stage sequence (type, pause, glitch, gradient) must be written as a single async function using await between stages rather than nested setTimeout callbacks, and must be replayable via a button that resets all applied classes and state before rerunning the full sequence from the beginning.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

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.