I started the css and decided to keep it pretty simple instead of trying to make another “ai” looking site because thats basically what everyone complained about.

I went with a more tool/workshop type design with mostly square borders, a basic colour palette and some small grid details inspired by a printer bed.

The calculator is split into the inputs on the left and the live price on the right. I made the result sticky on desktop so you can always see the price while changing stuff.

I also made sure large prices wrap and scale down instead of going outside the box because someone found that problem while reviewing it.

I finished styling:

• Light and dark mode
• All the calculator inputs
• Cost breakdown bars
• Calculation explanation
• Saved calculation history
• Buttons and error states
• Tablet and phone layouts
• The footer and about section

I was going to use GSAP, anime.js, motion and some of them React animation sites but then realised they all basically do the same thing and React Spring would need me to rebuild everything in React.

I just used Motion for a couple small animations when the page loads, when the result changes and when a button is clicked. I didnt want to go crazy with it because its meant to be a calculator not some massive animated website.

I also added reduced motion support so the animations turn off if someone has that setting enabled.

Next

• test every input and currency
• check saving and loading calculations
• test it properly on my phone
• fix anything broken
• update the readme and ship it again