Property, interior and architectural photography

Darryl Snow Photography

A portfolio that waits for blue hour, then switches the lamps on.

The hero opens as a tilted, soft viewfinder, then levels, corrects its verticals and fires the shutter into this full-bleed frame.

Problem: Property portfolios tend to look like a grid of bright rooms, and our first design for this one scored 23 out of 40 in our own review.
Approach: We rebuilt the site around blue hour: pages move from daylight to dusk, the lamps switch on, and the work is a building you ride by lift.
Result: A complete concept build of 16 pages, not yet live. On a local copy, Lighthouse gave 100 for SEO and 92 to 96 for accessibility.

Client: Darryl Snow Photography
Where: London and Hertfordshire
Year: 2026
Status: Concept build
Work: Brand websites

Our role

Art direction
Motion design
WebGL shader development
Information architecture
Next.js build
Photo import pipeline

Built with

Next.js 16.3, React 19.2 (ViewTransition), GSAP 3.15 + ScrollTrigger, Lenis 1.3, OGL 1.0 (WebGL), Tailwind CSS 4, TypeScript, Vitest, sharp, Playwright

The problem

Property photography portfolios tend to look the same: a grid of bright rooms. Estate agents, developers and architects compare photographers quickly, often on a phone between viewings, so the difference had to show on the first screen rather than after twenty thumbnails.

Our first concept, "Quiet Room" (a Newsreader serif, a terracotta accent, soft fades), was competent and forgettable. Two rounds of our design review scored it 23 and 24 out of 40, and both reached the same finding: nothing on the page belonged to this photographer in particular.

The constraint was honesty. The original files carry no camera data (EXIF), there was no drone video yet and no daylight twin for the dusk shots. Every motion idea had to be built from the real photographs we had, without inventing lens data, locations or testimonials.

What we did

We rebuilt the site around the moment architectural photographers wait for: the light outside drops and the lamps inside come on. Each section is marked light or dark, and the whole page glides from paper (#eeece6) to dusk (#0f131a) over 900ms as dark sections reach the middle of the screen.

Every signature gesture comes from the camera or the building. An aperture intro meters from 000 to 100 and shows today's London sunset time. Sequence photos arrive with leaning walls and settle to true verticals, like a shift lens. The home page plays a shoot day from afternoon to dusk, and a graphics effect switches the lamps on, brightest first.

The portfolio is a building. Ten categories are ten floors, contact is the roof and the home page is the ground floor. Moving between pages works like a lift: the page drops away, the next rises in, a floor display rolls like a lift indicator and a shared cover image morphs between the index and the project.

All 92 photographs were imported by script from the Squarespace originals. This is a concept build, pitched to win the work, and it is not live.

What we considered

The decisions behind the build, with the reasoning and the evidence for each.

StrategyRetire a design that scored 23 out of 40 in our review

We discarded a finished design system because it failed the test that mattered: could it belong to any other photographer? A second pass on the same palette would have scored the same, so we rebuilt the idea instead of polishing the surface.

Quiet Room critiques: 23/40 on 29 May and 24/40 on 31 May 2026
Retired: Newsreader serif, terracotta accent, generic fade-ins
Blue Hour rebuild landed on 28 September 2026: 183 files changed in one commit
Rule written into DESIGN.md: no motion that does not come from architecture or photography

MotionDay to night inside one real photograph

The home centrepiece takes one genuine twilight photograph and plays it back through a shoot day. The shader grades it back to afternoon, warms it through sunset, then fades the lit regions up brightest first until the frame is the untouched photograph. The last frame is always the real file.

Scroll progress 0 to 0.55 runs daylight to sunset; 0.50 to 0.95 switches the lamps on
Lamp map = warmth × luminance, averaged over three rings of eight samples so whole windows light together instead of speckling
A mono clock runs from 16:14 to 19:10 alongside the scrub
Accepts a genuine daylight frame (uDayImage) when the photographer supplies one, replacing the synthetic grade
OGL instead of three.js: one full-screen quad does not need a scene graph

MotionChoreography borrowed from the camera

Each gesture maps to something a photographer does on site, so the motion explains the craft instead of decorating it. Two eases cover the whole site, and nothing bounces.

Aperture intro: meter 000 to 100, viewfinder brackets, open to full bleed; once per session
Hero levels itself in about 4s: tilted, keystoned and soft on load, then true verticals, focus lock and shutter
Drone fly-in: four real frames of one house (aerial, roof, approach, living room) joined by a WebGL zoom with radial motion blur
Mullion reveal: full-bleed frames open like louvres turning from the centre
Eases: level cubic-bezier(0.65, 0, 0.35, 1) for deliberate moves, settle cubic-bezier(0.16, 1, 0.3, 1) for arrivals

DesignThe site is a building

Finding your way around is literal. The nav shows which floor you are on, the lift page lists every floor with the one you came from lit, and every page change behaves like a lift arriving. It gives ten photo categories an order that visitors remember.

Floors 10 (The Concrete House) down to Commercial; R is Contact, G is Home
Lift transition: ViewTransition enter and exit 'lift'; floor digits roll 1.8em; shared cover morphs over 1000ms
Plan to photo on The Concrete House: the plan draws itself and rooms fill with their photographs through room-shaped masks, labelled 'Plan illustrative, not to scale'
Mobile menu closes like lift doors; the next-floor link parts its doors on hover

TypographyOne typeface in two widths, and a typewriter-style face for facts

Archivo can be set wide or normal, so one typeface does the work of two: expanded for architecture-scale display, normal width for reading. IBM Plex Mono is reserved for facts, and facts only.

Display: Archivo wdth 118, weight 560, line-height 0.9, tracking -0.035em
Body: Archivo wdth 100, 15 to 18px, line-height 1.6
Labels: IBM Plex Mono 12px, 0.06em, uppercase: plate numbers (PL. 004), floors, frame counts, the blue-hour clock
No lens or exposure labels: the originals carry no EXIF, so none is invented

ShowHide the other 4 decisions

DesignOne amber moment per screen

Amber is the colour of a lamp in a dusk exposure, so it is the only accent: lamps, focus rings, primary buttons and the shift-lens guides. Its scarcity is what makes the lamps-on moment land.

Amber #d9a35b is never used for body text on paper, because it fails contrast there
Header set in white with mix-blend-difference so it reads over paper, dusk and photographs
No rounded corners, no card shadows, no gradient text (DESIGN.md Don'ts)

AccessibilityEvery scene has a finished state

Motion is layered on top of a complete page, never required to reach it. Anyone who asks for less motion gets every scene in its end state, with nothing hidden behind a scroll pin.

prefers-reduced-motion: no intro, no pins, every scene rendered finished; CSS animations clamp to 1ms
The intro decision runs in a head script before first paint: skipped for reduced motion, deep links and repeat visits in a session
Viewfinder cursor only on fine pointers at 768px and wider; text fields keep the system cursor
Skip-to-content link; Lighthouse accessibility 92 to 96 across the four audited routes

PerformanceSpend the spectacle where the device can afford it

Graphics-heavy scenes that are the point of a section also run on phones; decorative effects wait for a capable device. Video is optional, never assumed.

Rich motion needs a fine pointer at 768px+, at least 4 CPU cores and 4 GB of device memory
Data Saver or a 2G/3G connection: no video, posters only
Video loops encoded as AV1, HEVC and H.264; the browser takes the first it supports
Reveals fire on IntersectionObserver; only the scrubbed scenes pin with ScrollTrigger
Lighthouse mobile (local production build): performance 81 to 95, cumulative layout shift 0 to 0.001

DataA scripted photo process instead of a folder of JPEGs

The photographs are the product, so their handling is scripted and repeatable. Swapping in new shoots, drone footage or a real daylight frame does not touch a layout.

fetch-squarespace.mts and import-photos.mts pulled 92 originals into ten floor folders
The manifest generator records each photo's size, luminance and blur placeholder; it runs before every build
ingest-video.mts writes AV1/HEVC/H.264 loops and a poster, and prints the entry for floors.ts
The blue-hour clock computes London sunset and civil dusk from the sunrise equation; 17 Vitest tests cover it, the floors model and enquiry validation

Colour and type

Paper#EEECE6Daylight sections and the lift page
Bone#E4E0D6Text and surfaces on dusk
Graphite#1B1B19Ink on paper
Mute#67645CSecondary text on paper
Dusk#0F131ATwilight sections, intro and footer
Dusk 2#171D27Raised surfaces on dusk
Haze#8E96A3Secondary text on dusk
Amber#D9A35BThe only accent: lamps, focus, primary actions

Spaces, in their best light.
Archivo ExpandedDisplay
Archivo on its width axis at wdth 118, weight 560, line-height 0.9, tracking -0.035em. Tight and architectural at very large sizes.
Property, interior and architectural photography, video and floor plans.
ArchivoBody
The same family at wdth 100 for reading, so the site uses two families in total.
PL. 001 · FLOOR 10 · SUNSET 18:44
IBM Plex MonoTechnical labels
12px, uppercase, 0.06em. Used only for facts the site can state truthfully.

The build, screen by screen

Aperture intro on dusk navy: a small blurred frame inside viewfinder brackets, a large 'Metering 100' counter and 'London, sunset 18:44' in mono. — The intro meters before it opens. The sunset time is computed for London on the day of the visit.

Day-to-night scene early in the scroll: a Georgian house and lawn in warm afternoon light with the clock at 16:14. — Afternoon: the shader's daylight grade of a real dusk photograph, lamps off.

The same house at blue hour with every window and garden light on, the clock at 19:05 and the line 'Now we shoot.' — Blue hour: lamps switch on brightest first until the frame is the untouched photograph.

Drone fly-in frame looking straight down on a flat green roof with a large rooflight, captioned 'Over the roof'. — Frame two of four in the fly-in, built from the photographer's own stills of one house.

A floor plan of The Concrete House with four rooms filled by their photographs, room tabs below and a large dining room photo beside it. — Plan to photo: rooms fill through room-shaped masks as you scroll, and the plan says it is not to scale.

The lift page: a list of floors from R (Contact) down through 10, 09 and 08, beside a line drawing of the building with floor 10 lit. — The lift page lists every floor; the floor you came from stays lit.

Mobile hero: a grand piano in a concrete room under the headline 'Spaces, in their best light.' with a floor indicator in the header.

Mobile floor index listing floors 09 to 04 with titles, one-line descriptions and a small photo for each. — On phones the building index keeps a thumbnail per floor, because there is no hover preview.

By the numbers

Real photographs imported across ten floors: 92; Source: Counted in the build, imported from the photographer's own Squarespace originals
Lighthouse best practices and SEO on all four audited pages: 100; Source: Google Lighthouse, mobile setting, on a local copy of the finished build (not a live site), 28 September 2026
Cumulative layout shift, with pinned scenes and WebGL: ≤0.001; Source: Google Lighthouse, mobile setting, on a local copy of the finished build, four pages tested
URLs in the sitemap, including ten floor pages: 16; Source: The build's own sitemap

Where it landed

The Blue Hour build is complete: home, work index, ten floor pages, services, about, contact and the lift page, 16 URLs in the sitemap. It is a concept build, pitched to win the work, and not yet live.

On a local copy of the finished build, Google Lighthouse's mobile test gave 100 for best practices and SEO on all four audited pages, 92 to 96 for accessibility and 81 to 95 for performance. Content barely moved as pages loaded (layout shift at or below 0.001), despite scroll-pinned scenes and browser graphics effects.

The system is ready for more of the photographer's material. Real drone footage goes through one import script and replaces the fly-in built from stills, and a genuine daylight photograph drops straight into the day-to-night effect.

Start a build like this

Project facts