Jump Rope Bearing Friction & Spin Rate Visualizer

A professional, single-file, browser-based utility designed to simulate the rotational dynamics of jump rope handles. This tool empowers athletes and equipment manufacturers to analyze spin efficiency, bearing drag, and rotational decay without needing external software.

Core Features

• Dynamic Physics Engine: Real-time calculation of RPM (Rotations Per Minute) based on user-provided friction coefficients, handle mass, and applied torque.
• Interactive Visualizer: A high-fidelity animated gauge and line graph showing the spin decay curve in real-time.
• Preset Library: Quick-select presets for common bearing types (e.g., ABEC-3, ABEC-5, Hybrid Ceramic, Plastic Bushings) to populate calculation parameters instantly.
• Comparative Analysis: A dual-pane view to compare two different bearing configurations side-by-side.
• Sensitivity Analysis: Interactive sliders to adjust parameters and instantly see how minor changes in handle weight or friction alter the spin performance.

UI/UX Design Specification

• Aesthetic: Clean, minimalist "SaaS" aesthetic. Use a bright white background (#FFFFFF) with a soft grey (#F9FAFB) sidebar and crisp blue (#3B82F6) interactive elements.
• Typography: Sans-serif, system-stack fonts (Inter, -apple-system, BlinkMacSystemFont) for maximum readability.
• Layout:
  • Header: Simple, descriptive title with a clear, concise instruction subtitle.
  • Sidebar (Left): Input controls (sliders, drop-downs for material selection, number inputs for force/weight).
  • Main Area (Right): A large, visually appealing canvas for the animation loop (SVG or Canvas API) and the dynamic trend graph (using a lightweight charting library like Chart.js via CDN).
• Animations: Subtle, smooth transitions (CSS transition: all 0.3s ease-out) when changing parameters. The gauge needle should have an elastic bounce easing function.

Technical Constraints & Implementation

• Architecture: 100% single-file HTML5. External CSS and JS (Tailwind, Chart.js) must be linked via CDN.
• Persistence: ZERO persistent storage. All data processing occurs purely in-memory. No localStorage, sessionStorage, or cookies. The state resets on page refresh.
• Security: Sandboxed iframe compatible. No alert(), prompt(), or confirm(). Use custom-built modal components for any necessary user interactions.
• Responsiveness: Fluid grid layout using CSS Flexbox/Grid. On mobile, the sidebar moves to a top-tabbed layout to maintain accessibility.
• Performance: Optimized requestAnimationFrame loop for the visualizer to ensure 60fps performance on all devices.

Developer Instructions

1. Use Tailwind CSS via CDN for styling.
2. Use Chart.js via CDN for the graphical output.
3. Implement a calculateSpin() function that runs on every input change, updating the DOM and the Canvas visualizer.
4. Avoid any build steps; write clean, commented vanilla JavaScript in a <script> tag at the bottom of the body.
5. Ensure all inputs have clear labels and units (e.g., "g", "RPM", "mN·m").
6. No external tracking, analytics, or third-party ad scripts.