🍵 HTTP 418 — I'm a Teapot

The ultimate HTTP 418 "I'm a teapot" experience — brew tea, refuse coffee, honor RFC 2324.

Built by Arnold Wender

🚀 Live Demo

Features

• Animated SVG teapot with pouring animations
• Full HTTP status code tea menu — each status has its own blend
• Interactive brew timer with steam effects
• Thermal receipt generator for your tea orders
• Teapot customizer — colors, patterns, and accessories
• 10 unlockable achievements for dedicated tea enthusiasts
• Sound effects for brewing, pouring, and sipping
• Confetti celebrations when you unlock achievements
• Coffee requests are firmly and politely refused (as per RFC 2324)
• Postman-style Request Panel — send BREW and STEEP requests with custom headers and tea parameters
• RFC 2324 Compliance Dashboard — full compliance report with an A+ grade (naturally)
• Fake Changelog — version history of increasingly elaborate tea-related protocol updates
• Pro Tier ($418/month) — premium brewing features at the only appropriate price point

Tech Stack

• React 18 + TypeScript
• Vite — lightning-fast dev server and builds
• Tailwind CSS — utility-first styling
• Framer Motion — smooth animations and transitions
• canvas-confetti — celebration effects
• html2canvas — thermal receipt generation
• Lucide React — icon set
• Web Audio API — sound effects

Getting Started

# Clone the repository
git clone https://github.com/arnoldwender/http-418-teapot.git
cd http-418-teapot

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build
npm run preview

Contributing

Contributions are welcome! Check out CONTRIBUTING.md for guidelines on how to get involved.

License

This project is licensed under the MIT License.