Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/dotaadarsh/css-centering-nemesis


https://github.com/dotaadarsh/css-centering-nemesis

Last synced: 13 days ago
JSON representation

Awesome Lists containing this project

README 

          
# CSS Centering Nemesis™



> *"Why fix what AI can infinitely break?"*



**CSS Centering Nemesis™** is the world's first, last, and only enterprise-grade platform engineered to take your perfectly centered div and annihilate it — with live before/after CSS visualization, a 3D Three.js background, and a blockchain certificate of destruction.



Built as a submission for the [DEV April Fools Challenge 2026](https://dev.to/challenges/aprilfools-2026). It solves zero real-world problems. It is deeply, lovingly overengineered. No regrets.



---



![CSS Centering Nemesis™](https://img.shields.io/badge/version-4.20.0--chaotic-red?style=flat-square)

![LOREM™ Certified](https://img.shields.io/badge/LOREM%E2%84%A2-certified-orange?style=flat-square)

![Zero Dependencies](https://img.shields.io/badge/dependencies-0-green?style=flat-square)

![SOC-2](https://img.shields.io/badge/SOC--2-uncompliant-red?style=flat-square)

![Blockchain](https://img.shields.io/badge/blockchain-fictional-purple?style=flat-square)

![Centering](https://img.shields.io/badge/centering-destroyed-FF2020?style=flat-square)



---



## 🚀 Live Demo



👉 Try it here → [CSS Centering Nemesis](https://dotaadarsh.github.io/CSS-Centering-Nemesis/)



Or just download `index.html` and open it. No install. No build step. No npm.



---



## ✨ What It Does



You paste in a CSS selector. You pick a chaos preset. You click **⚡ UN-CENTER THIS DIV**.



The engine generates CSS specifically designed to destroy your layout, and renders the result live in two side-by-side iframes — your original centered CSS on the left, the generated chaos CSS on the right — so you can watch your div flee in real time.



### Live CSS Visualization (the main feature)



| Pane | Color | What it shows |

|---|---|---|

| BEFORE | 🟢 Green | Your input CSS, rendered in a real iframe, updated as you type |

| AFTER | 🔴 Red | The generated chaos CSS applied to the same element |



Both panes render actual CSS inside `` documents. The browser applies the styles for real. You see exactly what each chaos rule does to the layout.



### Code Tabs



Three tabs below the visualization:



- **Input CSS** — your properties highlighted in green, live-updating

- **Generated Chaos CSS** — the full output with red values, `!important` flags, optional `@keyframes`

- **Diff View** — struck-through red lines for what was removed, green lines for what was added



---



## 🌌 Features



### Core Engine

- **4 centering modes** — Flexbox, Grid, Absolute, Margin:auto — each with its own CSS property pool

- **5 chaos presets** from Mercury Retrograde (1x) to TAMU — Theoretical Anti-Margin Universe (42x)

- **4 chaos modifiers** — `!important` spray, vendor prefix nostalgia, enterprise comments, `@keyframes flee-from-center`

- Generated CSS is **copy-pasteable** and will work in any browser (just terribly)



### Chaos Presets



| Preset | Amplifier | Cosmic Event |

|---|---|---|

| 🌘 Mild | 1x | Mercury Retrograde |

| 🌑 Moderate | 2.5x | Solar Flare |

| 🌌 Severe | 5x | Jupiter Alignment |

| 🕳️ Cataclysmic | 9.9x | Black Hole Nearby |

| 👁️ TAMU | **42x** | Theoretical Anti-Margin Universe |



At **Severe+**, the engine adds `animation: flee-from-center` with a mathematically implausible `cubic-bezier`, plus `will-change: position, sanity, will-to-live`.



At **TAMU (42x)**, it injects `--cosmic-ray-flux: XX% !important` and a `transform` that flings your div using the live cosmic ray reading as the actual pixel offset.



### Live Sliders (all affect the iframe directly)

- **Wobble Intensity (0–10)** — drives a `setInterval` that reaches into the after-iframe's DOM and shakes the rendered element

- **Glitch Severity (0–5)** — applies clip-path cuts and hue-rotate flickers to the live rendered element

- **Existential Dread (0–10)** — desaturates the entire UI toward grayscale as your dread increases



### Delightfully Useless Right Panel

- **AI Confidence Meter** — displays what percentage it's sure this will break your layout (always high)

- **Div Personality Profile™** — attachment style, MBTI type, trauma response, love language, therapy status

- **Chaos Horoscope™** — astrological readings calibrated specifically to CSS failures

- **Competitor Analysis™** — benchmarks your CSS against CSS Tricks, Stack Overflow, W3Schools

- **Blockchain Certificate™** — auto-refreshing fake tx hashes on CSSchain Mainnet

- **Div Zodiac Sign™** — your div gets a new sign after every destruction



### Modals

- **Mint Chaos NFT™** — full NFT metadata, rarity tier, value: 0.000 ETH

- **Explain to PM™** — auto-generated stakeholder report (ROI: Negative, but vibes)

- **Incident Report™** — P0 severity writeup, post-mortem scheduled for never



### Dashboard

- 6 live stats: Divs Destroyed, CSS Lines Emitted, Chaos Index™, Cosmic Ray Flux %, AI Confidence %, Karma Debt

- 5 chaos meters: Alignment Destruction, Flexbox Rebellion, Cosmic Ray Influence, Centering Resistance, Designer Tears Absorbed

- 8 live chaos factor toggles that drift their values every 3 seconds

- Rolling audit log strip pinned to the bottom



### 3D Background

- 70 floating wireframe cubes via Three.js

- Camera follows mouse with lerp smoothing

- On UN-CENTER: chaos mode fires, all cube velocities multiply 5x for ~50 frames

- 300 ambient red particles



---



## 🚀 Getting Started



### Option 1 — Open directly (recommended)



```bash

git clone https://github.com/your-username/css-centering-nemesis.git

cd css-centering-nemesis

open index.html

```



That's it. No install step. No `npm install`. No build pipeline.



### Option 2 — GitHub Pages



1. Fork this repo

2. Go to **Settings → Pages**

3. Set source to `main` branch, `/ (root)` folder

4. Visit `https://your-username.github.io/css-centering-nemesis`



### Option 3 — Netlify drag & drop



Drag the `index.html` file onto [netlify.com/drop](https://app.netlify.com/drop). Done.



---



## 📋 Usage



### Basic flow



1. Type your CSS selector + properties in the **Input CSS** field

2. Select your centering **Mode** (Flexbox / Grid / Absolute / Margin)

3. Pick a **Chaos Preset**

4. Click **⚡ UN-CENTER THIS DIV**

5. Watch both preview panes update

6. Copy the generated CSS with the **Copy CSS** button



### Example inputs to try



```css

/* Classic hero section */

.hero { display: flex; justify-content: center; align-items: center; }



/* Grid centering */

.card-grid { display: grid; place-items: center; gap: 24px; }



/* The one that took 3 Stack Overflow tabs */

.vertically-centered { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; }



/* The loading spinner */

.spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }



/* TAMU preset bait */

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }

```



Pair any of these with **TAMU preset + @keyframes modifier + Wobble at 10** for maximum existential damage.



---



## 🏗️ How It Works



### Architecture



The entire app is a single HTML file (~1,100 lines). No framework, no bundler, no dependencies except Three.js from a CDN.



```

index.html

├──           CSS variables, layout, component styles (~450 lines)

├── <body>           HTML structure — shell, header, stats, 3-col grid, modals

├── Three.js         CDN: cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js

└── <script>         App logic (~650 lines)

    ├── Three.js setup     70 cubes, 300 particles, mouse lerp

    ├── State              mode, factors, chaosTypes, lastChaosRules

    ├── CSS Parser         extractPropsFromInput() — regex + split

    ├── iframe Builder     buildPreviewHTML() — generates srcdoc strings

    ├── generateChaos()    core engine — shuffles pool, picks values, builds HTML

    ├── Tab views          showInputCode(), showChaosCode(), showDiff()

    ├── Right panel        updatePersonality(), updateZodiac(), updateHoroscope()

    ├── Sliders            wobble/glitch reach into iframe contentDocument

    └── Modals             NFT, PM explanation, incident report

```



### The live CSS visualization



The key technique is `iframe.srcdoc` — each preview pane is an iframe whose full HTML document is set via JavaScript:



```javascript

function buildPreviewHTML(selector, rules, isAfter) {

  const cssProps = rules.map(([p, v]) => `${p}:${v};`).join('');



  return `<!DOCTYPE html><html><head><style>

    .wrapper { width:100%; height:100%; ${cssProps} }

    .item { /* styled box */ }

  

    


      
${elemClass}