---
id: "aw-site-64780"
source: https://www.awwwards.com/sites/era-residence
author: "The First The Last (thefirstthelast)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Spread-Letter Serif Hero over Terraces

## Summary
The first screen of a luxury residential development site: a full-bleed sunny render of white stone terraced homes draped in magenta bougainvillea, with a placeholder three-letter name set in towering condensed serif capitals spread edge to edge across the sky, and a second word spaced across the bottom. Worth studying for its letterspaced editorial typography that frames the photo instead of sitting on top of it.

## Style
- Theme: light (bright sky and white stone)
- Mood: luxurious, sunlit, serene, editorial
- Tags: real-estate, full-bleed-photo, condensed-serif, letterspacing, architecture, mediterranean, hero-typography
- Category: Hero, Typography

## Palette
| Role | Hex |
|---|---|
| Sky blue | #7A9ACD |
| Pale sky | #C4CFE8 |
| White type and walls | #ECECEF |
| Stone grey | #9C998B |
| Stone shadow | #6C6862 |
| Foliage dark | #40422D |
| Leaf green | #838739 |
| Bougainvillea | #E0368F |

## Typography
- Hero letters (three capitals): very tall condensed high-contrast didone serif, regular weight, uppercase, each letter about 30 percent of the frame height, white, spaced so they sit at the left edge, the centre and the right edge. Oranienbaum, or Bodoni Moda squeezed horizontally.
- Location words between the big letters: the same serif style at small size (about 2.5 percent of frame height), uppercase, very wide tracking (about 0.6em), white.
- Bottom word (nine capitals): condensed serif, uppercase, about 7 percent of frame height, letters justified across the full width with huge gaps, white.

## Layout
- 4:3 frame (1600x1200), the photo fills it edge to edge with no UI chrome visible.
- Top band (0 to 37 percent height): the three capitals hang from the top margin of about 4 percent; the two small location words sit at about 20 percent height between them, vertically centred to the capitals.
- Bottom band (about 87 to 95 percent height): the second word's letters spread across a 3 percent side margin.
- The building runs diagonally from the lower left up to the upper right, leaving open sky at the top left for the type.
- No boxes, borders or shadows; white type relies on the blue sky and the shaded stone behind it for contrast.

## Elements
- Background render: terraced white limestone houses with tall pillars, steel pergolas, big glazed doors, planted roof gardens and climbing bougainvillea under a clear gradient sky.
- Three oversized serif capitals forming a placeholder name.
- Two short location words in tiny spaced capitals.
- A spread second word along the bottom edge, overlapping shrubs and railings.
- Foreground: palms and lavender beds along the lower left, dark railings at the lower right.

## Motion
Static image. Idea: let the giant capitals rise from a clipped baseline with a 120ms stagger while the photo slowly zooms from 1.08 to 1 over 2 seconds.

## Rebuild it
1. Hero section: `relative h-dvh overflow-hidden` with the photo as an absolutely positioned `img` (`object-cover object-[60%_60%]`).
2. Top row: `absolute inset-x-[3%] top-[4%] flex justify-between items-start`, with the three capitals as spans at `font-size: 30vh; line-height: 0.8; font-family: Oranienbaum` and the two small words between them at `text-[2.5vh] tracking-[0.6em]`.
3. Bottom word: `absolute inset-x-[3%] bottom-[5%] flex justify-between`, one span per letter at `text-[7vh]`, so letters justify across the width.
4. Add a subtle `text-shadow: 0 0 40px rgba(0,0,0,0.12)` for legibility on bright areas.
5. Motion: wrap each capital in an `overflow-hidden` span and animate the letter from `y: "100%"` to `0` (900ms, `ease: [0.16, 1, 0.3, 1]`, 120ms stagger); fade the small words in afterwards.
6. Animate the photo `scale` from 1.08 to 1 over 2s with ease-out, and on scroll use `useScroll` to give the letters a slower parallax than the photo.

## Generation prompt
Sunny architectural render of luxurious white limestone terraced homes with steel pergolas covered in magenta bougainvillea, roof gardens and big glass doors under a clear gradient blue sky, viewed from a low angle along the facade; editorial website hero with three giant white condensed serif capital letters spread across the sky and a single word in widely spaced white serif capitals along the bottom, Mediterranean luxury mood, no real brand names.