Concept piece · Interactive brand site
Auréa
A beauty brand site that feels as calm as its treatments. A curved gallery you can drag through, and a visit planner that keeps every step simple.
- Discipline
- Brand website design
- Build
- Static HTML · CSS · vanilla JS
- Interaction
- Curved 3D gallery · visit planner
- Type
- Self-initiated concept

01 The concept
Auréa is a concept for a beauty and wellbeing brand: facials, massage and finishing touches, sold on the feeling of an hour that belongs to you. The brief we set ourselves was a site that slows the visitor down the moment it opens, then makes it easy to choose a treatment and plan a visit without ever feeling pushed.
It runs to five pages: home, treatments, our approach, gallery and plan your visit. The register is soft and warm, with a cream ground, deep brown type, a fine display serif against a clean sans, and arched frames that echo the shape of a treatment room doorway. Every page ends with the same quiet invitation to find your ritual.
At the top of the home page sits the piece that carries the brand: seven treatment cards standing on a curved stage, turning gently towards you, that you can drag through like a fan of photographs.
02 The challenge
Beauty sites tend to fall into one of two traps. Some are calm but static, a stack of pretty photographs with nothing to hold your attention. Others reach for movement that feels busy and undoes the very calm they are selling. Auréa needed motion that reads as a slow breath, not a performance.
It also had to answer the practical questions a visitor brings with them. Which treatment? How long does it take? When can I come? And it had to do that without the booking feeling like a form to get through. Because this is a concept with no booking system behind it, the planner also had to be honest about what it does, and never pretend to confirm an appointment it can’t make.
03 The approach
The hero gallery is seven arched cards placed on a curve in 3D. The card in front sits closest and brightest, and the ones either side step back, angle away and dim a little, so the eye always lands in the middle. It moves on by itself every few seconds, and it can be dragged or swiped, stepped with the arrow buttons or the keyboard, or nudged sideways on a trackpad. It waits while you hover over it, while you are using it from the keyboard and while a preview is open, and a pause button stops it altogether. Visitors who prefer reduced motion find it paused from the start.
Click a card at the side and it comes to the front. Click the card in front and it opens as a larger preview with a single next step, Explore this ritual, which opens the planner with that treatment already chosen. The gallery page opens its photographs in the same preview, and further down the home page an arched slideshow moves through four treatment photographs, but only while it is actually on screen.
The treatments page sets out the three treatment groups as an accordion, each with a photograph, a short description, the time it takes and a button to choose it. The visit planner asks for three things: the treatment, a preferred date that can’t be in the past, and a time of day. Review selection then shows a clear summary, with the option to change it. Nothing is sent and nothing is booked, so the site never says otherwise.
Build. Five static pages in plain HTML and CSS, with one small JavaScript file and no framework. Fonts and images are served from the site itself at the sizes the layout uses, so the concept makes no third-party requests. Native dialogs handle the preview and the planner, and a close button, the Escape key or a click outside closes them. When the summary appears, focus moves to it, so keyboard and screen reader users land in the right place. On a phone the gallery tightens its spacing and the navigation folds into a menu.
04 In the build




- Pages
- Five static pages
- Gallery
- 7 cards on a curved 3D stage
- Input
- Drag, swipe, keyboard, trackpad, buttons
- Motion
- Waits on hover and focus · respects reduced motion
- Planner
- Native dialog · nothing sent or booked
- Build
- HTML · CSS · vanilla JS · no third-party requests
05 What it demonstrates
Auréa is a self-initiated concept by WebWork Software. It shows how a beauty brand site can feel calm and still guide a visitor from a first impression to a planned visit.
Auréa shows that a brand site can move and still feel restful. The gallery gives the home page a centrepiece people want to touch, the slideshow and previews let the photography do the selling, and the planner turns interest into a clear next step without a single field that isn’t needed.
It’s built for salons, clinics, spas and wellbeing brands that want their website to feel like the first few minutes of the appointment. Connect the planner to a real booking system and it becomes the front door to the diary.
See it move.
The concept is live. Open it, then tell us what you’d put at the centre of yours.