---
id: "aw-el-2ea62ee7-da06-49f7-8b2d-0b93bc2f529f"
source: https://www.awwwards.com/inspiration/main-page-era-residence
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 16.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Mediterranean Residence Scroll Story

## Summary
A scroll through the main page of a luxury residential development: a full-bleed render of terraced white villas under a deep blue sky with a stacked compressed serif title and a script place name, then a pool scene, a powder-blue arch rising from the bottom with words set along its curve, a calm text section and a quote over a pool photo. It is a lovely example of architectural photography paired with one bold geometric reveal.

## Style
- Theme: mixed (saturated photography and powder blue panels)
- Mood: sunny, luxurious, serene, editorial, aspirational
- Tags: real-estate, full-bleed-photo, condensed-serif, script-overlay, arch-reveal, curved-text, scroll-story
- Category: Landing page, Motion

## Palette
| Role | Hex |
|---|---|
| Presentation frame | #F1F2EC |
| Powder blue panel | #B1CBDA |
| Deep sky | #275296 |
| Light sky | #5B8CC8 |
| Foliage | #393D2F |
| Olive stone | #6A6955 |
| Stone grey | #9A9893 |
| Sand | #D7CCB8 |

## Typography
- Hero title (placeholder project name): compressed high-contrast didone serif, regular, all caps, two stacked lines at about 12% of panel height each, white over the sky. Bodoni Moda (500) scaled to about 70% width.
- Script overlay (a town name): flowing connected script, white, about 9% of panel height, crossing the second title line. Pinyon Script (400) or Great Vibes.
- Flanking phrases ("A PLACE" left, "TO RETURN TO" right) and arch words: compressed serif caps, about 2% of panel height; the arch text is navy on powder blue and set on a curve.
- Micro UI (top-right links, day and night toggle, captions): wide sans 8 to 9px, uppercase, tracking 0.2em. Archivo (600).
- Quote: compressed serif caps, white, 4 lines, left aligned, with a large opening quote glyph.

## Layout
- 4:3 recording (1600x1200) of a 16:10 site panel centred on a #F1F2EC frame with about 3% margins.
- Hero: full-bleed photo; title centred in the upper third; badge top left, stacked links top right; a thin vertical line with tiny labels on the left edge.
- Arch: a powder-blue semicircle rising from the bottom edge, about 90% of the panel width, with words spaced along its outer edge and a monogram plus caption in the centre.
- Text section: powder blue full panel, a small photo carousel (about 26% wide) top centre with tiny arrows, a centred 3-line paragraph at mid height, and a building corner image cropped into the bottom left.
- Quote section: full-bleed pool photo with the quote block placed in the lower right third.

## Elements
- Circular text badge with a four-petal monogram, white over photos and navy on blue.
- "SELECT AN APARTMENT" two-line link and smaller "BOOK A CALL", "CONTACT" links.
- Small white hotspot circles on the photo.
- Day and night segmented label with a short rule between the two words.
- Powder-blue arch with curved serif words.
- Thumbnail carousel with a progress bar between previous and next arrows.
- Opening quote mark and quote paragraph with an attribution line.

## Motion
- 0 to 3s: scroll moves from the hero into the pool render; the title fades and translates up with parallax (about 0.5x scroll speed).
- 4 to 7s: the arch rises from below as a growing semicircle (clip-path circle radius from 0 to about 60%, about 1200ms eased with scroll), and the curved words fade in one by one.
- 7 to 10s: the arch expands to fill the panel with powder blue; carousel and paragraph fade up 20px.
- 10 to 13s: the pool image wipes up from the bottom; quote lines reveal with a 100ms stagger.
- 14 to 16s: loops back to the hero.

## Rebuild it
1. Hero: `relative h-screen` with a cover image, an absolute centred title block `text-white uppercase leading-[0.85]` and a script span positioned with `absolute -bottom-6 left-1/2 rotate-[-8deg]`.
2. Parallax: `useScroll` on the hero and `useTransform(scrollYProgress,[0,1],[0,-200])` for the title `y`.
3. Arch: a sticky section where `clipPath` is driven by scroll: `circle(${r}% at 50% 100%)` with r from 0 to 120 via `useTransform`.
4. Curved text: an SVG `textPath` on an arc path; animate each word's opacity with staggered `whileInView`.
5. Text section: `bg-[#B1CBDA] grid place-items-center gap-10 text-center text-[11px] max-w-md mx-auto`.
6. Quote reveal: split lines into `overflow-hidden` wrappers and animate `y` from 100% with 0.1s stagger.

## Generation prompt
A scroll-through of a luxury Mediterranean residence website: a full-bleed sunny render of terraced white villas draped in bougainvillea with palm trees and a turquoise pool under a deep blue sky, a stacked compressed white serif title crossed by an elegant script word, then a powder-blue semicircular arch rising from the bottom with words along its curve, a calm text panel and a serif quote over a pool photo; airy, editorial, aspirational, no logos.