☕ Espresso Timer

A sleek, professional espresso brewing timer with real-time animations

---

🚀 What is this?

Ever wanted to brew the perfect espresso shot? This timer helps you nail that perfect 25-second extraction with:

• Visual coffee machine animation that fills as you brew
• Real-time extraction data (flow rate, weight, ratio)
• Professional timing phases (pre-infusion → extraction → finish)
• Glass morphism UI that looks like it belongs in a modern coffee shop

⚡ Quick Start

No installation needed! Just three files:

1. Save the HTML code as index.html
2. Save the CSS code as style.css
3. Save the JavaScript code as script.js
4. Open index.html in any browser
5. Start brewing perfect espresso! ☕

🎯 How to Use

Basic workflow:

1. Set your dose (default: 18g coffee)
2. Adjust brew time (default: 25 seconds)
3. Hit "Start Brewing" (or press spacebar)
4. Watch the magic - coffee streams into cup with real crema formation
5. Get perfect extraction data in real-time

Pro tips:

• Use Space to start/pause quickly
• Ctrl+R to reset everything
• Watch the progress ring change colors as time runs out
• Three phases guide you: Pre-infusion → Main Extraction → Finish

🛠️ What's Under the Hood

Tech stack:

• Pure HTML5/CSS3/JavaScript (no frameworks!)
• GSAP for smooth animations
• Anime.js for UI transitions
• Responsive design (works on phone, tablet, desktop)

Features:

• ⏱️ Millisecond-accurate timing
• ☕ Realistic coffee machine with animated crema
• 📊 Live flow rate and weight tracking
• 🎨 Glass morphism UI with backdrop blur
• 📱 Mobile-friendly responsive layout
• ⌨️ Keyboard shortcuts for barista workflow

🎨 Customization

Want to change colors? Edit the CSS variables:

:root { --primary: #3b82f6; /* Main blue / --coffee-dark: #2d1b14; / Coffee color / --crema: #e5a572; / Crema foam */ }

Want faster animations? Adjust the JavaScript timings:

// Make coffee fill faster duration: 15, // instead of 18

📊 What Makes It Special

Unlike other timers, this one:

• Shows actual coffee extraction with realistic crema that sits on top
• Tracks three distinct phases with different flow rates
• Calculates ratios automatically (1:2 default, but customizable)
• Changes colors as time runs critical
• Looks professional - could be used in an actual coffee shop

🔮 Future Ideas

Some cool features I'm thinking about:

• Brew history to track your shots over time
• Sound alerts for phase changes
• Different coffee recipes (ristretto, lungo, etc.)
• Temperature simulation for complete realism
• Export data to analyze your brewing patterns

🤝 Want to Contribute?

This is open source! Feel free to:

• Fork and improve the code
• Report bugs or suggest features
• Share it with fellow coffee nerds
• Submit pull requests

Just keep the code clean and test it works on mobile!

📝 License

MIT License - do whatever you want with this code. If it helps you brew better coffee, that's all I care about.

☕ Coffee Science

Perfect espresso guidelines:

• 18-20g dose for double shot
• 25-30 seconds extraction time
• 1:2 ratio (18g coffee → 36g espresso)
• 9 bars pressure at 93-96°C

Troubleshooting:

• Too fast? Grind finer
• Too slow? Grind coarser
• Sour? Extract longer or hotter
• Bitter? Extract shorter or cooler

---

Perfect espresso, perfect timing. Every shot counts. ☕✨

Built with ❤️ by @Jacob22092 for coffee lovers everywhere

Ready to brew? Just save the three code files and open index.html!