Free Piano Sustain & Damper Mechanics Simulator

Overview

A clean, professional-grade educational tool designed to visualize the acoustic relationship between the sustain pedal, damper felt movement, and string resonance. This tool provides instant feedback for piano students practicing pedal technique, focusing on timing and the physics of damper lifting.

Technical Specifications

• Single File: All CSS, HTML, and JS contained in a single index.html.
• Compatibility: Optimized for modern web browsers; sandboxed iframe compliant.
• Storage: No localStorage or persistence. State is managed entirely in-memory.
• Audio: Uses standard Web Audio API oscillators and gain nodes to simulate piano-like decay.

Features

1. Real-time Pedal Input: Users control the virtual pedal via Spacebar or mouse click. Visual animation reflects the pedal travel.
2. Dynamic Damper View: An anatomical side-view of a piano string, damper, and hammer. The damper lifts dynamically based on pedal engagement depth.
3. Resonance Visualization: A graphical overlay representing the sound decay curve, showing how the "damper lift" extends sustain length compared to a "damped" state.
4. Pedal Timing Drills: A challenge mode where the user must release the pedal at the exact visual cue to avoid "muddy" resonance overlap, displaying an accuracy score (perfect/late/early).
5. Light Mode Aesthetic: High-contrast, clean professional interface. Uses whites, soft grays, and professional accent blues (#007AFF).

UI Layout

• Header: Simple, descriptive title and a small 'About' icon.
• Main Stage: A centered, high-fidelity SVG graphic of the piano string and damper mechanism.
• Control Panel: Below the stage, a large 'Pedal' input area. Visualized as a physical pedal button that depresses with a smooth CSS transition.
• Results Area: A small dynamic feedback strip showing current pedal state, resonance duration, and accuracy metrics.

Color Palette

• Background: #FFFFFF
• Piano Components: #E0E0E0 (light gray for base), #9E9E9E (charcoal for dampers), #212121 (black for keys/strings).
• Primary Action (Pedal): #007AFF (Vibrant blue for interactive elements).
• Feedback Text: #333333 (Dark gray for high readability).

Developer Directives

• Animations: Use CSS keyframes for the damper lift to ensure 60fps smoothness. Avoid heavy JS-based animations.
• Responsive Design: Use media queries to scale the SVG stage relative to viewport width, ensuring the tool is usable on phones and tablets.
• Accessibility: Ensure all interactions are keyboard-navigable. Use ARIA labels for the pedal button.
• Dependencies: Only Google Fonts (Inter) and a local SVG asset (or inline SVG code) permitted.