Noir
The clinic after dark.
- Status
- Live
- Year
- 2026
- Made with
- Next.js 16, Motion, Dark luxury, Mobile first
meteoricstudio-medspa-noir.netlify.appThe second clinic, rebuilt on the same bones as Terracotta and dressed for the night. It's also the one where I let the motion loose.
Why it exists
Once Terracotta was up, I wanted to find out how much of a website is skeleton and how much is skin. So I took the second real clinic, gave it a new name, and rebuilt it on exactly the same foundation: the same thirteen treatments, the same single content file for every price, the same legal pages and booking logic. Then I threw the look away completely and started again in black. If the structure underneath was right, it should survive a complete change of clothes without a single page breaking.
Paper, then night
It opens on paper: a warm cream page with the words skin remembering its own balance set huge across it, half upright serif and half sweeping italic, and a navigation rail running down the left edge like the spine of a magazine. Then you scroll and the lights go out. Everything after the hero sits on near black, with white type and one thin line of bronze kept for prices. Square cards, pill buttons, and nothing rounded that doesn't need to be.
Where it moves
- The liquid window
On desktop the hero image sits inside a shape that slowly moves like liquid, and you can grab it. It drags, stretches and springs back into place.
- The glass dock
On a phone the hero text rides in a frosted glass panel docked to the bottom of the screen, right where your thumb already is.
- The editorial menu
The mobile menu is a full screen takeover, numbered like a table of contents, with the phone number and a booking button waiting underneath.
- The curtain
The footer doesn't scroll into view. It waits under the page and gets uncovered, like a curtain lifting on the wordmark.
- The lights coming up
The hero never arrives all at once. The headline, the words over it, the buttons and the window each come in on their own beat over a few seconds, like a room slowly being lit.
- Sideways, not down
Reviews and results become snap carousels on a phone, so nobody has to thumb through an endless column just to reach the booking button.
Inside Noir
Clinical leadership, the offer, the practice, the proof, the reviews, the curtain
Breaking my own rules
Terracotta allows exactly four moving things. Noir throws that rule out. I wanted to feel where the line sits between motion that makes a place feel expensive and motion that makes it feel like a template showing off. Every effect had to earn its place on a phone first. A few that looked great on a big screen got cut or rebuilt for mobile, because they got in the way of the one thing the page is for, which is getting someone to book.
The rest of the house
The philosophy, the treatment menu, booking
Same skeleton. A completely different room.
Under the hood
- Stack
- Next.js 16 · React 19 · TypeScript
- Motion
- Motion for React · drag physics
- Palette
- near black · white · bronze
- Shared with Terracotta
- content, pricing, legal, booking
- State
- Live · static export
Verdict
Built as a pair, they taught me what I was actually after. A real business website is mostly structure: the content, the pricing, the legal pages and the path to booking. If you get that right, the design is a costume you can change without anything underneath falling over. Terracotta is the clinic you visit at noon. Noir is the same clinic at eleven at night.
