The anti-centering tool — un-center every perfectly aligned element with physics and chaos.
Built by Arnold Wender
- 4 un-centering modes — Drift, Earthquake, Gravity, and Full Chaos
- Live preview of your beautifully destroyed layouts
- Before/after comparison slider to admire the damage
- CSS output panel — copy the cursed CSS for your own projects
- Score system that rewards maximum visual destruction
- Hidden chaos panel with secret advanced controls
- Physics-based animations for realistic element displacement
- Confetti when you achieve peak un-centeredness
- Chrome DevTools Panel clone — inspect your un-centered elements in a pixel-perfect DevTools replica
- Lighthouse Centering Report — SVG gauge visualizations scoring how far off-center your elements are
- Fake Changelog — version history of CSS centering techniques that were deliberately broken
- Pro Tier (3 tiers) — Basic, Professional, and Enterprise levels of un-centering power
- React 18 + TypeScript
- Vite — lightning-fast dev server and builds
- Tailwind CSS — utility-first styling
- Framer Motion — physics-based animations and transitions
- canvas-confetti — celebration effects
- html2canvas — before/after screenshot export
- Lucide React — icon set
# Clone the repository
git clone https://github.com/arnoldwender/css-uncenter.git
cd css-uncenter
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:5173 in your browser.
npm run build
npm run previewContributions are welcome! Check out CONTRIBUTING.md for guidelines on how to get involved.
This project is licensed under the MIT License.