"Anyone can cook. Not everyone should design a website."
A deliberately terrible, Ratatouille-themed website that showcases every UI/UX anti-pattern in existence — built entirely in a single HTML file with vanilla JS. No frameworks. No libraries. Just chaos.
- Custom rat-paw cursor replaces your mouse — complete with ears and a glowing trail
- Particle trail follows every movement
- Cursor disappears on some elements just to confuse you
- Fake progress bar that lies, stutters, jumps backward, and pauses
- Sarcastic loading messages cycle through
- Takes way longer than it needs to
- Every element animates — spinning logos, bouncing nav, floating titles, wobbling cards
- Food emojis (🍷🧀🐀🔥) drift across the background continuously
- Spiral, jitter, pulse, and wiggle animations on all section headers
| Screen | Disaster |
|---|---|
| Dashboard | Live chaos meter, dripping water, shadow creature follows cursor |
| Orders | Auto-arriving order tickets that shake and expire |
| Cooking | Minigame with fire risk meter and combo counter |
| Inventory | Stock items include "Existential Dread" and "Emergency Cheese" |
| Chef Profile | Remy's HR file + newspaper-style End of Day Report |
| Panic Board | Draggable sticky notes + the forbidden button |
| Ego's Chamber | The critic watches silently |
| Rat Staff | Your secret workforce |
| Inspector | He's always on his way |
| Tables | Table management with rat sightings |
- 🔥 Fire overlay — triggers randomly, shakes the entire page
- 💨 Smoke canvas — real-time particle rendering across the screen
- 💧 Water drips — CSS-animated drops from the ceiling
- 🐀 Rat flood — 65 rats swarm from all edges on command
- 👻 Gusteau's ghost — appears randomly with cooking wisdom
- 🦇 Shadow creature — follows your cursor in the dark
- 😱 Scary flash — random jump scares
- 🔊 Procedural audio — every click, scroll, and interaction has synthesized sound via Web Audio API
- DO NOT PRESS → Purple void consumes the screen with spinning gradients + meme GIF
- Type "Anyone can Cook" in the hidden stabilize box → all chaos effects shut off (the only peace)
- End of Night Report → randomized 1847 Parisian newspaper with your session stats
- Random popups — health inspections, souffle collapses, wine spills, rat sightings
| Tech | Usage |
|---|---|
| HTML/CSS/JS | Everything — single file, 6000+ lines |
| Canvas API | Real-time smoke and particle systems |
| Web Audio API | All sound effects synthesized in-browser, zero audio files |
| CSS Animations | 30+ unique keyframe animations |
| IntersectionObserver | Scroll-triggered reveal effects |
| DOM Manipulation | Rat floods, fire overlays, floating emojis |
├── index.html # The entire disaster (single file)
├── assets/ # Images and media
│ ├── logo.jpg
│ ├── remy .jpeg
│ ├── remy2.jpeg
│ ├── antoine.jpeg
│ ├── colette.jpeg
│ ├── ego.jpeg
│ ├── skinner.jpeg
│ ├── gusteau_logo.png
│ ├── loading_remi.png
│ ├── meme.gif
│ ├── phototour-ratatouille-079.jpg
│ └── ...
└── README.md
Just open index.html in a browser. No server needed. No build step. Just pain.
open index.html