How I Reimagined "Boring" Web Utilities with Three.js and 100% Local Privacy
We’ve all been there: You need to record a quick screen clip, convert a file, or run a financial projection. You search for a tool, and you’re met with a website that looks like it was designed in 2005—clunky UI, intrusive ads, and the constant fear of where your data is actually being uploaded.
I built ToolsAreCool because I was tired of "ugly" utilities. I wanted to see if I could build a suite of tools that felt like high-end SaaS products, without sacrificing the speed and privacy that simple utilities require.
The Vision: Utility meets High-End Design
My goal was to create a "motion-first" experience. Most utility sites are static. I wanted ToolsAreCool to feel alive. To do that, I leaned into a tech stack that most people wouldn't dream of using for a simple calculator:
Nuxt (Vue) + Tailwind: This is the backbone. It gives the site that "instant-load" feeling where navigating between tools is seamless.
Three.js Shaders: I didn’t want a flat background. I implemented custom fog, fluid cursors, and gradient shaders to give the site a premium, "glassmorphism" aesthetic.
@vueuse/motion: I obsessed over the micro-interactions. Every hover state, transition, and modal entry is choreographed to feel fluid and intentional.
Vue-Chartjs: For the finance calculators, I wanted users to see their data. Instead of just numbers, you get real-time, interactive financial projections.
Why I'm building this in public
I believe that the "utility" space is ripe for a design-led revolution. You shouldn't have to trade your privacy or your aesthetic standards just to get a job done.
I’m currently refining the UI and adding more tools to the suite. I’d love to get the community's feedback:
Designers: Is the motion too much? Does the glassmorphism work for a utility tool?
Developers: Have you worked with local-first recording or Three.js shaders in a Nuxt environment? I'd love to swap notes on performance optimization!
Check it out: toolsarecool.com
