A concept site for a residential architecture studio in Tennessee. The studio is fictional; the site is real, designed and built in Next.js. These are the decisions behind it.
A studio that does not exist should never pass as one that does. Every page carries a short note saying the studio is a concept. The phone number sits in the 555-01 range, which is reserved for fiction, and the address is in a town that does not exist. The site stays out of search results until it launches.
The gallery holds six homes, and every home has a model: a grayscale render on pure black, the way a studio presents a scheme. One toggle swaps every house for its model in the same slot, so you compare a building with its drawing without leaving the gallery or losing your place.
The first plan had fifteen homes. That meant thirty images, and the gallery said the same thing fifteen times. Six homes, each with a model, says it once, clearly.
Several models ran off the edges of their frames: a ground plane, a garage wing, a run of gables. On the black canvas those edges would show as hard rectangles. Each model is feathered into pure black at its edges, so it floats on the canvas instead of sitting in a box.
The images also keep their native 16:9 instead of being cropped to the 3:2 the first plan assumed, so no composition is lost.
The gallery is a drag field laid out on a torus. Drag past any edge and you arrive from the opposite one, so there is no end to the gallery, only more of it.
The six slots are relaxed so that no two images sit closer than a fixed gap. The first layout opened with the hero low in the frame and the top half empty, so the whole field was shifted until it opens with Harlan House in the middle.
One property is text only. Hovering it shows a small "Coming soon" label at the cursor, in the same type as the hero's View label, clamped so it never covers the word.
The studio statement is set large. At fixed sizes, six of its eight lines clipped at 768 and 1024 px. It is now fluid between tablet and desktop. Measured after the change, no line clips anywhere from 390 to 1920 px, and the statement clears the property column by at least 37 px.
// the statement: the phone keeps its own rule; from md up it is fluid, 17px to 32px// measured: no clipped line anywhere from 390 to 1920 pxconst bigType = "u-grotesk text-[clamp(17px,3.7vw,32px)] md:text-[length:clamp(17px,calc(2.6vw_-_3.3px),32px)] leading-[0.965] tracking-[-0.8px]";The gallery captions originally separated a name from its location with a spaced dash. A spaced dash between two fragments is one of the clearest tells of generated copy, so the separator became the site's own hairline rule. Option labels use "to" and commas instead, and even the clock's loading placeholder is an empty space rather than a dash.
The launch film at the top of this note is a 6.4 second silent loop in 4K. It is made only from captures of the site: nothing was designed for the video, so it shows the thing itself.