---
id: "aw-el-86f6ae2d-939c-4cb6-90ab-537200ee5ef9"
source: https://www.awwwards.com/inspiration/horizontal-scroll-era-residence
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 17.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Mediterranean Residence Horizontal Scroll Story

## Summary
A horizontal scroll narrative for a boutique coastal residence: cream panels framed by magenta bougainvillea carry a centred condensed-serif statement, then a giant stacked headline beside a terrace photo, a location timeline with drive times, a line of text that scatters into floating letters, and finally a full-bleed aerial landscape with drifting clouds before looping back. It shows how a vertical scroll can drive a cinematic sideways journey without losing editorial calm.

## Style
- Theme: light (cream and sky blue, shown on a deep plum frame)
- Mood: sunny, luxurious, serene, editorial, cinematic
- Tags: horizontal-scroll, real-estate, condensed-serif, bougainvillea, aerial-video, location-timeline, scattered-type, scroll-storytelling
- Category: Motion, Landing page

## Palette
| Role | Hex |
|---|---|
| Cream panel | #F2F3ED |
| Plum frame | #340F24 |
| Warm charcoal | #554D4A |
| Dusty mauve | #8A7C7A |
| Sky blue | #609DC6 |
| Pale rose | #BFADAB |
| Cloud blue | #C4D5E6 |
| Bougainvillea | #C6398B |
| Navy ink | #1B2440 |

## Typography
- Statement paragraph: ultra-condensed high-contrast serif, uppercase, navy, three centred lines, about 4% of frame height each, with one phrase switched to italic. Six Caps or Big Shoulders Display for proportions; Playfair Display Italic for the italic phrase.
- Giant headline ("New / Golden / Mile"): same condensed serif, stacked and staggered left-right, about 12% of frame height per line, overlapping the photo edge.
- Kicker labels ("The concept", country name): tiny sans caps, 8px, letter-spacing 0.4em. Montserrat Medium.
- Scattered line: condensed serif mixed with a thin script for a few letters that float off. Pinyon Script for the script letters.

## Layout
- 4:3 presentation frame (1600x1200) with the site shown as a 16:10 viewport inside a deep plum border.
- Each panel is one viewport wide; content is centred within it with large empty margins.
- Fixed chrome: circular seal logo top-left, two-line condensed nav top-right ("Select an apartment", "Book a call", "Contact"), a vertical "Scroll" label with a short line near the bottom-left.
- Headline panel: type occupies the left 35%, a portrait photo (about 30% wide, 90% tall) sits centre-right, a small heading and paragraph hang off the right edge.
- Location panel: a horizontal line of evenly spaced dots (about 9) with place names, a centre emblem, and a circular "View available apartments" link on the left.
- No corner radii; edges are crisp and square.

## Elements
- Bougainvillea cut-outs: PNG clusters of magenta flowers tucked into the top-left and bottom-right corners, partially cropped.
- Terrace photo: whitewashed terrace with cushions and greenery under a blue sky.
- Aerial video: wide shot of hills, coastline and terracotta apartment blocks with clouds drifting over the top.
- Seal logo: placeholder text on a circle around a small emblem; a vertical progress tick at the left edge.

## Motion
- 0 to 3000ms: the statement panel slides left as the page scrolls; flowers move faster than the text (parallax factor about 1.3).
- 3700ms: the headline panel arrives; the stacked words shift at different speeds so they slide across the photo edge.
- 6800ms: the statement letters dissolve, scattering upward and sideways with slight rotation as script letters fade in (about 800ms).
- 9900 to 13000ms: the aerial panel takes over full-bleed; clouds drift and the camera pushes forward slowly.
- 16000ms: wraps back to the opening statement panel for a seamless loop.
- Horizontal travel is tied to vertical scroll with smoothing (lerp about 0.08), so motion glides to a stop.

## Rebuild it
1. React: a tall outer section (height = number of panels x 100vh) with a `sticky top-0 h-screen overflow-hidden` inner wrapper holding a `flex` row of `w-screen shrink-0` panels.
2. Motion `useScroll({ target })` and `useTransform(scrollYProgress, [0, 1], ['0%', '-80%'])` for the row's `x`; wrap in `useSpring` (stiffness 80, damping 20) for the glide.
3. Parallax: give flower images and headline lines their own `useTransform` offsets with factors 0.7 to 1.3.
4. Scatter effect: split the line into letters, and map a sub-range of progress to random `x`, `y`, `rotate` and `opacity` per letter.
5. Aerial panel: a muted autoplaying `video` with `object-cover`, revealed by scaling a clip-path inset from 10% to 0.
6. Fonts: Six Caps for display, Montserrat 8px caps with `tracking-[0.4em]` for kickers; colours `#F2F3ED`, `#1B2440`, accent `#C6398B`.

## Generation prompt
A sunny luxury coastal residence website scrolling horizontally: cream panels framed by bright magenta bougainvillea, a centred statement in tall ultra-condensed navy serif capitals, a giant stacked condensed headline beside a whitewashed terrace photo, a minimalist location timeline with dots, letters scattering into the air, and a full-bleed aerial shot of hills and coastal apartment blocks under drifting clouds; elegant, serene and cinematic, no real brand names.