Free WebGPU shader

Glitch Text: Signal lost, word found.

A glitch text effect for React: your word or logo on a phosphor CRT, tearing, rolling and splitting into color ghosts, bent by the cursor like a magnet, rendered live in WebGPU.

Open editor Meet the surface

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

Color Looks

A surface, not a screenshot.

FreeReact · Vue · HTML · WordPress · FramerRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Glitch Text.

Glitch Text puts a word, or your logo, on a phosphor picture tube and lets the signal fail the way real ones do. In short bursts lines lose horizontal sync and slide sideways, the picture loses vertical hold and rolls, macroblocks show the wrong part of the frame, and color ghosts slip apart on either side. Between bursts the screen is calm: scanlines, an aperture grille of red, green and blue stripes, halation around the letters and a slow refresh bar. The cursor is a magnet held to the glass: the picture swirls around it and the colors land apart, as the three electron guns are bent by different amounts, and entering the screen sets off a degauss wobble.

Glitch Text distorts one word or logo prepared from an image of it, not live HTML text: screen readers and search engines read the heading you keep in your page, not the canvas. It is not a font, and it does not produce copy-and-paste Unicode text like glitch text generators do.

2.687 ms GPU timestamp median; p95 3.211 ms. 1440x900 @ dpr 2; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-22. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Position

Where the word sits on the screen.

Size

How much of the screen the word fills.

Glitches

How often the signal breaks up. Zero keeps it clean.

Tearing

How far lines slide when sync is lost.

Color Looks preserve these settings. Open the editor for all 20 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

The component is already marked "use client": in Next.js, import it into any page or layout and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

Open editor & export

Markdown guide

Usage example — download GlitchText.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

npx @aperveil/cli add shader glitch-text --framework react

GlitchText usage

"use client";

import GlitchText from "./components/aperveil/glitch-text/GlitchText";

export default function Hero() {
  return (
    <GlitchText
      className="hero-shader"
      logo="/logo.svg" scale={0.62} background="#05070dff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }

Add it with npx @aperveil/cli add shader glitch-text, or download the Export Kit from the editor and copy the component into your project.

Usage example for vue/GlitchText.vue from the Export Kit. Vue 3.5 or newer, Nuxt included: it renders an empty canvas on the server and starts in the browser, so it needs no <ClientOnly>.

Terminal

npx @aperveil/cli add shader glitch-text --framework vue

GlitchText usage

<script setup lang="ts">
import GlitchText from "./components/aperveil/glitch-text/vue/GlitchText.vue";
</script>

<template>
  <GlitchText class="hero-shader" :scale="0.62" background="#05070dff">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </GlitchText>
</template>

<!-- .hero-shader { width: 100%; height: 560px; } -->

Same props and values as the React component.

Usage example for html/aperveil-glitch-text.js from the Export Kit. No install and no build step: keep the two files of the kit's html folder together.

index.html

<script type="module" src="./aperveil-glitch-text.js"></script>

<aperveil-glitch-text class="hero-shader" scale="0.62" background="#05070dff">
  <div slot="fallback" class="hero-shader-fallback"></div>
</aperveil-glitch-text>

<style>
  .hero-shader { display: block; width: 100%; height: 560px; }
</style>

Same props and values as the React component.

Download aperveil-shader-glitch-text.zip from the editor: Install, then WordPress. WordPress 6.5 or newer: a plugin with a block that holds your own content in front of the shader, and a shortcode for page builders.

Shortcode

[aperveil_glitch_text height="560px" overlay="20"]
  <h2>Your headline</h2>
  <p>Your text, in front of the shader.</p>
[/aperveil_glitch_text]

The values you choose in the editor are baked into the plugin.

Copy GlitchText.tsx from the editor: Install, then Framer. It opens on the values you chose.

In Framer, open Assets, then Code, and add a new code file named GlitchText.
Replace its sample code with your copy and save.
Drag Glitch Text onto the canvas. Its Color Looks and every control are in the property panel.

The same controls as the React component, in Framer's panel. Framer guide

Prop	Type	Default	What it does
background	`#${string}`	"#05070dff"	Screen. The dark glass of the tube. Its alpha, with Background opacity, sets how much screen is drawn. Accepts #RRGGBB or #RRGGBBAA.
textColor	`#${string}`	"#e9fbff"	Phosphor. The lit word. Accepts #RRGGBB.
glowColor	`#${string}`	"#25c8ff"	Glow. The halation around the letters. Accepts #RRGGBB.
ghostA	`#${string}`	"#ff2bd6"	Left ghost. The color ghost that slips to the left. Accepts #RRGGBB.
ghostB	`#${string}`	"#00f0ff"	Right ghost. The color ghost that slips to the right. Accepts #RRGGBB.
position	readonly [number, number]	[0.5, 0.5]	Position. Where the word sits on the screen. Accepts x 0–1, y 0–1.
scale	number	0.62	Size. How much of the screen the word fills. Accepts 0.15–1.2, step 0.01.
glitch	number	0.5	Glitches. How often the signal breaks up. Zero keeps it clean. Accepts 0–1, step 0.01.
tear	number	1	Tearing. How far lines slide when sync is lost. Accepts 0–2, step 0.01.
blocks	number	1	Corrupt blocks. How many macroblocks show the wrong part of the frame. Accepts 0–2, step 0.01.
split	number	1	Color split. How far the color ghosts slip apart. Accepts 0–2, step 0.01.
noise	number	0.6	Noise. Grain and the steady jitter of each line. Accepts 0–2, step 0.01.
glow	number	1	Glow. Phosphor halation around the letters. Accepts 0–2, step 0.01.
scanlines	number	0.6	Scanlines. Dark lines between the beam's passes. Accepts 0–1, step 0.01.
mask	number	0.5	Aperture grille. The red, green and blue stripes of the screen. Accepts 0–1, step 0.01.
curvature	number	0.35	Curvature. Bulge of the glass and its darker corners. Accepts 0–1, step 0.01.
magnet	number	1	Magnet. How strongly the cursor bends the picture around it. Accepts 0–2, step 0.01.
flowSpeed	number	1	Speed of the signal's faults. Accepts 0–3, step 0.01.
opacity	number	1	Opacity of the whole effect over the page. Accepts 0–1, step 0.01.
backgroundOpacity	number	1	Background opacity. Turn the screen off to keep only the glowing word over your page. Accepts 0–1, step 0.01.
logo	string \| null	—	Your logo. A URL to an SVG, PNG, WebP or JPEG up to 5 MB, on your own site or on a server that allows it (CORS). A mark on a transparent ground works best; on a white ground, what differs from the white becomes the mark. It is prepared in the visitor's browser. Left out, the shader shows its sample mark; null shows none.
className	string	—	Size and place the surface. The canvas fills this box, so give it a width and a height.
style	CSSProperties	—	Inline styles for the surface box.
paused	boolean	false	Holds the current frame. Use it for a pause control or for sections scrolled out of view.
fallback	ReactNode	null	Shown instead of the canvas without WebGPU. Also shown if rendering fails. A poster image or a CSS gradient works well.
onReady	() => void	—	The first frame has been drawn.
onError	(error: unknown) => void	—	Rendering failed; the fallback is shown.

background · `#${string}` = "#05070dff": Screen. The dark glass of the tube. Its alpha, with Background opacity, sets how much screen is drawn. Accepts #RRGGBB or #RRGGBBAA.
textColor · `#${string}` = "#e9fbff": Phosphor. The lit word. Accepts #RRGGBB.
glowColor · `#${string}` = "#25c8ff": Glow. The halation around the letters. Accepts #RRGGBB.
ghostA · `#${string}` = "#ff2bd6": Left ghost. The color ghost that slips to the left. Accepts #RRGGBB.
ghostB · `#${string}` = "#00f0ff": Right ghost. The color ghost that slips to the right. Accepts #RRGGBB.
position · readonly [number, number] = [0.5, 0.5]: Position. Where the word sits on the screen. Accepts x 0–1, y 0–1.
scale · number = 0.62: Size. How much of the screen the word fills. Accepts 0.15–1.2, step 0.01.
glitch · number = 0.5: Glitches. How often the signal breaks up. Zero keeps it clean. Accepts 0–1, step 0.01.
tear · number = 1: Tearing. How far lines slide when sync is lost. Accepts 0–2, step 0.01.
blocks · number = 1: Corrupt blocks. How many macroblocks show the wrong part of the frame. Accepts 0–2, step 0.01.
split · number = 1: Color split. How far the color ghosts slip apart. Accepts 0–2, step 0.01.
noise · number = 0.6: Noise. Grain and the steady jitter of each line. Accepts 0–2, step 0.01.
glow · number = 1: Glow. Phosphor halation around the letters. Accepts 0–2, step 0.01.
scanlines · number = 0.6: Scanlines. Dark lines between the beam's passes. Accepts 0–1, step 0.01.
mask · number = 0.5: Aperture grille. The red, green and blue stripes of the screen. Accepts 0–1, step 0.01.
curvature · number = 0.35: Curvature. Bulge of the glass and its darker corners. Accepts 0–1, step 0.01.
magnet · number = 1: Magnet. How strongly the cursor bends the picture around it. Accepts 0–2, step 0.01.
flowSpeed · number = 1: Speed of the signal's faults. Accepts 0–3, step 0.01.
opacity · number = 1: Opacity of the whole effect over the page. Accepts 0–1, step 0.01.
backgroundOpacity · number = 1: Background opacity. Turn the screen off to keep only the glowing word over your page. Accepts 0–1, step 0.01.
logo · string | null: Your logo. A URL to an SVG, PNG, WebP or JPEG up to 5 MB, on your own site or on a server that allows it (CORS). A mark on a transparent ground works best; on a white ground, what differs from the white becomes the mark. It is prepared in the visitor's browser. Left out, the shader shows its sample mark; null shows none.
className · string: Size and place the surface. The canvas fills this box, so give it a width and a height.
style · CSSProperties: Inline styles for the surface box.
paused · boolean = false: Holds the current frame. Use it for a pause control or for sections scrolled out of view.
fallback · ReactNode = null: Shown instead of the canvas without WebGPU. Also shown if rendering fails. A poster image or a CSS gradient works well.
onReady · () => void: The first frame has been drawn.
onError · (error: unknown) => void: Rendering failed; the fallback is shown.

Every prop is optional. Numbers are clamped to their range; an invalid value keeps the default.

THE SURFACE IN CONTEXT

Made for a real interface.

Announce a music release, a game, a tech event or a studio's showreel with its name on a failing screen: keep the heading in the page for search and accessibility, and let the canvas carry the name.

Glitch Text used behind an example interface — Illustrative layout, not a customer project. The image is a still preview of the selected Look.

An illustrative layout. Your content stays in HTML; the shader sets the atmosphere.

Try this surface in the editor

A FEW USEFUL DETAILS

Before you ship.

What this surface does, where it fits, and where it stops.

Yes. Type a word or upload a logo (SVG, PNG, WebP or JPEG) in the editor; it is prepared in your browser, and in your project you pass its URL to the component.

It acts like a magnet held to a picture tube: the picture swirls around it and the colors land apart, because the three electron guns are bent by different amounts. Entering the screen sets off a degauss wobble.

Glitches sets how often a burst comes, and zero keeps the signal clean; Tearing, Corrupt blocks and Color split set how hard each burst hits. Visitors who ask for reduced motion see a still frame.

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects.

ANOTHER WAY TO SEE IT

All video effects shaders