A CSS corruption layer for 98.css. Pure CSS. No JS required. The demo page uses JS, but the framework doesn't need it. Doesn't need anything. That's the point.
98.css is the desktop before you opened that email attachment. 9x8 is what happens after.
npm install @noided/9x8Or via CDN:
<!-- Base layer -->
<link rel="stylesheet" href="https://unpkg.com/98.css">
<!-- Corruption layer -->
<link rel="stylesheet" href="https://unpkg.com/@noided/9x8">Every effect has 10 levels. 1 is "something's not right." 10 is "it's over." Apply them as classes. The numbers are the whole API.
Chromatic aberration + clip-path tearing on text. Requires a data-text attribute (has to match the text content).
<span class="glitch-5" data-text="ERROR">ERROR</span>| Level | What it looks like |
|---|---|
glitch-1 |
Subpixel twitch. You'd talk yourself out of seeing it. |
glitch-2 |
Faint shimmer. Your eyes aren't wrong. Something moved. |
glitch-3 |
Color split visible now. The text knows you're watching. |
glitch-4 |
Magenta and cyan pulling apart. No longer deniable. |
glitch-5 |
Default "something went wrong" energy. Good for error states. |
glitch-6 |
Text tearing across the element. It's not a suggestion anymore. |
glitch-7 |
Multiple clip-path slices. Fast. Angry. |
glitch-8 |
Color channels way off. The animation is losing its composure. |
glitch-9 |
Barely readable. Text is eating itself. |
glitch-10 |
Gone. Flickering color noise where words used to be. |
<div class="shake-5">Earthquake</div>| Level | What it looks like |
|---|---|
shake-1 |
Someone bumped the desk. Maybe. |
shake-2 |
Tremor. Blink and you'd miss it. Don't blink. |
shake-3 |
Something's wrong with the mount. |
shake-4 |
Hard drive failure energy. Mechanical sympathy. |
shake-5 |
Full rattle. The element has given up staying still. |
shake-6 |
Contents getting hard to read. That's the point. |
shake-7 |
Your monitor just fell off the desk. |
shake-8 |
Seismic. Everything is motion blur now. |
shake-9 |
Way too fast. Way too much. You did this to yourself. |
shake-10 |
Genuinely hard to look at. Max everything. |
<div class="flicker-5">Power fluctuation</div>| Level | What it looks like |
|---|---|
flicker-1 |
One dip every few seconds. Almost subliminal. Almost. |
flicker-2 |
Two brief flickers per cycle. You'd think you imagined it. You didn't. |
flicker-3 |
Loose cable. Clearly flickering but still mostly there. |
flicker-4 |
Multiple dips. Something is wrong with the power. |
flicker-5 |
Regular drops to 80-85% opacity. Can't ignore it anymore. |
flicker-6 |
Drops to 50%. The signal is losing. |
flicker-7 |
Frequent blackouts. Barely holding on. |
flicker-8 |
Drops to 0%, comes back briefly. Visiting, not staying. |
flicker-9 |
More off than on. Spending most of its time invisible. |
flicker-10 |
Flatline. Occasional ghost flickers. Functionally dead. |
Hue rotation, desaturation, contrast shifts. Looks like someone took pliers to the cable.
<div class="miscolor-5">Wrong palette</div>| Level | What it looks like |
|---|---|
miscolor-1 |
Colors barely off. Like a monitor that needs calibrating but nobody will. |
miscolor-2 |
Slightly washed out. Hue shifted a couple degrees. Gaslighting territory. |
miscolor-3 |
Blues are turning purple. That's not right. |
miscolor-4 |
Bad cable. Contrast bumped, saturation dropping. |
miscolor-5 |
Wrong palette loaded. Nothing is the right color anymore. |
miscolor-6 |
Heavy hue shift. Things look alien. Things are alien. |
miscolor-7 |
35 degree rotation. Washed out. Cranked contrast. Deep corruption. |
miscolor-8 |
VGA card is dying. 45 degrees off, half the saturation gone. |
miscolor-9 |
60 degree shift. Barely recognizable. Everything looks inverted. |
miscolor-10 |
80 degree rotation. 30% saturation. Blown out. Full corruption. |
Color channel separation via text-shadow. The RGB channels aren't lining up. They won't.
<span class="chromatic-5">Split channels</span>| Level | What it looks like |
|---|---|
chromatic-1 |
0.2px offset. You'd need to zoom in. Most people won't. |
chromatic-2 |
0.3px. Red/blue fringe on text edges. Barely there. |
chromatic-3 |
0.5px. Visible without squinting now. |
chromatic-4 |
0.7px. Red and blue shadows flanking the text. Obvious. |
chromatic-5 |
1px. Clear channel separation. Good general-purpose level. |
chromatic-6 |
1.3px. 3D glasses look. Nobody asked for this. |
chromatic-7 |
1.6px. Heavy fringing. Small text is gone. |
chromatic-8 |
2px. Red and blue are separate layers now. They're not coming back. |
chromatic-9 |
2.5px. Three distinct color layers. Text is tripled. |
chromatic-10 |
3px. Full channel blowout. Each color is its own ghost. |
Scanlines, RGB subpixels, and vignette. Apply to a container.
<div class="crt-5">
<div class="crt-beam"></div>
<p class="phosphor-green">Terminal text...</p>
</div>| Level | What it looks like |
|---|---|
crt-1 |
Faintest scanlines. Only visible on light backgrounds. |
crt-2 |
Subtle horizontal lines. Just enough to feel old. |
crt-3 |
Reads as "old monitor" immediately. No ambiguity. |
crt-4 |
RGB subpixel fringe kicks in. Getting authentic. |
crt-5 |
Solid CRT feel. Scanlines prominent, subpixels visible. |
crt-6 |
Vignette starts. Edges darken. The screen is closing in. |
crt-7 |
Heavy on everything. Dark scanlines, strong subpixels, noticeable vignette. |
crt-8 |
Scanlines eating into readability. Edges going dark. |
crt-9 |
Dying monitor. You can feel the heat coming off it. |
crt-10 |
Maximum. Dense scanlines, strong vignette, full subpixel grid. This is how it ends. |
Extra CRT pieces:
.crt-beam- the moving refresh line (add as a sibling element).phosphor-green- green terminal glow.phosphor-amber- amber terminal glow.phosphor- glow using whatever the current color is
Your UI is having a very bad time.
<div class="window melty-5">...</div>| Level | What it looks like |
|---|---|
melty-1 |
Tiny blur. Like your eyes are wrong. They're not. |
melty-2 |
Slight blur + barely noticeable skew. Warming up. |
melty-3 |
Window is starting to lean and soften. Gravity wins eventually. |
melty-4 |
Title bar starts dripping. Getting weird. |
melty-5 |
Dripping border-image kicks in. Actively melting now. |
melty-6 |
Heavy skew, more blur. The whole thing is sliding. |
melty-7 |
Borders dripping, title bar dissolving. Pronounced melt. |
melty-8 |
Colors bleeding. Everything warped. Saturated blur. |
melty-9 |
1.8px blur, 1.3 degree skew, heavy drip borders. Severe. |
melty-10 |
Puddle. Window is barely holding shape. It won't hold much longer. |
Failing video memory. Contrast cranked, saturation dying, grid artifacts showing through.
<div class="window pixelated-5">...</div>| Level | What it looks like |
|---|---|
pixelated-1 |
Pixel rendering hint + tiny contrast bump. You wouldn't notice. |
pixelated-2 |
Slightly crunchy. 5% extra contrast. |
pixelated-3 |
Noticeable crunch. Saturation starting to dip. |
pixelated-4 |
Grid overlay appears. Faint vertical lines through the window. |
pixelated-5 |
Title bar gets color banding. Grid visible. Colors washing out. |
pixelated-6 |
Obvious grid. Rendering is wrong and it knows it. |
pixelated-7 |
Magenta/cyan box-shadow fringing. VRAM is struggling. |
pixelated-8 |
Dense crosshatch grid. Heavy contrast, washed colors, strong fringe. |
pixelated-9 |
Offset color shadows. Everything looks like a bad signal. |
pixelated-10 |
Full VRAM failure. Max contrast, 40% saturation, dense grid, color blowout. |
Works with 98.css .progress-indicator. Three flavors. You've seen all of them before. You didn't enjoy it then either.
<!-- Goes backwards -->
<div class="regress">
<div class="progress-indicator">
<div class="progress-indicator-bar" style="width: 100%;"></div>
</div>
</div>
<!-- Stuck at 99% forever -->
<div class="progress-stuck">
<div class="progress-indicator">
<div class="progress-indicator-bar"></div>
</div>
</div>
<!-- Jumps around erratically -->
<div class="progress-erratic">
<div class="progress-indicator">
<div class="progress-indicator-bar"></div>
</div>
</div><div class="die">Partially renders, then freezes</div>
<div class="die-slow">Slow death</div>
<div class="die-instant">Instant death</div>
<div class="die-corrupt">Dies with increasing distortion</div>Stack 98.css windows in a cascade storm:
<div class="cascade cascade-chaotic">
<div class="window error"><div class="title-bar">...</div></div>
<div class="window error"><div class="title-bar">...</div></div>
<div class="window error"><div class="title-bar">...</div></div>
</div>Variants: .cascade-orderly, .cascade-chaotic, .cascade-overwhelming
Extends 98.css .window with severity styling:
<div class="window warning">...</div>
<div class="window error">...</div>
<div class="window critical">...</div> <!-- Flashing title bar --><div class="bsod">
<div class="bsod-content">
<span class="bsod-title">Windows</span>
A fatal exception 0E has occurred at 0028:C0034B03
</div>
</div>Stack them. Pile on the classes. Nobody's stopping you.
<!-- Melting, flickering, miscolored window -->
<div class="window melty-6 flicker-4 miscolor-3">
<div class="title-bar">...</div>
<div class="window-body">...</div>
</div>
<!-- Glitchy text inside a CRT terminal -->
<div class="crt-8">
<p class="phosphor-green chromatic-5">
<span class="glitch-7" data-text="CORRUPTED">CORRUPTED</span>
</p>
</div>
<!-- Shaking, pixelated error dialog -->
<div class="window error shake-4 pixelated-5">...</div>All animations respect prefers-reduced-motion. Reduced motion disables animations; static visual effects (color shifts, scanline textures) remain.
npm install
npm run build # Build dist/9x8.css + dist/9x8.min.css
npm run dev # Watch mode, rebuilds on changesBuilt on 98.css by Jordan Scales (MIT License). Full credit to 98.css for the foundation this chaos sits on.
MIT