Free Espresso Puck Tamp Pressure & Density Uniformity Simulator—
gemini-3.0-flash
Optimize your espresso shots with this free puck density and tamp pressure simulator. Visualize distribution and uniformity for consistent coffee extraction.
AI Generation Prompt
Espresso Puck Tamp Pressure & Density Uniformity Simulator
Overview
This single-file application is an interactive educational tool for coffee enthusiasts and professional baristas. It visualizes the impact of various tamping variables on the density distribution of a coffee puck within a portafilter basket.
Technical Architecture
- Architecture: Single-file HTML5 document (HTML + CSS + Vanilla JS).
- Constraints Compliance:
- No persistent storage: Absolutely no use of
localStorage,sessionStorage, or cookies. State is managed entirely in-memory. - Sandboxed Environment: Avoids restricted APIs. No alerts or prompts; uses custom HTML/CSS modals.
- Performance: Uses
requestAnimationFramefor fluid visualization updates.
- No persistent storage: Absolutely no use of
Feature Set
1. Interactive Inputs
- Tamp Pressure Slider: Simulate force from 0kg to 30kg.
- Tamp Tilt Angle: Configure tilt angle (0-10 degrees) to simulate uneven leveling.
- Distribution Quality: Adjust the initial bed consistency (perfect, clumpy, uneven).
- Tamper Profile: Select between flat, convex, or ridge-less tamper geometries.
2. Visualization Area
- Puck Heatmap: An interactive SVG or Canvas-based view showing a cross-section of the puck. Colors shift dynamically from light (low density) to dark (high density/compacted) to represent physical puck integrity.
- Extraction Probability Map: An overlay displaying "High Risk of Channeling" zones based on density gradients.
3. Education & Analysis
- Uniformity Score: A dynamic percentage score indicating the theoretical uniformity of the extraction.
- Dynamic Tooltips: Contextual hints appearing when hovering over variables, explaining the physics of espresso extraction.
UI/UX Design
- Aesthetic: A crisp, high-end SaaS "Light Mode" design.
- Color Palette:
- Background: Off-white (#F9F9F9)
- Primary: Deep Espresso Brown (#3E2723)
- Secondary: Slate Blue (#546E7A) for interactive controls.
- Accent: Soft Amber (#FFB74D) for high-risk zones/warnings.
- Text: Dark Charcoal (#263238)
- Transitions: Smooth CSS transitions on all input sliders and hover states. Visualization updates occur seamlessly without full page reloads.
- Responsiveness: Full fluidity. Input panels stack vertically on mobile and side-by-side on desktop environments.
Implementation Directives
- CSS: Use modern Flexbox/Grid for layout. Ensure high contrast and professional typography (System fonts like Inter or Roboto).
- JS: All calculations must be handled in real-time by a dedicated
calculateDensity()function triggered by input event listeners. - External Assets: Only use CDNs for critical fonts (e.g., Google Fonts). All other UI components must be custom-built using CSS.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does tamp pressure affect espresso extraction?
Tamp pressure primarily serves to compress the coffee bed and remove air pockets. While excessive pressure does not increase extraction yield significantly, uneven pressure creates density variations that lead to channeling, where water takes the path of least resistance. Our simulator demonstrates how lateral forces during tamping can shift the coffee bed, resulting in a skewed puck density map. By adjusting these variables, users can visualize how a perfectly level tamp contributes to uniform water flow throughout the puck.
Why is puck density uniformity important for espresso?
Uniform density ensures that the hot water travels through all parts of the coffee puck at the same speed. If one side of the puck is denser than the other, water will bypass the denser areas and over-extract the less dense areas, leading to a bitter, imbalanced cup profile. Achieving uniformity is the primary goal of professional puck preparation techniques, including distribution tools and precise tamping. This tool helps you identify how your specific tamping style might affect that critical distribution.
Can this tool help reduce channeling in espresso?
Yes, by visualizing the density gradient, this tool acts as an educational aid to identify common pitfalls in puck preparation. It helps users understand how angles, uneven distribution, and pressure variations manifest as weak spots in the puck. By observing the real-time changes in the simulation, baristas can correlate these potential weak spots with their real-world extraction results, ultimately refining their workflow to produce cleaner, more uniform shots.
How is the simulation calculated?
The simulator uses a distribution algorithm that maps applied downward force and tilt angles across a circular grid representing the portafilter basket. It calculates a density index based on the interaction between the downward vector of the tamper and the presumed particle resistance. While this is a mathematical approximation rather than a physics engine, it accurately reflects the geometric principles involved in puck preparation. It is designed to be a highly effective visualization tool for improving consistent barista technique.
Related Applications

Free Online Guitar Tablature Maker & Audio Player
Create, edit, and play your own guitar tablature arrangements with this free, interactive, browser-based guitar tab maker. No installation required.

Free CSS font-palette OpenType CPAL Color Font Configurator
Easily customize OpenType CPAL color fonts with this free web-based CSS font-palette generator. Configure, preview, and export CSS code for modern typography.

Free Browser Target Polyfill & Core-JS Configuration Previewer
Instantly visualize required core-js polyfills and generate Babel preset-env configurations based on your specific browser compatibility requirements.

Free Thermal Paste Application Pattern Simulator
Visualize how thermal paste spreads under your CPU cooler with this interactive tool. Test patterns like pea, X, or line for optimal thermal compound coverage.
Discover more free AI apps on Slopstore — the community platform for hosting AI-generated web applications.