---
id: "aw-el-a0770c6d-7626-442c-8890-b22c236dcdf1"
source: https://www.awwwards.com/inspiration/gallery-era-residence
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Staggered Villa Gallery with Flower Overlay

## Summary
A gallery for a luxury residential development: large rendered photos of terraces, lounges and courtyards slide across a deep plum background in a staggered rhythm, each carrying the same tall condensed serif headline, while a cut-out cluster of magenta bougainvillea stays pinned in the foreground at the left. Worth studying for the depth trick of a fixed foreground cut-out over a moving gallery and the editorial poster feel of every slide.

## Style
- Theme: dark (plum backdrop around bright photographs)
- Mood: luxurious, sunny, editorial, lush, calm
- Tags: image-gallery, carousel, real-estate, cut-out-overlay, condensed-serif, parallax, poster-layout
- Category: Components, Motion

## Palette
| Role | Hex |
|---|---|
| Plum background | #320F23 |
| Warm taupe | #5A4D45 |
| Olive shade | #3A3828 |
| Stone gray | #6A6764 |
| Sand | #85807A |
| Concrete | #A09D9F |
| Bougainvillea | #B93C8D |
| Linen text | #E0D7D7 |

## Typography
- Slide headline: tall condensed didone-style serif, regular, uppercase, white, two lines centred in the top third of each slide, about 9% of slide height per line. Closest free font: Bodoni Moda condensed weights or Playfair Display SC set narrow; for a closer feel use Six Caps or Antonio for the condensed caps.
- Small overline text above the image (a few lines of tiny uppercase sans, about 1% of height) and a letterspaced subline under the headline (+0.3em). Inter 500 or Montserrat 500 in caps.
- A small circular seal emblem top left of each slide (shown as a placeholder seal).

## Layout
- 4:3 frame (1600x1200) on plum #320F23.
- The active slide is about 45% of the frame width, slightly taller than wide (roughly 5:6); the next slide waits as a smaller card (about 15% wide) at top right; the previous slide sits as a small card bottom left, partly behind the flowers.
- Slides have square corners, no borders or shadows; a strip of dark taupe header on each slide holds the tiny text and seal.
- The flower cut-out occupies the left 20% of the frame from the middle to the bottom and overlaps the slides.

## Elements
- Photo slides: daylight architectural renders with white walls, timber, linen sofas, round boulder-like armchairs, climbing greenery and sea views.
- Fixed bougainvillea PNG with sharp edges and dark leaves, layered above everything.
- Repeated headline and subline on each slide, centred.
- Small seal emblem and fine print strip along the top of each slide.

## Motion
- Each step lasts about 1.4s: the small top-right card grows and moves into the active position while the active slide shrinks and drops to the bottom-left slot (about 900ms, ease-in-out cubic, roughly 0.65, 0, 0.35, 1).
- The outgoing slide slides behind the flowers and fades out; a new small card appears top right with a 200ms delay.
- Inside each slide the photo moves slightly slower than its frame (about 10% parallax), adding depth.
- The flowers stay fixed the whole time; the sequence loops through five or six slides in 8s.

## Rebuild it
1. Stage: `relative aspect-[4/3] bg-[#320F23] overflow-hidden`; keep the slide list in state with an `index` that advances every 1.4s.
2. Define three slot positions (next, active, previous) as objects with `x`, `y`, `width` and `height` in percentages; each slide is a `motion.div` that animates to the slot for its role.
3. Transition: `{ duration: 0.9, ease: [0.65, 0, 0.35, 1] }`; exiting slides use `AnimatePresence` with opacity 0 and `x: -40`.
4. Inner image: `motion.img` with `scale: 1.1` and an `x` offset that animates opposite to the frame for parallax.
5. Headline overlay: absolutely centred `font-serif uppercase leading-[0.9] text-white text-[clamp(32px,4vw,64px)]` with a narrow condensed face.
6. Foreground: a transparent PNG of flowers `absolute left-0 bottom-0 w-[22%] z-20 pointer-events-none`.

## Generation prompt
A luxury real estate website gallery on a deep plum background: large bright architectural renders of a Mediterranean villa terrace, a minimalist lounge with round cream armchairs and a white courtyard with an olive tree, each overlaid with a tall condensed white serif headline, sliding in a staggered carousel from a small card at top right to a large central card, while a cluster of magenta bougainvillea flowers stays fixed in the foreground on the left; sunny, editorial, lush.