Building a Bike Stem Spacer / Stack Calculator

I'm both a programmer and a mountain biker, which led me to build a tool I thought might be useful for other riders. It's a Stack Spacer Calculator, and you can find it on SomeBikeTools.com. Here's why I made it and how it works.

How Spacers Affect Your Bike Fit

Bike fit is important for comfort and performance. One common adjustment is changing handlebar height by adding or removing stem spacers. This vertical change also affects your reach (horizontal distance from BB to head tube) because of the bike's head tube angle.

I wanted to know how much my reach was changing when I raised or lowered my bars. I also wanted to see how reach would change if I tried to match the stack height of one bike to another. After doing these calculations a few times by hand, I decided to write some code to do it for me.

The Math That Makes It Work

The solution uses basic trigonometry. When you add spacers under your stem, you're moving along the head tube angle, not straight up. This creates a right triangle where:

• Stack delta - The vertical change (opposite side)
• Reach delta - The horizontal change (adjacent side)
• Spacer change - The hypotenuse

Using trigonometry, we can calculate how spacer changes affect stack and reach:

// For vertical changes:
sin(headAngle) = stackDelta/spacersDelta

// For horizontal changes:  
cos(headAngle) = |reachDelta|/spacersDelta

From Math to Code

Here's the function that does the calculations:

const stackToSpacers = ({
  headAngle,
  stackDelta,
}: {
  headAngle: number;
  stackDelta: number;
}) => {
  // Convert headAngle to radians
  const angleInRadians = (headAngle * Math.PI) / 180;

  // Calculate spacersDelta using sin(headAngle) = stackDelta/spacersDelta
  const spacersDelta = stackDelta / Math.sin(angleInRadians);

  // Calculate reachDelta using cos(headAngle) = reachDelta/spacersDelta
  // The sign of reachDelta should be opposite of spacersDelta
  const reachDelta = -1 * spacersDelta * Math.cos(angleInRadians);

  return {
    spacersDelta: Number(spacersDelta.toFixed(2)),
    reachDelta: Number(reachDelta.toFixed(2)),
  };
};

Seeing It in Action

Let's look at a few examples:

• 90° head angle (theoretical): With a vertical head tube, adding 10mm of spacers gives exactly 10mm more stack with no reach change. The formula returns {spacersDelta: 10, reachDelta: 0}.
• 45° head angle: At this angle, adding 10mm to stack requires about 14.14mm of spacers, and reduces reach by 10mm. This happens because at 45°, stack and reach changes are equal (sin(45°) = cos(45°) = 0.707). The formula gives {spacersDelta: 14.14, reachDelta: -10}.
• Typical mountain bike (~63-67° head angle): For most modern mountain bikes, every 10mm stack increase requires about 11mm of spacers and shortens reach by 4-5mm.

Why This Matters for Riders

Knowing these numbers helps you make better choices when setting up your bike:

• That more upright position you get from adding spacers also brings the bars closer to you—explaining why your cockpit feels more compact when you raise your bars.
• If you're trying to match the feel of another bike or dial in a specific position, you can now calculate exactly how many spacers you need to achieve your target stack height.
• What you might have felt intuitively on the trail now has numbers behind it: every adjustment to bar height creates a compound effect on your overall riding position.

Building the Tool

I built the calculator using React, TypeScript, and TailwindCSS, with Shadcn components for the UI. The interface is simple: input your bike's head tube angle and desired stack change, and it calculates the spacer adjustment and reach difference.

Try it yourself at SomeBikeTools.com/spacer-calculator. The code is also available on GitHub if you want to see how it works or suggest improvements.

Taking It Further: The Bike Comparison Tool

After making the spacer calculator, I realized I could also help compare the fit between different mountain bikes. This led me to create a bike comparison tool.

Check it out at SomeBikeTools.com/bike-compare. This expanded tool lets you:

• View critical geometry measurements for two bikes side-by-side
• Calculate the exact spacer adjustment needed to match stack heights between bikes
• See how reach changes after making these adjustments
• Compare weight distribution differences based on rear center ratio

The screenshot above shows a comparison between a Santa Cruz Bronson V5 XL and a Transition Spire XL.

• To match the Bronson's stack height, you'd need to add 26.9mm of spacers to the Spire
• This adjustment would decrease the Spire's reach by 12.2mm, bringing its effective reach down to 497.8mm
• Despite initial appearances of significantly different geometries, these bikes can be set up to feel remarkably similar with the right spacer adjustments

Wrap Up

This project combines programming and my interest in mountain biking. If you've ever wondered about handlebar height or how your bike's geometry affects your riding position, I hope these tools help. Happy trails!