Posted on Jul 24

AR Smart Glasses HUD – Office Life Through CSS Art

#devchallenge #frontendchallenge #css #javascript

Frontend Challenge CSS Art Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

For this challenge, I created an Augmented Reality Smart Glasses HUD – showing a digital overlay of "office culture" as if you are wearing AR glasses in a modern workspace.

The design combines classic office details (open space, busy desks) with a futuristic, clean heads-up display (HUD): popups, notifications, battery, project progress, and a real-time message all blend into a sci-fi vision of our digital work lives. Everything is rendered using pure CSS and HTML, with a touch of JavaScript only for animation and typewriter effects.

Demo

GitHub Repo:

github.com/Noelmarketing/smartglasses

Live Preview:

https://noelmarketing.github.io/smartglasses/

noelmarketing.github.io

Journey

The idea was to visualize the feeling of being "augmented" at work:

Our productivity, chats, calls, and KPIs always in view – through the lens of office glasses.

CSS Art Approach: I wanted to see how far I could push CSS for drawing UI, reflections, scanlines, glowing borders, AR effects, and even realistic glass reflections.
Positioning Challenge: The biggest challenge was positioning the glasses and their "temples" (side bars) so they always connect exactly to the lens edge, at every screen size.
Accessibility: I added a High Contrast mode for accessibility.
Animations: Animated popups, subtle scanlines, and a typewriter effect make it feel alive but never distracting.

AI/Assistance:

This project was built with the help of ChatGPT – for brainstorming, code structure, debugging CSS, and making the layout as clean as possible.

All creative choices, UI design, and the final assembly are my own.

What I learned: