# Glitch Text

Aperveil / Light, shaped for the web.

Collection: Free, available now.

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.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

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.

## Choose it for

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.

## Limits

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.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/glitch-text/edit?look=default&scene=landing)

## Landing scene

This preview uses `position`: [0.68,0.52], `scale`: 0.42. The editor link carries these settings with your Look, except the placement: the editor keeps the shader centred. Direct editor visits use the product defaults; Reset all restores those defaults.

## Install

Install editable source with the CLI; it installs shared dependencies automatically. Free needs no login. ZIP Export Kits are also available.

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

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.

```tsx
"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; }
```

Component props: `background`, `textColor`, `glowColor`, `ghostA`, `ghostB`, `position`, `scale`, `glitch`, `tear`, `blocks`, `split`, `noise`, `glow`, `scanlines`, `mask`, `curvature`, `magnet`, `flowSpeed`, `opacity`, `backgroundOpacity`, `logo`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

### Vue and Nuxt

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

```vue
<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; } -->
```

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>. Same props as the React component.

### Plain HTML

```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>
```

No install and no build step: keep the two files of the kit's html folder together.

### WordPress

Download `aperveil-shader-glitch-text.zip` from the editor (Install, then WordPress) and upload it under Plugins, Add New, Upload Plugin. 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. In the block editor, add the "Glitch Text" block (Design) and place your blocks inside it; in a page builder, use the shortcode:

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

### Framer

Copy `GlitchText.tsx` from the editor (Install, then Framer); it opens on the values you chose. In Framer, add a new code file (Assets, Code), replace its sample code with the copy, then drag Glitch Text onto the canvas: its Color Looks and every control are in the property panel. [Framer guide](https://www.aperveil.com/docs/framer).

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Screen (`background`, color): The dark glass of the tube. Its alpha, with Background opacity, sets how much screen is drawn.
- Phosphor (`textColor`, color): The lit word.
- Glow (`glowColor`, color): The halation around the letters.
- Left ghost (`ghostA`, color): The color ghost that slips to the left.
- Right ghost (`ghostB`, color): The color ghost that slips to the right.
- Position (`position`, xy): Where the word sits on the screen.
- Size (`scale`, slider): How much of the screen the word fills.
- Glitches (`glitch`, slider): How often the signal breaks up. Zero keeps it clean.
- Tearing (`tear`, slider): How far lines slide when sync is lost.
- Corrupt blocks (`blocks`, slider): How many macroblocks show the wrong part of the frame.
- Color split (`split`, slider): How far the color ghosts slip apart.
- Noise (`noise`, slider): Grain and the steady jitter of each line.
- Glow (`glow`, slider): Phosphor halation around the letters.
- Scanlines (`scanlines`, slider): Dark lines between the beam's passes.
- Aperture grille (`mask`, slider): The red, green and blue stripes of the screen.
- Curvature (`curvature`, slider): Bulge of the glass and its darker corners.
- Magnet (`magnet`, slider): How strongly the cursor bends the picture around it.
- Speed (`flowSpeed`, slider): Speed of the signal's faults.
- Opacity (`opacity`, slider): Opacity of the whole effect over the page.
- Background opacity (`backgroundOpacity`, slider): Turn the screen off to keep only the glowing word over your page.

## Compatibility

WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout.

## Performance

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.

## Questions

### Can I use my own text or logo?

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.

### What does the cursor do?

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.

### Can the glitches be calmer?

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.

### What happens without WebGPU?

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.

### Can I use this shader commercially?

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.

## License

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.

## Related shaders

- [VHS Tape](https://www.aperveil.com/shaders/vhs-tape)
- [Livemark](https://www.aperveil.com/shaders/livemark)
- [Thermal Vision](https://www.aperveil.com/shaders/thermal-vision)