npm package: @noided/9x8
Description: Corrupted Windows 98 CSS framework. The chaos layer on top of 98.css.
Author: CloudtoMetal
Latest version: 0.2.0

# 9x8

A CSS framework that adds corruption and chaos effects on top of [98.css](https://github.com/jdan/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](https://noided.org/9x8-demo.html)**

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

## Install

```bash
npm install @noided/9x8
```

Or via CDN:

```html
<!-- 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).

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

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

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

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

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

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

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

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

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

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

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

```html
<div class="window warning">...</div>
<div class="window error">...</div>
<div class="window critical">...</div>  <!-- Flashing title bar -->
```

### BSoD

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

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

```bash
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](https://github.com/jdan/98.css) by [Jordan Scales](https://github.com/jdan) (MIT License). Full credit to the 98.css project for the foundation this chaos sits on.

## License

MIT