The brief
Lumina is a boutique aesthetics clinic in Príncipe Real, Lisbon: anti-wrinkle injections, fillers for lips, chin and jawline, and skin-quality protocols. No surgery, no threads, no permanent implants. The consultation is €60 and forty-five minutes and comes off the first treatment; skin protocols start at €180 a session and injectables at €350. Four practitioners, all named, all with faces.
The difficulty is proof. The category sells transformation and photographs it in before-and-after grids. Lumina sells the opposite, and a good result is one nobody notices, so there is nothing to photograph.
The idea
The page looks at you the way the consultation does. It shows the process a result comes out of: one face, looked at one area at a time, and a plan that says which areas to leave alone. Restraint is argued with what the clinic declines to do, printed at full size.
The page opens on the room itself, full-bleed: travertine, oak, window light on the stone, and the woman from the consultation map seated on a linen daybed. The headline sits on the plain stone at 52px in Plus Jakarta Sans at weight 300, in ink, with no scrim; placement does the work, at 7.9:1 or better on the pixels behind every word. After it, one shape answers everything, the lozenge, used as a lens with a crisp edge on each photograph that follows. Nothing on the page rises or slides; photographs settle out of a slight crop. The ground is warm cream, and white is kept for the booking form alone.
The signature move
The consultation map. One photograph of one woman, pinned under the header for nearly three screens of scroll: a crisp plate cropped so her face is the middle of the screen, sharp from edge to edge, with the lens drawn over it as a white rim. The labels sit on the cream either side of the plate, three to the left and two to the right, on leaders that cross its edge.
Then five areas are marked in turn, each latching as the scroll passes its point and never un-written on the way back. A stadium lands on the forehead, a hairline draws out past the plate's edge, and a label comes in with the treatment, the dose in words and the price. Crow's feet, mid-cheek, lips, jawline. Two of the markers are hollow: the lips are already balanced and the jaw can wait for the next review, so both lines read €0, and the frame ends on its verdict at display size. Five areas looked at. Two left alone.
The geometry lives in the photograph's own coordinates: the plate is a fixed crop of the master, so a zone at 68% across and 20% down lands on the forehead at any size, and the leaders are SVG in the plate's own viewBox. Each label's width is what its side of the screen leaves after a 40px gutter, checked at 35 viewports from 1280 to 1920 wide. On a phone there is no pin: a 4:5 crop of the same image, numbered markers, and the labels as a ruled list.
A clinic that sells restraint shows it where a prospect can check it: on a face, in writing, with €0 printed on the lines it declines.
Why it converts
The price is the objection clinics hide, so Lumina prints it wherever the doubt arrives: beside the button in the hero, in a price list whose numerals are the image, in the FAQ, and beside the person who would see you. The fear under the price is looking done, and the map answers it before anyone asks by showing the clinic leave areas alone. The note says it in the first person, beside the empty consultation room in a full-height lens and under a 22vw "1 in 5": about 380 of 1,900 consultations since 2020 ended with nothing booked.
The conversion is the practitioner match. Choose what you would like looked at (lines, lips, skin, or not sure yet) and the named person who would see you wipes into the lens with €60 · 45 min beside them. Then a day, and the calendar offers only Tuesday to Saturday, opening on the month of the usual first free hour nine days out. Every button on the page says book a consultation and lands on that form, with focus moved to its heading once the scroll lands, and the success panel says first that nothing was sent. The page closes where a patient arrives: the shopfront, sharp, with the lens drawn over its glass door, and the address at display size.
How it is built
React, Next.js, GSAP ScrollTrigger and Lenis, every animation behind gsap.matchMedia. An inline script arms the page before first paint, and only when motion is welcome, so the server-rendered page is the finished page: no JavaScript and reduced motion both get every mark drawn and the map as a static chart. The hero photograph is painted from the first frame and only settles out of a 1.04 crop; no image on the page is ever blurred.
The canon lives in one module: the areas, the prices, the match and the opening days. Tests hold the page to it, including the sentence the map ends on and a rendered check that the calendar disables Sundays and Mondays, a defect the previous build shipped. Contrast was measured on every surface a token sits on, the hero's stone included, and dim text is a colour, never an opacity. The imagery is nine self-hosted WebP files through next/image, about 690KB for the set.
Lumina Clinic is a fictional practice, invented so we could build the site it would need. The clinic, its practitioners and the woman on the map are not real, and its figures are invented. The build is: every section, every price, every line of code.
