A two-room spa that sells time rather than treatments. The site is a working booking calendar: pick a treatment, take a block on the grid, and the block you drag is the actual length of the appointment.
A spa site is usually a price list with a Book Now button that opens somebody else's software in a new tab. Quiet Hours sells one thing — an hour with nobody else in it — so the booking had to be the page rather than a link off the end of it.
So I built the calendar. Four treatments, five days, ten hours a day. You choose what you're coming in for first, and the duration becomes the block you drag: pick the ninety-minute deep tissue and you are moving a ninety-minute block, not choosing a start time and finding out the rest later. It snaps to the half hour, clamps inside opening times, and tests against that day's existing bookings before it will let go.
Everything else gets out of the way of that. Two rooms is a small business and the copy says so — come five minutes early, not fifteen, because there is no waiting room to sit in. The one thing the page cannot have is photography: there is no such spa, so the three pictures of the room are gradients, and the colophon at the foot says that rather than leaving you to assume a camera was involved.
Most booking widgets ask for a start time and tell you the length afterwards, on a confirmation screen. Here the treatment is chosen first and its duration becomes the object you move, so what sits on the calendar is exactly what is being held. Positions round to the nearest half hour, clamp inside the ten-hour day, and are tested against that day's bookings before a click is accepted.
Moving across a day paints a dashed ghost at the snapped position. If it overlaps something already taken it goes grey and the click does nothing. Hover and commit run the same overlap test against the same data, which is the only reason the preview and the outcome cannot drift apart — two tests would have disagreed inside a week.
Drag-a-block interfaces are usually pointer-only, and this one is assembled from ordinary elements rather than inputs, so nothing came free. Each day is a focusable control with a label, arrow keys step the block in half hours, and Enter commits it — the same clamp and the same overlap test, on a second path in.
Teal, mist and one ink. Three blurred fields drift behind the hero on twenty-six, thirty and thirty-four second cycles, slow enough that you only catch it if you stop and watch for it. Under reduced motion the drift and every reveal are off, and the page is simply still.
Tell me about it. I'll come back with whether it's a Tier 01 or Tier 02 job, a timeline, and a fixed quote.
hello@studiokiln.space