Hey everyone, I'm 15 and like many of you, I spend 8 to 10+ hours a day staring at screens. A while back, I realised I was constantly dealing with dry eyes, headaches, and physical fatigue by the afternoon—classic symptoms of digital eye strain (or Computer Vision Syndrome), which actually affects roughly 7 in 10 computer users.
When I looked into standard desktop ergonomics online, I noticed a huge issue: almost all advice is completely generic. Every article tells you to sit an "arm's length away," which makes zero sense if you have strong glasses or an astigmatism.
To solve this for myself, I used with Claude Code to build a clean front-end website that calculates your perfect workspace layout based on your exact prescription data. I call it The Ergonomic Eye (https://theergonomiceye.com).
The absolute coolest feature I wanted to build was a Live Vision Simulator. Instead of just showing numbers and text recommendations, I wanted to create an interactive area where users can drag sliders to see exactly how text blurs and warps for different eye conditions.
To make the text blurring happen smoothly in real-time, I asked Claude to use vanilla JavaScript to listen for changes on the HTML range sliders. The math updates the styling instantly on the front end, allowing you to see things like astigmatism distortion right in your browser.
The hardest part was figuring out how to mimic an astigmatism, since uniform blurring looks completely wrong. I had to combine text blurs with directional scaling along the exact degree axis specified by a user's prescription.
Apart from the simulator, the utility is packed with client-side modules that calculate data instantly on the front end. It includes a Clear-Vision Range Engine that converts raw prescription data into precise metric distances, pinpointing the exact boundaries where a user's vision starts to blur. The website calculates the optimal monitor distance and font size for the user based on their prescription and other eye conditions they may face. An Automated Action Planner conditionally generates quick eye exercises with countdown scripts that trigger native browser audio alerts and screen flashes. I built a feature allowing users to save their entire diagnostic metrics and action plans into a clean, presentation-ready PDF report without needing any heavy external print libraries. The website also recommends personalised products for the user and compares their eyesight with global trends.
Since I didn’t want to deal with backend server costs, hosting databases, or handling private health data, the site has zero database dependencies. Everything runs completely locally.
• Your configuration is saved to localStorage so it stays there when you close the tab.
• The timers and smart reminders run entirely inside the browser to remind you to rest your eyes.
This means the site runs instantly, costs nothing for users, and respects user privacy completely.
The site is fully responsive and live right now:
👉 https://theergonomiceye.com
Since I'm still working on my front-end and web development skills, I would love some feedback on the overall user experience. I’d be more than happy to try to implement your suggestions.
Top comments (0)