Motorcycle Geometry & Handling Calculator

Overview

A clean, professional, and highly responsive web-based utility designed for motorcycle mechanics, custom bike builders, and enthusiasts. This tool enables users to input chassis parameters and instantly calculate the resulting trail, helping to predict handling characteristics and steering stability.

Core Features

• Live Geometry Calculation: Real-time trail calculation based on Rake Angle (deg), Fork Offset (mm), and Tire Radius (mm).
• Visual Interaction: An SVG-based dynamic diagram that draws the fork angle, ground contact point, and trail distance visually as the user adjusts inputs.
• Unit Flexibility: Toggle between Metric (mm) and Imperial (inches) for global usability.
• Stability Analysis: A color-coded indicator that warns users if their calculated trail falls outside of typical handling ranges (e.g., potential instability or excessive "heavy" steering).
• Zero-Storage Logic: Purely in-memory calculations; no cookies or server-side calls, ensuring compatibility with all browser security policies.

UI/UX Specification

• Aesthetic: A modern, "SaaS-clean" light mode interface. Uses a color palette of crisp whites, soft greys, and a primary "engineering blue" (#2563eb) for data highlights.
• Layout:
  • Top Header: Simple title and brief "How to use" tooltip trigger.
  • Main Area: A two-column split layout. Left column houses precise input controls (numeric sliders and text fields). Right column displays the dynamic SVG visualization and the calculated output.
  • Results Card: A prominent, large-font result card displaying the calculated Trail in mm/inches.
• Micro-interactions:
  • Smooth transition animations when SVG lines redraw.
  • Subtle input validation (no alerts; input fields turn soft red if non-physical geometry is detected).

Technical Directives

• Architecture: Single HTML file containing HTML5, Tailwind CSS (via CDN), and Vanilla JavaScript.
• No State Persistence: Do not use localStorage or sessionStorage. All state must be contained within active JavaScript variables.
• Performance: Use requestAnimationFrame for the SVG updates to ensure 60fps responsiveness during slider movement.
• Accessibility: Ensure all inputs have associated <label> tags and ARIA attributes for screen readers.
• Responsiveness: Use CSS Grid/Flexbox to stack the visualization and inputs on mobile devices and side-by-side on desktop views.