Technical Specification: Free Pilates Reformer Footbar & Knee Joint Mechanics Tool

Overview

A specialized, browser-based utility designed for Pilates instructors, students, and practitioners. This tool provides a mathematical model to estimate the relationship between reformer footbar settings, user limb length, and resulting knee joint stress/angles.

Core Features

• Dynamic Geometry Input: Fields for User Height (or femur length), Footbar Arc Setting (e.g., Low, Medium, High), and Carriage Position.
• Real-time Visualization: A canvas-based interactive diagram that updates to show the knee angle arc based on current inputs.
• Joint Stress Indicator: A color-coded scale (Green/Yellow/Red) indicating estimated stress levels on the patellofemoral joint based on calculated flexion angles.
• Calibration Mode: An advanced settings toggle allowing users to adjust baseline measurements for non-standard reformer models.
• Instructional Overlay: Toggleable tooltips that provide context on why specific angles are preferred for rehabilitation versus athletic performance.

User Interface (UI) Layout

1. Header: Clean, centered title: "Pilates Reformer Footbar Mechanics Calculator".
2. Main Workspace: A dual-column layout (on desktop) or stacked (on mobile).
   • Input Panel (Left/Top): Form fields with clear labels, modern slider controls, and numeric inputs.
   • Visualization Panel (Right/Bottom): An SVG-based dynamic diagram showing the reformer frame, footbar, and simplified limb geometry.
3. Data Output: A persistent results card displaying the "Calculated Knee Angle" and "Stress Assessment" with a brief textual explanation.

Design System & Aesthetics

• Color Palette: Professional, clean, and clinical.
  • Background: #FFFFFF (pure white).
  • Primary Accent: #3B82F6 (vibrant professional blue).
  • Warning/Stress: #EF4444 (for high stress zones).
  • Neutral Text: #1E293B (deep slate).
  • Card Backgrounds: #F8FAFC (soft slate grey).
• Typography: Inter or a similar high-readability sans-serif font stack.
• Micro-interactions: Smooth CSS transitions on form inputs, fade-in animations for results cards, and gentle easing when updating the SVG visualization.

Technical Implementation Constraints

• Single File: All CSS, HTML, and JS must reside in a single index.html file.
• No Persistence: Do not use localStorage or sessionStorage. All calculations must be performed in-memory.
• Performance: Use requestAnimationFrame for smooth canvas/SVG updates during slider movement.
• Responsive: Fluid CSS (Flexbox/Grid) for mobile responsiveness. No fixed pixel widths.
• Dependencies: Only CDN-linked libraries (e.g., Tailwind CSS for styling) are permitted.