RSK World - Glitch Text Effect | Cyberpunk Glitch, RGB Split, Distortion | RSK World

Classic & Color Heavy & Clip-Path RGB & 3D Skew Scramble & Blur Vanilla JS

Glitch Text Effect is a cyberpunk-style glitch text demo with 10 variants. Features: classic distortion, color shift, heavy glitch, clip-path slice, subtle flicker, 3D skew, RGB split, CRT scanlines, text scramble (JS), blur channel. Control panel: intensity, speed, scanlines, noise, 6 themes (Cyberpunk, Matrix, Synthwave, Vaporwave, Terminal, Monochrome), presets, glitch burst (G), fullscreen demo, copy CSS snippet. Custom text input with style picker; hover glitch. HTML, CSS, Vanilla JavaScript. By rskworld.in.

If you find this Glitch Text Effect project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Glitch Text Effect

10 Glitch Styles

Classic (glitch-1), Color Shift (glitch-2), Heavy (glitch-3), Clip-Path (glitch-4), Flicker (glitch-5), 3D Skew (glitch-3d), RGB Split (glitch-rgb), CRT (glitch-crt), Scramble (glitch-scramble), Blur (glitch-blur). Each uses ::before/::after with data-text, clip-path, translate, and keyframes.

Pseudo-elements: content: attr(data-text)
Red/cyan or magenta/cyan color channels
clip-path polygon for slice effects
CSS variables: --glitch-intensity, --glitch-speed

Project Structure & Files

glitch-text/ with index.html (demo with control panel and 10 styles), styles.css (keyframes, themes, scanlines, noise), script.js (controls, custom text, scramble, fullscreen, copy CSS). No build step. Open index.html or serve folder.

glitch-text/ – index.html, styles.css, script.js, README.md, LICENSE
No build step – open index.html or static server
Fonts: Orbitron, Share Tech Mono (Google Fonts)
Zero dependencies; vanilla HTML, CSS, JavaScript

Control Panel & Themes

Intensity and speed sliders (CSS vars). Scanlines and noise toggles. Theme select: Cyberpunk, Matrix, Synthwave, Vaporwave, Terminal, Monochrome. Presets: Mild, Medium, Heavy. Pause all animations. Glitch burst (G key).

Intensity/Speed – --glitch-intensity, --glitch-speed
Themes override --text-primary, --glitch-red, --glitch-blue
body classes: scanlines-off, noise-off, animations-paused
Glitch burst adds body.glitch-burst for hero title

Custom Text & Fullscreen

Custom text input (max 24 chars) with style dropdown and random style. Fullscreen demo shows current glitch in overlay; Copy CSS snippet for minimal glitch code. Shortcuts: G = burst, ? = help, Esc = close, Space = trigger scramble.

Custom text – #custom-glitch synced with #custom-text
Fullscreen – overlay with same style (scramble → glitch-1)
Copy CSS – navigator.clipboard.writeText(snippet)
Shortcuts modal – keyboard help

Text Scramble & Hover

Style 9: scramble chars from set, interval every 2.5s and on click/Space. Hover glitch: .glitch-hover shows red/cyan layers on container hover. data-text kept in sync by script for all .glitch elements.

Scramble – random chars then reveal original
Hover – ::before/::after opacity on .glitch-container:hover
syncDataText() – data-text from textContent where missing
Script: IIFE, no globals

What You Get

Static HTML/CSS/JS: glitch-text/ folder with index.html, styles.css, script.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – glitch-text/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Use control panel for intensity, speed, scanlines, noise, theme, presets. Type in custom text and pick style. G for burst, ? for shortcuts. Fullscreen demo and Copy CSS snippet available.

glitch-text/index.html – single demo page with controls
script.js: applyIntensity, applyTheme, scramble, fullscreen
Accessibility: aria-labels, aria-hidden on decorative
Author: Molla Samser | rskworld.in

Project Features

10 glitch styles (classic, color shift, heavy, clip-path, flicker, 3D skew, RGB split, CRT, scramble, blur), control panel (intensity, speed, scanlines, noise, themes, presets), custom text, fullscreen, copy CSS, shortcuts.