era-residence.com, hero section

Analysed: 02/10/2026 · By: Design Lab · Evidence: captures/era-residence.com/2026-10-02/ (summary.md, measurements.json, three follow-up files, frames). Third-party site, internal evidence only (ADR 0001). Every specimen built from it is our own drawing on an invented business.

Instruments: the exemplar-probe skill on full Chromium (renderer ANGLE Metal), then site-specific follow-ups. Scroll was tested with the mouse wheel and reachability with real clicks, because the first follow-up showed that scrollTo and CSS visibility both lie on this site (§5).

1. Why this site

Pete asked for one top site. Chosen from Awwwards' recent architecture winners on evidence, after a three-site triage (frames/candidate-triage-sheet.png):

• The highest award in the set: Site of the Month, August 2026 (design 7.81, creativity 7.73, overall 7.61; plus a developer award)
• Built in HTML and CSS: no WebGL, two small 2D canvases, Webflow with GSAP and Lenis. Everything in it transfers to our Next.js builds, unlike the first subject
• A business nobody arrives knowing, so the hero has to explain itself, close to the "builders doing considered work" the skill already names
• A type-led hero, where the first subject was led by a photograph

2. What was measured

The hero is two stages

1. A title card (div.preloader, 1440×1800, two viewports tall, pointer-events: auto) on a deep plum ground. Centred lockup, letterspaced labels either side on one line, a huge faint script watermark, a thin inset frame, a tagline at the foot.
2. A full-bleed render of the development, revealed as the card opens. Over it: "Select an apartment" and "Book a call" at top right, a day/night control, hotspot pins, and a circular rotating badge.

Type: three families

The root font size is exactly 1vw at every width (14.4px at 1440, 3.9px at 390):

Colour (declared tokens)

Paper on plum is 15.39:1. The paper is not tinted toward the brand hue (107° against 347°). It is almost exactly the first subject's "white" (#f4f4ed), a common warm off-white.

The curtain and the lock

• The card opens through a mask of three gradient panels plus an SVG shape, whose centre hole grows with scroll (349px, then 602px, then 1,767px wide at 0, 450 and 900px of scroll). On a phone the hole is visibly an arch (frames/followup-x-mobile-arch.png). The card is removed (display: none) at 1,800px of scroll on desktop and 1,688px on mobile.
• From load, the page is scroll-locked: html carries lenis-stopped and overflow: hidden. With the wheel every 2.7s: 0px at 3.2, 5.9 and 8.7 seconds; free at 11.4s; 394px moved at 14.1s. Identical in Playwright's Chromium and in Google Chrome. Both support H.264, all 8 videos were ready and all 41 images complete by 3.2s, so the lock is on a timer, not waiting on loading. Across four runs it lifted between about 9 and 13 seconds, and in one run it was still up at 13s.
• During the lock nothing can be pressed. Hit-testing the centre of every action (Accept, Decline, Select an apartment, Book a call) lands on an element inside the curtain, and real clicks time out.
• Positive control: after the lock, the same click on "Select an apartment" navigates to /apartments. The blocking was the lock, not the instrument.

Cost

17.1 MB over 67 requests; 16.0 MB of it images. Desktop and mobile download the same 42 image files. None of the 41 images is lazy-loaded; 28 have srcset, but a phone at 3x picks the 1600w variants anyway, and two are PNGs of about 1.9 MB each.

LCP: an image of 1,194,976 px² at 260 ms. At that moment it sits under the curtain, where nobody can see it, and the page is not usable for another ten seconds.

Accessibility, as found

• ✅ Focus uses the browser's default ring, which stays visible
• ❌ The cookie banner is first in the tab order and unclickable for the length of the lock
• ❌ Hotspot pins are divs: 22px, no role, no name, no text and no focusable ancestor. A click opens a material story card (frames/ control shots), which a keyboard can never reach
• ❌ Text falls to 5.58px at 992 wide (F2)
• ⚠️ Reduced motion: the intro frames are identical with the preference on. Whether the lock is shorter under it was not measured

3. Techniques

E1 · A title card that opens through a shape drawn from the subject

What: the first screen is a typographic title card, and scrolling opens it through an arch: the building's own architectural motif. The cookie card repeats the family with cut corners.

Why it matters to our skill: the skill carries an open, flagged tension. "Layout Laziness" says use waves, angles and blobs, while the editorial direction is deliberately flat. This site suggests the resolution: a decorative shape earns its place when it is drawn from the subject's own geometry. An arch for a Mediterranean development, a gable for a builder, a contour for a surveyor. Waves for a law firm come from nowhere and read as decoration.

Suits: property, hospitality, architecture, any client whose product has a shape of its own. Does not suit: a subject with no shape to borrow, and visitors who came to act quickly. Failure mode: everything in F1. Our specimen keeps the arch and drops the lock.

E2 · Three-voice lockup with letterspaced flanking labels

A condensed high-contrast serif carries the name, a script word crosses its foot, and the place name is split into two widely letterspaced labels (0.8em) sitting on the lockup's line either side. Suits property, hospitality and luxury. Does not suit trades or anything competing on clarity. Three voices is one more than most brands can hold.

E3 · Consent banner designed in the brand's own type

The cookie card uses the brand's script for its heading and its serif for Accept and Decline, on the brand paper, with the cut-corner frame. Every UK build carries a consent banner and most bolt on a generic one, so this is directly usable. The failure is not the design but the reach (F1): a banner nobody can press for ten seconds.

E4 · Day and night on the same render

A "by day / by night" control swaps the render for the same view at dusk with the lights on (frames/followup-y-night.png). Suits property and hospitality with real dusk imagery. Does not suit a filter applied to a daytime photo, which reads as fake at once.

E5 · Material stories pinned to the render

Pins on the render open short cards about a material or a detail ("natural stone façades…"). A good way to tell a craft story in place. Built mouse-only here (F4).

E6 · Paper not tinted to the brand hue

A counter-example to the first analysis's T1: a Site of the Month with a generic warm off-white. T1 is a choice that improves a palette, not a law every good site follows. The steward's wording ("illustration, not a spec, n=1") was right.

4. Failure modes

F1 · A timed scroll lock over every action, consent included

Measured in §2. About 9 to 13 seconds in which a visitor can neither scroll, click an action, nor answer the cookie banner, on every load, identical in Chromium and Chrome. Our skill already says intros respect reduced motion and play once per session. It does not say never lock the scroll or cover an action, and this site shows the cost.

5. Instrument traps

I3 · window.scrollTo walks straight through a scroll lock

The probe's scroll frames, and my first follow-up, scrolled with scrollTo. The page moved and the curtain animated open, so the frames looked like a visitor scrolling. A real wheel moved 0px. Programmatic scroll bypasses overflow: hidden; a visitor cannot. The probe's d-scroll-* frames from this run show states no visitor reaches during the lock. Fixed in the probe: it now scrolls with the wheel and reports how far it actually got.

I4 · CSS visibility says "visible" while a curtain covers it

A check for visible, non-transparent, in-viewport elements reported the nav and its actions as visible at load, while a curtain two viewports tall sat on top of them. Only hit-testing (elementFromPoint) and a real click answer "can a visitor press this". Added to the probe as a reachability check.

6. Verdict: proposals for web-frontend

Outcome, 02/10/2026: 1, 2 and 3 are in web-frontend; 4 is folded into 2. Verified in the file (each line found by grep with a positive control, and the section read in full). 1 replaced the skill's "open tension" note with a resolution neither side had stated, with "Waves for a law firm come from nowhere" kept verbatim. 2 sits with the reduced-motion line, all four measurements included. 3 merged with the first analysis's canvas finding as one rule with two worked failures. Both estate findings (the bypass secret vercel curl creates, and the all protection scope) are in deploy-url-is-fine.md.

For the steward. Three are strong; the rest are recorded.

1 · Direction, resolve the open tension on shapes (E1)

A decorative shape earns its place when it comes from the subject's own geometry: an arch for a Mediterranean development, a gable for a builder, contour lines for a surveyor. A shape with no source in the subject (waves for a law firm) is decoration, and the flat editorial grammar is better than it.

2 · Motion, add to the intro line (F1)

An intro never locks scrolling and never covers an action, the cookie choice included. Keep it near a second, give it a Skip, and let the page underneath stay live. One measured award-winner locked every button for about ten seconds on every load.

3 · Performance, extend the LCP note (F5)

LCP measures paint, not use. A page can report a 260 ms LCP from an image hidden under a curtain and still be unusable for ten seconds. Measure time to the first action a visitor can actually press.

4 · Compliance, optional (E3)

Design the consent banner in the brand's own type and colours rather than bolting on a generic one, and make sure it can be answered the moment it appears.

7. Open questions

• Is the lock shorter under reduced motion? Not measured.
• What sets the lock's length? It is not loading. It may be the intro animation's own timeline, which would explain the 9 to 13 second spread.