Easily calculate your mountain bike suspension sag and base air pressure settings. Accurate online tool for MTB fork and rear shock tuning for better performance.
AI Generation Prompt
Mountain Bike Suspension Sag & PSI Calculator Specification
Overview
A high-performance, responsive, single-file web utility designed to help mountain bikers calculate baseline air pressure for forks and shocks. The app features a clean, professional, and accessible UI suitable for use on a mobile phone trailside or at a workbench.
Core Features
- Dual-Mode Calculator: Toggle between 'Front Fork' and 'Rear Shock' modes.
- Weight Unit Toggle: Support for both Kilograms (kg) and Pounds (lbs).
- Sag Percentage Slider: A visual range slider (15% to 35%) with discrete steps for common sag recommendations.
- Dynamic Result Card: A prominent display card that generates estimated PSI based on input variables.
- Setup Guide: Integrated tooltips providing brief context on what sag percentage to choose for specific riding styles (e.g., XC vs. Enduro).
- Reset Functionality: A clean button to clear inputs without page reloads.
UI Layout
- Header: Simple, descriptive title with a 'Refresh' icon for resetting state.
- Main Tool Area:
- A segmented control for selecting 'Fork' or 'Shock'.
- A clean, modern input field for 'Rider Weight' (with unit toggle).
- An intuitive range slider for 'Target Sag %'.
- A 'Calculate' action button with high-contrast hover states.
- Results Section:
- A centered, large-font PSI output display.
- An 'Adjustment Tips' section that conditionally appears based on the calculated result, offering advice like 'If it feels too harsh, reduce pressure by 5 PSI'.
Color Palette (Light-Mode Only)
- Primary: Cool Ocean Blue (
#0066CC) for primary actions and highlights. - Background: Crisp White (
#FFFFFF) with subtle light gray (#F8F9FA) background containers. - Text: Slate Gray (
#334155) for high readability. - Accent: Soft Emerald (
#10B981) for success states and recommended settings. - Shadows: Soft, diffused shadows (
0 4px 6px -1px rgba(0, 0, 0, 0.1)) to create depth without dark-mode styling.
Animations & Interactions
- Micro-interactions: Buttons scale slightly (
scale-95) on click to provide tactile feedback. - Transitions: Input labels and cards fade in smoothly (300ms) when the page initializes or content updates.
- Responsiveness: The layout stacks vertically on mobile devices and utilizes a side-by-side split screen for tablets and desktops.
Technical Constraints Compliance
- Single File: All logic (Vanilla JS), structure (HTML5), and styles (Tailwind CSS via CDN) must exist in one
.htmlfile. - Storage: No
localStorageorsessionStorageusage. All calculations are ephemeral and held in memory variables. - Compatibility: Designed for an iframe sandbox environment. No absolute positioning that breaks outside parent bounds. No
alert()orconfirm()—all feedback is provided via UI-native banners/modals.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is mountain bike suspension sag and why is it important?
Suspension sag is the amount that your mountain bike's front fork and rear shock compress under your body weight while in the neutral, seated or standing riding position. It is the fundamental starting point for all suspension tuning, ensuring that your wheels can track the terrain effectively and provide proper traction. Setting the correct sag is vital because it determines how much suspension travel is available to absorb impacts versus how much is available to maintain contact with the ground. Incorrect sag can lead to harsh bottoming out, poor small bump sensitivity, or a bike that feels sluggish and unresponsive on technical trails.
How does this free mountain bike suspension tool work?
This calculator uses standardized mathematical models based on rider weight and common suspension design variables to provide a recommended baseline air pressure. By inputting your body weight, the type of suspension component, and your preferred sag percentage, the tool generates a starting PSI recommendation to get you close to your ideal setup. Please note that this is a baseline tool and does not account for specific suspension brand kinematics, leverage ratios, or volume spacer configurations. Use these numbers as a starting point, then perform fine-tuning adjustments based on trail testing and personal riding preference to achieve optimal performance.
Can I save my calculated suspension settings in this app?
This application operates as a privacy-focused, single-file tool and does not utilize browser storage, cookies, or databases to save your information. When you close the browser tab or refresh the page, any data entered into the fields will be cleared automatically to ensure user privacy and compliance with secure browsing standards. Because we do not store data, we recommend taking a quick screenshot of your final results or writing down the recommended PSI values in your phone's notepad or physical notebook. This allows you to keep a history of your preferred setup settings without the need for an account or persistent storage.
Why is proper air pressure critical for suspension components?
Maintaining the correct air pressure is essential for the longevity of your suspension seals and internal mechanisms. Running suspension with improper pressure—either too low or too high—can cause premature wear, inconsistent damping performance, and in extreme cases, damage to the air spring assembly or the shock body itself. Furthermore, correct air pressure directly influences the safety and handling characteristics of your bicycle. A well-tuned suspension setup provides predictable handling, prevents the bike from diving excessively under braking, and keeps the geometry consistent, which significantly increases rider confidence on steep or technical descents.
Related Applications
Free EDI X12 Syntax Highlighter & Parser Tool
@Akhenaten
Free Online SQL Query Minifier & Code Compressor Tool
@Akhenaten
Free Hardy-Weinberg Equilibrium Allele Frequency Calculator
@Akhenaten
Free Scroll Progress Bar Code Generator - HTML/CSS/JS
@Akhenaten