9x8

A CSS framework that adds corruption and chaos effects on top of 98.css. The framework is pure CSS. The demo page and build tooling use JS, but you don't need any of that to use it.

Live Demo

Clean 98.css is the desktop before you opened that email attachment. 9x8 is what happens after.

Install

npm install @noided/9x8

Or via CDN:

<!-- Base layer -->
<link rel="stylesheet" href="https://unpkg.com/98.css">
<!-- Corruption layer -->
<link rel="stylesheet" href="https://unpkg.com/@noided/9x8">

10-Level Effect System

Every effect has 10 discrete levels (1 = barely noticeable, 10 = destroyed). Apply them as classes directly to any element. The numbers are the whole API, you don't need to think about it.

Glitch Text

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 | You'd miss it if you weren't looking. Tiny color fringe, slow animation. | | glitch-2 | Slight shimmer. Something's a little off but you can't tell what. | | glitch-3 | Now you can see it. Noticeable color split, text starting to twitch. | | glitch-4 | Clearly broken. The magenta/cyan layers are pulling apart. | | glitch-5 | The default "yeah that's glitched" level. Good for error messages. | | glitch-6 | Hard to ignore. Text is actively tearing across the element. | | glitch-7 | Heavy. Multiple clip-path slices jumping around fast. | | glitch-8 | Aggressive. Color channels way off, animation getting frantic. | | glitch-9 | Barely readable. Text is shredding itself. | | glitch-10 | Gone. Just flickering color noise where text used to be. |

Screen Shake

<div class="shake-5">Earthquake</div>

| Level | What it looks like | |-------|-------------------| | shake-1 | Barely there. Like your hand bumped the desk. | | shake-2 | Slight tremor. You'd notice on a second look. | | shake-3 | Definitely shaking. Something's wrong. | | shake-4 | Getting rough. Hard drive about to fail energy. | | shake-5 | Full rattle. The whole element is bouncing around. | | shake-6 | Aggressive. Contents getting hard to read. | | shake-7 | Violent. Your monitor is falling off the desk. | | shake-8 | Seismic. Everything is just a blur of motion. | | shake-9 | Panic level. Way too fast, way too much. | | shake-10 | Genuinely hard to look at. Max displacement, max speed. |

Flicker

<div class="flicker-5">Power fluctuation</div>

| Level | What it looks like | |-------|-------------------| | flicker-1 | One tiny dip in brightness every few seconds. Almost subliminal. | | flicker-2 | Two brief flickers per cycle. You'd think you imagined it. | | flicker-3 | Loose cable energy. Clearly flickering but mostly stable. | | flicker-4 | Multiple dips per cycle. Something's definitely wrong with the power. | | flicker-5 | Can't ignore it. Regular drops to 80-85% opacity. | | flicker-6 | Bad. Drops to 50% in places. The signal is struggling. | | flicker-7 | Dying. Frequent blackouts, barely holding on. | | flicker-8 | Almost gone. Drops to 0% opacity, comes back briefly. | | flicker-9 | More off than on. Spending most of the time invisible. | | flicker-10 | Flatline. Occasional ghost flickers but functionally dead. |

Miscolor (Corrupted VGA Palette)

Hue rotation, desaturation, and contrast shifts. Looks like someone physically damaged the cable.

<div class="miscolor-5">Wrong palette</div>

| Level | What it looks like | |-------|-------------------| | miscolor-1 | Colors are just barely off. Like a monitor that needs calibrating. | | miscolor-2 | Slightly washed out. Hue shifted a couple degrees. | | miscolor-3 | Noticeably wrong. Blues are starting to look purple. | | miscolor-4 | Bad cable territory. Contrast bumped, saturation dropping. | | miscolor-5 | Wrong palette loaded. Nothing is the right color anymore. | | miscolor-6 | Getting surreal. Heavy hue shift, things look alien. | | miscolor-7 | Deep corruption. 35 degree hue rotation, washed out, cranked contrast. | | miscolor-8 | VGA card is dying. 45 degrees off, half the saturation gone. | | miscolor-9 | Barely recognizable. 60 degree shift, everything looks inverted. | | miscolor-10 | Full corruption. 80 degree rotation, 30% saturation, blown out contrast. |

Chromatic Aberration

Color channel separation via text-shadow. The RGB channels aren't lining up.

<span class="chromatic-5">Split channels</span>

| Level | What it looks like | |-------|-------------------| | chromatic-1 | 0.2px offset. You'd need to zoom in to spot it. | | chromatic-2 | 0.3px. Barely visible red/blue fringe on text edges. | | chromatic-3 | 0.5px. Now you can see the color split without squinting. | | chromatic-4 | 0.7px. Clear red and blue shadows flanking the text. | | chromatic-5 | 1px. Obvious channel separation. Good general-purpose level. | | chromatic-6 | 1.3px. Text is getting that 3D glasses look. | | chromatic-7 | 1.6px. Heavy fringing. Hard to read at small sizes. | | chromatic-8 | 2px. Red and blue copies clearly visible as separate layers. | | chromatic-9 | 2.5px. Three distinct color layers, text is tripled. | | chromatic-10 | 3px. Full channel blowout. Each color is its own ghost. |

CRT Overlay

Scanlines, RGB subpixels, and vignette. Apply to a container element.

<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. You'd only notice on a light background. | | crt-2 | Subtle horizontal lines. Just enough to feel retro. | | crt-3 | Clearly visible scanlines. Reads as "old monitor" immediately. | | crt-4 | Scanlines + RGB subpixel fringe kicks in. Getting authentic. | | crt-5 | Solid CRT feel. Scanlines are prominent, subpixels visible. | | crt-6 | Vignette mask starts. Edges darken, center stays bright. | | crt-7 | Heavy. Dark scanlines, strong subpixels, noticeable vignette. | | crt-8 | Thick scanlines eating into readability. Dark edges. | | crt-9 | Like looking through a dying monitor. Heavy on everything. | | crt-10 | Maximum. Dense scanlines, strong vignette, full subpixel grid. |

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

Melty Windows

Windows that look like they're melting. 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 slightly out of focus. | | melty-2 | Slight blur + barely noticeable skew. | | melty-3 | Visible warp. Window is starting to lean and soften. | | melty-4 | Title bar starts dripping (mask edge). Getting weird. | | melty-5 | Dripping border-image kicks in. Window is actively melting. | | melty-6 | Heavy skew, more blur. The whole thing is sliding downward. | | melty-7 | Pronounced melt. Borders dripping, title bar dissolving. | | melty-8 | Saturated blur. Colors bleeding, everything warped. | | melty-9 | Severe. 1.8px blur, 1.3 degree skew, heavy drip borders. | | melty-10 | Puddle. 2.2px blur, full skew, window is barely holding shape. |

Pixelated Windows

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. Almost invisible. | | 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 is visible, colors washing. | | pixelated-6 | Obvious grid. Window looks like it's being rendered wrong. | | pixelated-7 | Color fringing (magenta/cyan box-shadow). VRAM is struggling. | | pixelated-8 | Dense crosshatch grid. Heavy contrast, washed colors, strong fringe. | | pixelated-9 | Severe. Offset color shadows, everything looks like a bad signal. | | pixelated-10 | Full VRAM failure. Max contrast, 40% saturation, dense grid, color blowout. |

Corrupted Progress Bars

Works with 98.css .progress-indicator. These three cover basically every bad installer experience you've ever had.

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

Die Mid-Render

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

Popup Cascade

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

Error Dialogs

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

BSoD

<div class="bsod">
  <div class="bsod-content">
    <span class="bsod-title">Windows</span>
    A fatal exception 0E has occurred at 0028:C0034B03
  </div>
</div>

Combining Effects

Effects stack. Just pile on the classes:

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

Accessibility

All animations respect prefers-reduced-motion. When reduced motion is preferred, animations are disabled and only static visual effects (color shifts, scanline textures) remain.

Development

npm install
npm run build    # Build dist/9x8.css + dist/9x8.min.css
npm run dev      # Watch mode, rebuilds on changes

Credits

Built on top of 98.css by Jordan Scales (MIT License). Full credit to the 98.css project for the foundation this chaos sits on.

License

MIT