Hollin & Daughter is a fictional mother-and-daughter hair salon on Gloucester Road, Bishopston, Bristol: cuts, colour, balayage, blow-dries and bridal hair. It opens light (warm white, blush and sage fields, aubergine ink, one berry brand colour), with sage, butter and a dark night on the palette knob. The hero says the business in two lines (“Hair salon in Bristol / cuts, colour & balayage”), one primary action (Book an appointment) and real photos on the first screen. The salon mirror gives the page its shape: photos, monogram cards and hover states use an arch.
One motion language: entrances power3.out 0.5–1.1 s, state changes and wipes expo.inOut 0.6–1.05 s, scroll-linked pieces ease: 'none' with scrub, Lenis smooth scroll (duration 1.15). The headline rises out of SplitText line masks, the hero photo rises inside its arch, a round hands-at-work photo turns in and the rating and “Since 2009” count up. Next free chairs computes two real-looking slots from today’s date and the opening hours; tapping one fills stylist, date and time in the form. The salon-floor photo then parts open from the centre like a hair parting (clip-path: inset() scrub) while it settles from 1.2× to 1×.
Services & prices is a tabbed list (Cuts & styling, Colour, Balayage & lightening, Treatments, Bridal & occasion) with Junior / Senior / Creative Director columns and times; on phones a level switch shows one column at a time, and on desktop a photo of the look follows the cursor over rows that have one. The signature is Find your look and your price: choose hair length (drawn icons), service and stylist level, and the price and chair time tween while a matching real photo is combed into the arch (staggered rounded strips, combTeeth of them). Bridal disables Junior, short-hair balayage becomes a face-frame, colour services show the 48-hour patch-test note, and Book this look fills the booking form. Then a three-column lookbook (Flip filter, column parallax, arch-on-hover), the 20% new-client offer with gift vouchers, monogram team cards, products and the refill bar (plain text, no brands), sample reviews, the FAQ (patch tests, cancellations, deposits, toner vs gloss vs root smudge), the booking form with a live price and success state, hours with a Today pill, and a self-drawing map with bus, train, car and access notes.
Images: twenty Unsplash photos (salon floor, styling, foils, balayage, finished cuts and colour from behind, bridal hair, hands at work, bottles on a shelf) for the live preview only; not included in the template, listed in public/assets/hollin-refill/LICENSE.txt, one shared warm, soft grade. No face photo on a stylist card or review. Fonts: Instrument Serif + Hanken Grotesk (OFL). The phone uses the Ofcom drama range (0117 496 0xxx); names, reviews, prices and the address are samples.
Gotchas: each comb tooth is 70px taller than the frame so its rounded end never shows at rest; the strips use the frame’s pixel size for their background, so the frame must keep a fixed aspect. Flip runs with absolute: true and refreshes ScrollTrigger afterwards because column heights change. The look picker uses native radio groups (arrow keys and touch work for free). Under reduced motion there is no Lenis, no SplitText, no parallax, no comb (photos swap), counters show final values and the map is drawn.
medium 
medium 
medium 
medium