The showroom
The fancy stuff.
Most local businesses don't need any of this. The working demos next door answer real questions: are you open, do you deliver, what will it cost. This page is the other thing I do: the finish that makes a site feel expensive. Scroll slowly.
Fair warning: this page leans on JavaScript, on purpose. Turn it off, or ask your system for reduced motion, and you get the quiet version instead. Every other page here works fine without it.
Past this sheet, the lights go down
Piece one
Type that rides the scroll.
A specimen strip set in Fraunces, this site's own face. It drifts on its own, hurries when you scroll, and leans into a hard flick. With motion off it holds still and reads just fine.
- Open now
- &
- Book it
- set by hand
- Greensburg
- &
- Do you deliver
- Export
- galley proof
- What will it cost
- &
- Murrysville
One row of real text, one clone, one frame loop. No marquee library.
Motion study 05Composing room
Set the thought.
Lock the line.
Every careful page starts the same way: one decision, then another. Scroll to set fourteen pieces of type, tighten the measure, and lock a single thought into place.
- Method
- Hand set
- Measure
- 12 pica
- Pieces
- 14
Make it matter
Set one piece at a time
Piece two
Watch the ink go on.
Scroll through the word below slowly and the clay prints from the bottom up. Every piece on this site, plain or fancy, exists to do what it says.
booked.
Piece three
A card, printed in front of you.
Letterpress work ran one plate at a time, each pass registered against the last. Scroll and this card goes through the press the same way: clay, then brass, then the ink.
Land all three and you have the finished impression, which is exactly what visitors without JavaScript get straight away.
Hollow Run Dairy Bar
Soft serve · Hand dipped · Cash and card
(724) 555-0142
Invented shop (hollowrundairybar.example), same as the demos next door. The number will not ring.
Piece four
The pressroom, on film.
Every video on the internet came from somewhere. This one came from a script: the wordmark screened into halftone dots, four plates at the classic press angles, each pass rolling on before the next, rendered one frame at a time and stitched with ffmpeg. The whole film weighs less than half of one photograph.
With motion allowed it runs on its own as it scrolls into view. Otherwise the press waits for you.
Rendered from code on this side of the screen. No stock footage, no camera.
The second reel: a printer's loupe circling the studio seal. Under the glass, the badge shows its own source.
Piece five
The site, set from its own DNA.
Before this wing was built, the site was read back out of its own stylesheet into a design profile: the palette, the type, the feel, the timing. These cards are that profile, quoted verbatim. On a wide screen the scroll walks you along the galley sideways; on a phone, you pull it along by hand.
Palette plate
- Paper#F7F3EE
- Ink#141414
- Clay#7A2E2A
- Clay, lifted#C26A61
- Brass#C9A46B
The lifted clay exists because the original measured 3.94:1 on the dark page and failed AA. This one measures 5.12:1.
Type case
Fraunces
Display · SOFT and WONK axes live
Inter
Body · loads optional, never blocks paint
IBM Plex Mono
Labels, kickers, receipts
The impression
Film grain over everything, at 0.05 on paper and 0.07 in the dark. Buttons press IN by one pixel in ninety milliseconds, the letterpress bite. Shadows fall; they never glow.
--grain-opacity: 0.05 / 0.07
:active { translateY(1px), 0.09s }Motion
Two easings carry most of the house: a long settle for arrivals and a snap for feedback. Scroll pieces scrub with the wheel, and everything that moves on its own bows out when your settings ask for stillness.
settle: cubic-bezier(0.16, 1, 0.3, 1)
snap: cubic-bezier(0.5, 1.6, 0.4, 1)
hover 0.35s · bite 0.09sHouse rules
- Contrast is measured in both themes, never assumed.
- Text never dims through opacity.
- Sentences never open with a numeral.
- Every claim on the site survives a checker that reads the built page.
laurel.dna.json
{ "palette": ["#f7f3ee", "#141414", "#7a2e2a", "#c9a46b"], "type": ["Fraunces", "Inter", "IBM Plex Mono"], "feel": "warm paper, letterpress", "motion": "scrub, or press to play" }The profile came out of the stylesheet first. Then it art-directed everything new on this page, so the wing matches the house.
Piece six
Depth, from a flat sheet.
A press bed is layers: the paper, the furniture that locks the form square, the type itself, and the ink sitting proud of everything. Scroll past this one and each layer rides at its own speed, nearest moving most, which is all parallax has ever been.
With motion off, the layers sit in register instead, and that still stack is the finished design, not a fallback.
Set solid, printed deep
Four layers · one sheet · no photograph
Nearest layer rides fastest. The registration marks hold still on purpose.
Piece seven
The make-ready.
Before a run, a pressman pulls trial sheets: set the rules, settle the sorts, take a test impression, adjust. The button rebuilds this card the same way, one sequence, every step timed against the last rather than fired off on its own.
This one runs on your press of the button and no other way, so it works even when your system asks websites to keep still. That setting silences autoplay, not you.
Ready to print.
Halftone ink, computed where you press. No two pulls match.
Piece eight
The California case.
Hand compositors kept their metal type in a California job case and set it letter by letter into a composing stick. This one arrives already set. Press the button and the line comes apart into the case; then put it back. Fling a sort with a mouse and it carries real momentum. Tap one, or focus it and press enter, and it sets itself.
Four of the sorts belong to some other job. A stick is honest that way: it only takes the letter the line wants next.
Composing stick
The case
The line is set.
Piece nine
The swatch book of time.
A print shop keeps a swatch book so nobody argues about which red. This site keeps one for time: the four curves the house leans on hardest, printed with their numbers. Press Run and a sort travels the track on that exact curve, at that exact speed.
The settle
0.95s · cubic-bezier(0.16, 1, 0.3, 1) · every arrival rides it
The snap
0.35s · cubic-bezier(0.5, 1.6, 0.4, 1) · hover states and toggles
The scrub
no clock · linear · progress is wherever the scroll is
The bite
0.09s in the buttons · slowed to 0.6s here so you can watch it
Piece ten
The mark, in three dimensions.
The seal at the top of this page is flat on every other screen it appears on. This one is the same mark built as a real object: modelled, lit, and exported, then rendered in your browser by the graphics card rather than drawn as a picture. Press the button and it loads and turns.
It waits for your press on purpose. The model is heavier than the rest of the page put together, so it stays off the wire until you ask for it, and it holds still until then even when your system allows motion.
A real model, rendered on your side of the screen.
Piece eleven
The printer's loupe.
A pressman checks a proof through a loupe, a small glass that bends the sheet at its rim. The one resting on this specimen is a real lens, not a picture of one. The letters under it are live text on this page, and the browser bends them through an optical map computed from the refractive index of glass. Drag it across the sheet and watch the edge.
Chrome and Edge can bend a page behind glass today. Safari and Firefox cannot yet, so there the loupe frosts instead, and the line under the sheet says which you got. The lens is the one piece here I did not write: an open-source engine called QuickLiquid, wired to this page's own type.
The frosted pane, until the lens loads.
Piece twelve
The quiet flourishes.
Where motion is allowed, the seal turns all day without asking for attention, and the brass button below leans toward a mouse cursor before you have committed to it. Small things, and they are most of what "feels expensive" actually means.
One more, easy to miss: with motion on and a mouse in hand, your cursor has been leaving faint ink on the paper this whole time. Look behind it.
This is the level of finish that comes with a Premium build, and it never comes at the cost of the boring things done right: the hours, the phone number, the page that loads.
Order of operations
Showpieces, not necessities.
None of this gets a plumber booked. Menus, hours, and quote buttons come first, and they live on the working demos page. Once those basics are squared away, this is the finish I bring to a business that wants the best-looking site on Main Street.