{"id":51590501,"url":"https://github.com/dotaadarsh/css-centering-nemesis","last_synced_at":"2026-07-11T14:02:21.951Z","repository":{"id":350792946,"uuid":"1208160779","full_name":"dotAadarsh/CSS-Centering-Nemesis","owner":"dotAadarsh","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-12T04:44:13.000Z","size":55,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-12T06:21:50.022Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dotAadarsh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-11T22:42:38.000Z","updated_at":"2026-04-12T04:44:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dotAadarsh/CSS-Centering-Nemesis","commit_stats":null,"previous_names":["dotaadarsh/css-centering-nemesis"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dotAadarsh/CSS-Centering-Nemesis","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotAadarsh%2FCSS-Centering-Nemesis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotAadarsh%2FCSS-Centering-Nemesis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotAadarsh%2FCSS-Centering-Nemesis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotAadarsh%2FCSS-Centering-Nemesis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dotAadarsh","download_url":"https://codeload.github.com/dotAadarsh/CSS-Centering-Nemesis/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotAadarsh%2FCSS-Centering-Nemesis/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35364269,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-11T02:00:05.354Z","response_time":104,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-11T14:02:20.168Z","updated_at":"2026-07-11T14:02:21.943Z","avatar_url":"https://github.com/dotAadarsh.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Centering Nemesis™\n\n\u003e *\"Why fix what AI can infinitely break?\"*\n\n**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.\n\nBuilt 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.\n\n---\n\n![CSS Centering Nemesis™](https://img.shields.io/badge/version-4.20.0--chaotic-red?style=flat-square)\n![LOREM™ Certified](https://img.shields.io/badge/LOREM%E2%84%A2-certified-orange?style=flat-square)\n![Zero Dependencies](https://img.shields.io/badge/dependencies-0-green?style=flat-square)\n![SOC-2](https://img.shields.io/badge/SOC--2-uncompliant-red?style=flat-square)\n![Blockchain](https://img.shields.io/badge/blockchain-fictional-purple?style=flat-square)\n![Centering](https://img.shields.io/badge/centering-destroyed-FF2020?style=flat-square)\n\n---\n\n## 🚀 Live Demo\n\n👉 Try it here → [CSS Centering Nemesis](https://dotaadarsh.github.io/CSS-Centering-Nemesis/)\n\nOr just download `index.html` and open it. No install. No build step. No npm.\n\n---\n\n## ✨ What It Does\n\nYou paste in a CSS selector. You pick a chaos preset. You click **⚡ UN-CENTER THIS DIV**.\n\nThe 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.\n\n### Live CSS Visualization (the main feature)\n\n| Pane | Color | What it shows |\n|---|---|---|\n| BEFORE | 🟢 Green | Your input CSS, rendered in a real iframe, updated as you type |\n| AFTER | 🔴 Red | The generated chaos CSS applied to the same element |\n\nBoth panes render actual CSS inside `\u003ciframe srcdoc\u003e` documents. The browser applies the styles for real. You see exactly what each chaos rule does to the layout.\n\n### Code Tabs\n\nThree tabs below the visualization:\n\n- **Input CSS** — your properties highlighted in green, live-updating\n- **Generated Chaos CSS** — the full output with red values, `!important` flags, optional `@keyframes`\n- **Diff View** — struck-through red lines for what was removed, green lines for what was added\n\n---\n\n## 🌌 Features\n\n### Core Engine\n- **4 centering modes** — Flexbox, Grid, Absolute, Margin:auto — each with its own CSS property pool\n- **5 chaos presets** from Mercury Retrograde (1x) to TAMU — Theoretical Anti-Margin Universe (42x)\n- **4 chaos modifiers** — `!important` spray, vendor prefix nostalgia, enterprise comments, `@keyframes flee-from-center`\n- Generated CSS is **copy-pasteable** and will work in any browser (just terribly)\n\n### Chaos Presets\n\n| Preset | Amplifier | Cosmic Event |\n|---|---|---|\n| 🌘 Mild | 1x | Mercury Retrograde |\n| 🌑 Moderate | 2.5x | Solar Flare |\n| 🌌 Severe | 5x | Jupiter Alignment |\n| 🕳️ Cataclysmic | 9.9x | Black Hole Nearby |\n| 👁️ TAMU | **42x** | Theoretical Anti-Margin Universe |\n\nAt **Severe+**, the engine adds `animation: flee-from-center` with a mathematically implausible `cubic-bezier`, plus `will-change: position, sanity, will-to-live`.\n\nAt **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.\n\n### Live Sliders (all affect the iframe directly)\n- **Wobble Intensity (0–10)** — drives a `setInterval` that reaches into the after-iframe's DOM and shakes the rendered element\n- **Glitch Severity (0–5)** — applies clip-path cuts and hue-rotate flickers to the live rendered element\n- **Existential Dread (0–10)** — desaturates the entire UI toward grayscale as your dread increases\n\n### Delightfully Useless Right Panel\n- **AI Confidence Meter** — displays what percentage it's sure this will break your layout (always high)\n- **Div Personality Profile™** — attachment style, MBTI type, trauma response, love language, therapy status\n- **Chaos Horoscope™** — astrological readings calibrated specifically to CSS failures\n- **Competitor Analysis™** — benchmarks your CSS against CSS Tricks, Stack Overflow, W3Schools\n- **Blockchain Certificate™** — auto-refreshing fake tx hashes on CSSchain Mainnet\n- **Div Zodiac Sign™** — your div gets a new sign after every destruction\n\n### Modals\n- **Mint Chaos NFT™** — full NFT metadata, rarity tier, value: 0.000 ETH\n- **Explain to PM™** — auto-generated stakeholder report (ROI: Negative, but vibes)\n- **Incident Report™** — P0 severity writeup, post-mortem scheduled for never\n\n### Dashboard\n- 6 live stats: Divs Destroyed, CSS Lines Emitted, Chaos Index™, Cosmic Ray Flux %, AI Confidence %, Karma Debt\n- 5 chaos meters: Alignment Destruction, Flexbox Rebellion, Cosmic Ray Influence, Centering Resistance, Designer Tears Absorbed\n- 8 live chaos factor toggles that drift their values every 3 seconds\n- Rolling audit log strip pinned to the bottom\n\n### 3D Background\n- 70 floating wireframe cubes via Three.js\n- Camera follows mouse with lerp smoothing\n- On UN-CENTER: chaos mode fires, all cube velocities multiply 5x for ~50 frames\n- 300 ambient red particles\n\n---\n\n## 🚀 Getting Started\n\n### Option 1 — Open directly (recommended)\n\n```bash\ngit clone https://github.com/your-username/css-centering-nemesis.git\ncd css-centering-nemesis\nopen index.html\n```\n\nThat's it. No install step. No `npm install`. No build pipeline.\n\n### Option 2 — GitHub Pages\n\n1. Fork this repo\n2. Go to **Settings → Pages**\n3. Set source to `main` branch, `/ (root)` folder\n4. Visit `https://your-username.github.io/css-centering-nemesis`\n\n### Option 3 — Netlify drag \u0026 drop\n\nDrag the `index.html` file onto [netlify.com/drop](https://app.netlify.com/drop). Done.\n\n---\n\n## 📋 Usage\n\n### Basic flow\n\n1. Type your CSS selector + properties in the **Input CSS** field\n2. Select your centering **Mode** (Flexbox / Grid / Absolute / Margin)\n3. Pick a **Chaos Preset**\n4. Click **⚡ UN-CENTER THIS DIV**\n5. Watch both preview panes update\n6. Copy the generated CSS with the **Copy CSS** button\n\n### Example inputs to try\n\n```css\n/* Classic hero section */\n.hero { display: flex; justify-content: center; align-items: center; }\n\n/* Grid centering */\n.card-grid { display: grid; place-items: center; gap: 24px; }\n\n/* The one that took 3 Stack Overflow tabs */\n.vertically-centered { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; }\n\n/* The loading spinner */\n.spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }\n\n/* TAMU preset bait */\nbody { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\n```\n\nPair any of these with **TAMU preset + @keyframes modifier + Wobble at 10** for maximum existential damage.\n\n---\n\n## 🏗️ How It Works\n\n### Architecture\n\nThe entire app is a single HTML file (~1,100 lines). No framework, no bundler, no dependencies except Three.js from a CDN.\n\n```\nindex.html\n├── \u003cstyle\u003e          CSS variables, layout, component styles (~450 lines)\n├── \u003cbody\u003e           HTML structure — shell, header, stats, 3-col grid, modals\n├── Three.js         CDN: cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\n└── \u003cscript\u003e         App logic (~650 lines)\n    ├── Three.js setup     70 cubes, 300 particles, mouse lerp\n    ├── State              mode, factors, chaosTypes, lastChaosRules\n    ├── CSS Parser         extractPropsFromInput() — regex + split\n    ├── iframe Builder     buildPreviewHTML() — generates srcdoc strings\n    ├── generateChaos()    core engine — shuffles pool, picks values, builds HTML\n    ├── Tab views          showInputCode(), showChaosCode(), showDiff()\n    ├── Right panel        updatePersonality(), updateZodiac(), updateHoroscope()\n    ├── Sliders            wobble/glitch reach into iframe contentDocument\n    └── Modals             NFT, PM explanation, incident report\n```\n\n### The live CSS visualization\n\nThe key technique is `iframe.srcdoc` — each preview pane is an iframe whose full HTML document is set via JavaScript:\n\n```javascript\nfunction buildPreviewHTML(selector, rules, isAfter) {\n  const cssProps = rules.map(([p, v]) =\u003e `${p}:${v};`).join('');\n\n  return `\u003c!DOCTYPE html\u003e\u003chtml\u003e\u003chead\u003e\u003cstyle\u003e\n    .wrapper { width:100%; height:100%; ${cssProps} }\n    .item { /* styled box */ }\n  \u003c/style\u003e\u003c/head\u003e\u003cbody\u003e\n    \u003cdiv class=\"wrapper ${elemClass}\"\u003e\n      \u003cdiv class=\"item\"\u003e${elemClass}\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\u003c/html\u003e`;\n}\n\nframe.srcdoc = buildPreviewHTML(selector, chaosRules, true);\n```\n\nThe before pane parses your typed CSS to extract actual property-value pairs. The after pane applies the generated chaos rules. Both use `sandbox=\"allow-same-origin\"` — no scripts run inside, they're pure CSS renderers.\n\n### The chaos generator\n\n```javascript\nfunction generateChaos() {\n  const amp = ampMap[presetKey]; // 1 → 42\n  const pool = [...cssPool[mode]].sort(() =\u003e Math.random() - 0.5);\n  const count = Math.min(pool.length, 3 + Math.floor(amp));\n  const selected = pool.slice(0, count);\n\n  // each selected rule gets a random bad value\n  const chaosRules = selected.map(([prop, vals]) =\u003e [prop, pick(vals)]);\n\n  // high-amp extras\n  if (amp \u003e 3) chaosRules.push(['animation', 'flee-from-center ...infinite']);\n  if (amp \u003e 7) chaosRules.push(['transform', `translateX(calc(${cr}vw - 50%))`]);\n}\n```\n\n### CSS property pools\n\nEach mode targets different properties:\n\n```javascript\nconst cssPool = {\n  flexbox: [\n    ['flex-direction',  ['column-reverse', 'row-reverse', 'unset']],\n    ['justify-content', ['flex-end', 'space-between', 'unsafe flex-end']],\n    ['align-items',     ['flex-end', 'baseline', 'stretch', 'self-start']],\n    ['gap',             ['9999px', '-1rem', '0.001vw', '100%']],\n    // ...\n  ],\n  grid: [ /* ... */ ],\n  absolute: [ /* ... */ ],\n  margin: [ /* ... */ ],\n};\n```\n\n---\n\n## 📁 File Structure\n\n```\ncss-centering-nemesis/\n├── index.html          The entire application (single file)\n├── README.md           You are here\n├── LICENSE             MIT\n└── .github/\n    └── FUNDING.yml     (empty — this tool has no ROI)\n```\n\n---\n\n## 🛠️ Tech Stack\n\n| Layer | Technology | Notes |\n|---|---|---|\n| Runtime | Vanilla JavaScript | Zero npm dependencies |\n| 3D Engine | Three.js r128 | Loaded from cdnjs CDN |\n| CSS Visualization | Native `\u003ciframe srcdoc\u003e` | Real browser CSS rendering |\n| Fonts | Bebas Neue + JetBrains Mono | Google Fonts |\n| Styling | Hand-written CSS | ~450 lines, CSS custom properties |\n| Build System | None | `open index.html` |\n| Database | `Math.random()` | Industry standard for chaos storage |\n| Blockchain | Fictional | So are most of them |\n| AI | Template strings | Peer reviewed by a Magic 8-Ball |\n\n---\n\n## 🤝 Contributing\n\nFound a way to make the centering worse? PRs welcome for:\n\n- New CSS property pools (especially for `display: contents` chaos)\n- New chaos presets (suggestions: Quantum Entanglement, Dark Matter Interference)\n- New personality traits for the Div Personality Profile™\n- New horoscope readings\n- New zodiac descriptions\n\nPlease do **not** open PRs that fix the centering. That is not what this tool is for.\n\n---\n\n## 📜 License\n\nMIT — see [LICENSE](./LICENSE).\n\nYou are free to use, modify, and distribute this tool. You are also free to use the generated CSS in production. We are not responsible for what happens when you do.\n\n---\n\n## ⚠️ Disclaimer\n\nCSS Centering Nemesis™ is not responsible for any layout collapse, existential dread, broken client relationships, CSS-induced insomnia, or cosmic ray interference events caused by the use or misuse of this software.\n\nThe Chaos Index™ is not a real metric. CSSchain is not a real blockchain. The NFT has no value (neither do most). The Div Personality Profile™ is not a clinical diagnosis. The Chaos Horoscope™ is not astrologically accurate. `will-change: sanity` is not a valid CSS property — but it should be.\n\nBuilt during a solar flare. Peer reviewed by a Magic 8-Ball. The 8-Ball said \"Outlook not so good.\" We shipped anyway.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eMade with chaos for the \u003ca href=\"https://dev.to/challenges/aprilfools-2026\"\u003eDEV April Fools Challenge 2026\u003c/a\u003e\u003c/sub\u003e\u003cbr\u003e\n  \u003csub\u003eLOREM™ Certified · CSSchain Mainnet · v4.20.0-chaotic\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotaadarsh%2Fcss-centering-nemesis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdotaadarsh%2Fcss-centering-nemesis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotaadarsh%2Fcss-centering-nemesis/lists"}