GYUTTT

glitch your text

glitch
0 deps
~3kb
pure css

See what Gyuttt can do

Explore core behaviors running directly in real-time.

01. Random Modetrigger: 'always'

Coherent Random Palettes

Random contrast pairs selected at burst onset, eliminating strobe flickering while maintaining dynamic organic variety.

AUTONOMOUS BURST
02. Custom Colors3+ colors stacked

Chromatic Aberration

Multi-color displacement layers rendered via text-shadow without extra DOM elements or performance bottlenecks.

TRIPLE CHROMATIC
03. Visual Shapes

Preset Distortion Geometry

Switch smoothly between classic horizontal displacement, razor-thin ribbons, or 2D chunky polygon tiles.

GEOMETRIC SHAPE
04. Post-Glitch Actionauto-morph cycle

Smooth Text Replacement

Glitch effect runs before smoothly resolving into new replacement text without sudden layout shifts.

BREACH DETECTED

Installation

$pnpm add gyuttt

Usage

You can start using gyuttt by importing createGlitch and providing two parameters: target and options.

1import { createGlitch } from 'gyuttt'
2 
3// Attach to any CSS selector or HTMLElement
4const glitch = createGlitch('#title', {
5  preset: 'smooth',
6  shape: 'slice',
7  intensity: 0.7,
8  colors: ['#FF5FCF', '#00F0FF'],
9})
10 
11// Full lifecycle controls
12glitch.start()
13glitch.stop()
14glitch.destroy()

Also compatible with Vue, Svelte, or any modern framework. Check docs↗ for more details.

Playground

Settings

v0.2.0
default
Intensity0.6
Speed Multiplier1x
Real-time renderingshape: classic • preset: default

EDIT ME