DEV Community

Cover image for I Built an Enterprise Platform to Destroy Centered Divs — Now With Live CSS Visualization
Aadarsh Kannan
Aadarsh Kannan

Posted on

I Built an Enterprise Platform to Destroy Centered Divs — Now With Live CSS Visualization

#devchallenge #418challenge #showdev #webdev

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge

What I Built

CSS Centering Nemesis™ — the world's first, last, and only enterprise-grade platform engineered to take your perfectly centered div and annihilate it. Live. In real time. With before and after previews rendered in actual CSS.

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

CSS Centering Nemesis

Two live preview panes instantly render your input CSS and the generated chaos CSS side-by-side — as actual working HTML in real iframes — so you can watch your div go from serenely centered to cosmically displaced in real time.

It also profiles your div's MBTI type, generates a personalized chaos horoscope, mints a blockchain certificate of destruction, and produces a P0 incident report blaming you personally.

"Why fix what AI can infinitely break?"

CSS Centering Nemesis™ v4.20.0-chaotic. It solves exactly zero real-world problems. I have no regrets.

Demo

🔗 Live Demo →

🐙 GitHub →

Single self-contained HTML file. No build step. No npm install. No framework. Just open it.

The Backstory

Every frontend developer has a centering trauma story.

div center meme

The 2am flexbox incident. The position: absolute; top: 50%; transform: translateY(-50%) solution that works but that you still don't fully understand. The Stack Overflow answer that gave you three different approaches and somehow all of them were correct for different reasons. The time you wrote margin: 0 auto and felt like a genius, and then it didn't work, and you were not a genius.

I wanted to build something that honored that pain. Not by solving it — by weaponizing it. And then adding a blockchain certificate to the weapon.

The Live CSS Visualization

The centrepiece of the tool is the split-pane live CSS renderer. Instead of a fake animated box standing in for your layout, the tool renders two real <iframe> documents — one for your input CSS and one for the generated chaos CSS — so you can see what the browser actually does with both.

BEFORE pane (green)

As you type in the input field, the left pane updates live. It parses the CSS block between the { and }, extracts each property-value pair, and renders them inside an iframe on a real grid-paper background with center crosshairs showing exactly where the center is.

Type .hero { display: flex; justify-content: center; align-items: center; } and you see an actual flex container with the div sitting calmly in the middle. Crosshairs behind it. The center label visible. Everything fine. Everything about to be ruined.

If you only type a selector without a CSS block, it falls back to sensible defaults for the selected mode — flexbox gives you display: flex; justify-content: center; align-items: center, absolute gives you position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%), and so on.

Live CSS Render Pane

AFTER pane (red)

After you click UN-CENTER, the right pane renders the generated chaos CSS applied to the same element. Same grid, same crosshairs — but now the div might be shoved to the bottom-right corner, rotated 23 degrees, or flying off the edge of the document entirely thanks to left: calc(50% + 9999px).

The crosshairs stay perfectly centered. The div does not. That's the point.

Three code tabs

Panes

Below the preview panes:

Input CSS — your typed CSS with syntax highlighting, properties in green. Updates live as you type, before you generate chaos.

Generated Chaos CSS — the full output with red values, !important annotations, enterprise-grade comments, @keyframes blocks if enabled, and cosmic ray custom properties. Stays stable until you run the engine again.

Diff View — both together, side by side. Your input properties struck through in red (-), the chaos replacements added in green (+). The most honest view of what just happened to your layout.

All Features

⚡ Core Destruction Engine — Four Modes

Flexbox Rebellion attacks flex-direction, justify-content, align-items, align-content, gap, flex-shrink, and flex-grow with values like column-reverse, unsafe flex-end, 9999px, and -1rem.

Grid Chaos corrupts grid-template-columns with repeat(auto-fill, 1px), sets grid-column: 1 / -999, and applies place-items: baseline legacy.

Absolute Disintegration changes position to static (after all that work), teleports with left: calc(50% + 9999px), and applies transform: perspective(1px) rotateX(90deg).

Margin Annihilation sets margin: 0 auto 0 -9999px, declares max-width: calc(100% - 9999px), and sets width: 0.001px. Your div becomes a theory.

🌌 Five 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 deliberately implausible cubic-bezier curve, plus will-change: position, sanity, will-to-live.

At TAMU (42x), it injects --cosmic-ray-flux: XX% !important and a transform that uses the live cosmic ray reading as the actual viewport offset: translateX(calc(NNvw - 50%)) rotate(Ndeg). Your div goes somewhere. We don't know where.

🎛️ Chaos Modifiers

Four toggleable flags that change the CSS output character:

  • !important — randomly appends !important to generated values, because if it's worth destroying, it's worth destroying with conviction
  • vendor — adds commented-out -webkit- vendor prefixes for properties that haven't needed them since 2014, out of respect for 2014
  • comments — injects enterprise-grade warning comments like /* ⚠️ Estimated time to fix: heat death of universe */ and /* ⚠️ Peer reviewed by: nobody */
  • @keyframes — auto-generates a complete @keyframes flee-from-center block where the final keyframe sends your div to transform: translate(9999px, 9999px) rotate(360deg) — off-screen, and spinning

🎚️ Three Sliders

Wobble Intensity (0–10) drives a setInterval that reaches directly into the after-pane iframe's DOM and applies random translate transforms to the rendered element. At intensity 10, it updates every 40ms with movements up to ±40px. The actual CSS-rendered div shakes — not an animation on a fake box.

Glitch Severity (0–5) drives a separate interval applying random clip-path: polygon(...) cuts and hue-rotate() filter flickers to the live rendered element. The iframe's DOM gets corrupted on a timer. The div begins to look the way it feels inside.

Existential Dread (0–10) applies filter: saturate(N) to the entire page body. Above level 7, the whole UI gradually desaturates toward grayscale. At 10, it's nearly black and white. The tool itself catches the dread. This seemed important.

👁️ Div Personality Profile™

After every destruction, the right panel generates a full psychological profile of your div's post-chaos state:

  • Attachment style — Anxiously offcenter / Avoidantly positioned / Securely destroyed
  • Trauma response — Flee (to 9999px) / Flight (column-reverse) / Fawn (rotates 180°)
  • Love language — transform: chaos / flex-direction: away / position: static
  • MBTI type — CHAOS-J / ENTP-Chaos / INTJ-Absol
  • Therapy status — Actively spiraling / Considering it / In denial

🔮 Chaos Horoscope™

A rotating set of astrological readings calibrated specifically to CSS failures. Refreshes after every destruction. Sample readings:

"Pluto's retrograde affects all position: fixed elements. Nothing is fixed. Everything is chaos. Update your résumé."

"Jupiter's alignment creates gravitational flex interference. Your div will drift exactly 47px to the left this week. There is nothing you can do."

"The moon is in the seventh house of overflow: hidden. What you cannot see is still off-screen. Like your hopes."

🪙 Blockchain Certificate™

Every chaos event is verified on CSSchain Mainnet. The panel shows an auto-refreshing hex block number, gas cost in gwei, and a 64-character transaction hash — all updating every 5 seconds regardless of what you do, because blockchains are always doing something important.

📋 Three Action Modals

Mint Chaos NFT™ — generates NFT metadata for your destroyed div. Rarity tiers: UNCOMMON WOBBLE through LEGENDARY CHAOS. Value: 0.000 ETH. Utility: none. This is art.

Mint Chaos NFT

Explain to PM™ — auto-generates a stakeholder-friendly explanation of your layout disaster, complete with a project summary grid: Timeline: Undefined, Budget: Chaos budget exceeded, Risk: High (it's CSS), ROI: Negative but vibes, Stakeholders: Div. Div is upset, Next steps: More chaos.

Explain to PM™

Generate Incident Report™ — a P0 severity incident report with Incident ID, root cause ("User attempted to center a div"), impact (N divs permanently misaligned), resolution ("Embraced chaos. Shipped anyway."), and a post-mortem scheduled for never. Your chaos CSS is attached as evidence.

Generate Incident Report

♈ Div Zodiac Sign™

Your div receives a new zodiac sign after every destruction. Leo divs "demand to be the center. Are now position: fixed." Scorpio divs are "dark, mysterious, left-aligned with no explanation." Pisces divs are "lost in the flow. position: relative to nothing."

📊 Six Live Stats + Competitor Analysis

The stats bar tracks six critical business metrics: Divs Destroyed, CSS Lines Emitted, Chaos Index™, Cosmic Ray Flux %, AI Confidence %, and Karma Debt (in divs). All flash red on update.

The competitor analysis panel benchmarks your CSS file against CSS Tricks tutorials (CENTERED, 20%), Stack Overflow answers (MAYBE, 55%), W3Schools (DEPRECATED, 35%), and this tool (NEMESIS, 100%). The results speak for themselves.

🎛️ Eight Chaos Factors

A sidebar of eight toggleable live factors — Mercury Retrograde Multiplier, Flexbox Rebellion Index, Solar Wind Coefficient, Browser Vendor Entropy, Stack Overflow Despair, z-index Anxiety Factor, Designer Feedback Entropy, Quantum Margin Uncertainty — all drifting their numeric values slightly every 3 seconds, making the sidebar look like it's computing something important at all times, even when it isn't.

How It Works

The iframe visualization

The key technique is iframe.srcdoc. Each pane is an iframe whose entire HTML document is built and set as a string:

function buildPreviewHTML(selector, rules, isAfter) {
  const elemClass = selector.replace(/^\./, '').split(/[\s:>+~]/)[0];
  const cssProps = rules.map(([p, v]) => `${p}:${v};`).join('');

  return `<!DOCTYPE html><html><head><style>
    .wrapper { width: 100%; height: 100%; ${cssProps} }
    .item { /* the styled div element */ }
  </style></head><body>
    <div class="wrapper ${elemClass}">
      <div class="item">${elemClass}</div>
    </div>
  </body></html>`;
}

frame.srcdoc = buildPreviewHTML(selector, chaosRules, true);
Enter fullscreen mode Exit fullscreen mode

The before pane parses your typed CSS to extract actual property-value pairs and renders them. The after pane applies the generated chaos rules to the same element. Both iframes use sandbox="allow-same-origin" — no scripts run inside them, they are pure CSS renderers. The browser does the rendering. There is no simulation.

The CSS parser

The textarea input gets parsed on every keystroke:

function extractPropsFromInput(raw) {
  const inside = raw.match(/\{([^}]*)\}/);
  if (inside) {
    return inside[1].split(';')
      .map(l => l.trim())
      .filter(Boolean)
      .map(l => {
        const [p, ...v] = l.split(':');
        return [p.trim(), v.join(':').trim()];
      });
  }
  return defaultsForMode[mode]; // fallback
}
Enter fullscreen mode Exit fullscreen mode

The diff view 

function showDiff() {
  inputProps.forEach(([p, v]) => {
    html += `<span class="diff-rem">  - ${p}: ${v};</span>`;
  });
  lastChaosRules.forEach(([p, v]) => {
    html += `<span class="diff-add">  + ${p}: ${v};</span>`;
  });
}
Enter fullscreen mode Exit fullscreen mode

The chaos generator 

function generateChaos() {
  const amp = ampMap[presetKey]; // 1 through 42
  const pool = [...cssPool[mode]].sort(() => Math.random() - 0.5);
  const selected = pool.slice(0, Math.min(pool.length, 3 + Math.floor(amp)));
  const chaosRules = selected.map(([prop, vals]) => [prop, pick(vals)]);

  // high-amp extras
  if (amp > 3) chaosRules.push(['animation', 'flee-from-center ...infinite']);
  if (amp > 7) chaosRules.push(['transform', `translateX(calc(${cr}vw - 50%))`]);
}
Enter fullscreen mode Exit fullscreen mode

The amplifier directly controls how many CSS rules are generated (3 + floor(amp)), so TAMU at 42x produces a full cascade of destruction. Higher presets also unlock the extra lines — the flee animation, the cosmic ray transform, the will-change: position, sanity, will-to-live.

Wobble and Glitch reach into the iframe DOM 

wobbleTimer = setInterval(() => {
  const el = frame.contentDocument.querySelector('.item');
  const x = (Math.random() - 0.5) * intensity * 8;
  const y = (Math.random() - 0.5) * intensity * 4;
  el.style.transform = `translate(${x}px, ${y}px)`;
}, speed);
Enter fullscreen mode Exit fullscreen mode

The sliders manipulate the live rendered element inside the iframe. Not a fake box. The actual browser-rendered CSS output.

Three.js background

70 wireframe cubes (THREE.EdgesGeometry on THREE.BoxGeometry) float and rotate in 3D space behind the entire UI. 12% are red and pulse on a sine wave. The camera follows the mouse with lerp smoothing — camera.position.x += (target - current) * 0.02. On each destruction event, chaos mode fires and multiplies every cube's velocity by 5x for approximately 50 frames. 300 ambient red particles via THREE.Points complete the scene.

Tech Stack

Layer Technology Why
Runtime Vanilla JavaScript Zero npm dependencies
3D Engine Three.js r128 Loaded from cdnjs CDN
CSS Visualization Native <iframe srcdoc> Real browser CSS rendering
Fonts Bebas Neue + JetBrains Mono Google Fonts
Styling Hand-written CSS ~450 lines, CSS custom properties
Build System None open index.html
Database Math.random() Industry standard for chaos storage
Blockchain Fictional So are most of them
AI Template strings + pick() Peer reviewed by a Magic 8-Ball

Example Inputs to Try 

/* Classic flex centering */
.hero { display: flex; justify-content: center; align-items: center; }

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

/* Grid centering */
.card { display: grid; place-items: center; }

/* The one that took 3 Stack Overflow tabs */
.thing { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; }

/* Maximum TAMU preset bait */
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
Enter fullscreen mode Exit fullscreen mode

Pair body or .spinner with TAMU preset, all four Chaos Modifiers on, Wobble at 10, Glitch at 5, and Existential Dread at 9 for the full experience. The Diff View tab at that point is genuinely upsetting.

Prize Category

Community Favorite — because this is exactly the kind of software that should not exist, and yet here we are.

Code

🐙 GitHub → — single index.html, MIT licensed, view source, no shame.

CSS Centering Nemesis™ is not responsible for layout collapse, existential dread, broken client relationships, CSS-induced insomnia, or cosmic ray interference events. The Chaos Index™ is not a real metric. CSSchain is not a real blockchain. The NFT has no value. 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. The Existential Dread slider does not constitute medical advice.

Built during a solar flare. Peer reviewed by a Magic 8-Ball. The 8-Ball said "Outlook not so good." We shipped anyway.

Top comments (0)