Time Trial Helmet Aerodynamic Optimizer

Overview

A precise, web-based utility for triathletes and time trial cyclists to visualize the aerodynamic integration of their helmet tail length and angle based on their unique riding posture. This tool provides a geometric calculation of the "closing angle" between the helmet tail and the rider's upper back, helping minimize drag-inducing gaps.

Core Features

• Live Geometry Visualizer: A high-fidelity, canvas-based drawing component that updates in real-time as users adjust sliders.
• Input Parameters:
  • Back Angle: Adjust from 0 to 45 degrees.
  • Head Position: Simulate gaze direction.
  • Helmet Tail Length: Preset selection (Short, Medium, Long) and fine-tuning slider.
  • Tail Angle Offset: Adjust the pitch of the helmet tail independently of the head.
• Aerodynamic Gap Score: A calculated, color-coded score (Optimal, Sub-optimal, Poor) indicating how well the helmet tail integrates with the rider's back profile.
• Screenshot Utility: A built-in function to download a high-resolution snapshot of the current visualization as a PNG file.

UI Layout

• Header: Clean, centered title with a brief "How to use" tooltip.
• Control Panel (Left/Top): A structured form using clean CSS inputs (range sliders with numeric badges). Each control includes a micro-label describing its impact.
• Visualization Area (Right/Bottom): A premium, light-mode canvas container with a grid overlay. The cyclist profile is rendered as a clean, SVG-like geometric shape.
• Results Module: A persistent stats bar at the bottom showing the current "Closing Gap" in millimeters and an efficiency rating.

Aesthetic & Style

• Color Palette: A vibrant, professional light-mode aesthetic using shades of cool blue (#E0F2F1), crisp white, and deep charcoal for text. Primary action buttons will use a high-contrast accent color (e.g., #007BFF).
• Typography: Inter or system-sans fonts for extreme readability.
• Transitions: All interface changes use cubic-bezier easing to ensure that slider adjustments feel tactile and premium.
• Visuals: Minimalist iconography and sharp, vector-based illustrations of a rider profile.

Technical Implementation Constraints

• Single File: All HTML, CSS, and JS must be contained in one index.html file.
• Vanilla Tech: Use HTML5 Canvas for the visualizer. Pure Vanilla JS only; no React, Vue, or heavy frameworks.
• State Management: Stateless application. No localStorage, cookies, or IndexedDB. All state held in JS variables.
• Iframe Compatibility: The app must be fully functional within a null-origin iframe (no internal redirects, no external popups).
• Responsive: The UI must switch from a side-by-side desktop layout to a stacked mobile layout using CSS Grid/Flexbox at a breakpoint of 768px.
• External Assets: Use Google Fonts (Inter) and a lightweight CDN for icons (e.g., FontAwesome/Phosphor) via <link> or <script> tags.