---
id: "aw-el-e710aef8-9dd7-4beb-8028-0de03bee0451"
source: https://www.awwwards.com/inspiration/property-card-era-residence-1
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 9.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Property Type Slider with Stretch Titles

## Summary
A property-type carousel on a powder-blue page: a portrait photo of each home type sits in the centre, flanked by bedroom and area specs on the left and a short description with an outline pill button on the right, while a huge condensed serif title names the unit below. Cascading bougainvillea hangs over the top right. Worth studying for the title transition where letters stretch, blur and fade in sequence as the slide changes.

## Style
- Theme: light (powder blue with navy type)
- Mood: elegant, airy, luxurious, Mediterranean
- Tags: carousel, property-card, condensed-serif, letter-stagger, real-estate, cutout-flowers, editorial
- Category: Features, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #B4CDDA |
| Ink and title | #38342E |
| Olive foliage | #6F6C5A |
| Stone | #A49C88 |
| Deep magenta | #9F2663 |
| Bougainvillea pink | #DB54A3 |
| Sky in photos | #688DBC |
| White walls | #E8E5E2 |

## Typography
- Unit title ("GROUND FLOOR + BASEMENT", "PENTHOUSE DUPLEX"): tall condensed high-contrast serif, regular, uppercase, slight tracking, about 10 percent of frame height, dark ink. Oranienbaum or Bodoni Moda (condensed).
- Spec values ("3", "178 - 202 M2"): the same condensed serif at small size, about 2.5 percent of frame height.
- Spec labels ("BEDROOMS", "AREA UP TO"): tiny uppercase sans with wide tracking (about 0.15em). Inter (500).
- Description: tiny regular sans, three short lines. Inter (400).
- Button label: tiny uppercase sans with wide tracking inside an outline pill.

## Layout
- 4:3 frame (1600x1200) with a flat powder-blue background.
- Circular emblem logo (placeholder) at the top-left corner, about 70px, with text set around a ring.
- Three-column composition at mid height: specs in a narrow left column (about 22 to 30 percent of the width), a portrait photo (about 30 percent wide, 3:4) in the centre with square corners, and description plus button in a right column starting at about 68 percent.
- Title centred under the photo, overlapping nothing, at about 80 percent height; a small "< 1 ... 3 >" pager below it.
- Thin vertical hairlines with tiny rotated labels run along the far left edge as a margin scale.
- Bougainvillea cutout bleeds off the top edge, overlapping the photo's top-right corner, sitting above everything.

## Elements
- Emblem: a small star-flower icon inside a ring of tiny capitals.
- Photo card: interior courtyard, garden terrace or rooftop lounge render, no border or shadow.
- Spec block: label, value, label, value, stacked with 24px gaps.
- Description and button: a short paragraph and an outline pill (1px dark border, about 32px tall) with uppercase text.
- Title: a single line of condensed serif capitals.
- Pager: tiny arrows and numbers with a hairline between them.
- Floral cutout: a transparent PNG of magenta bougainvillea clusters with leaves.

## Motion
- Each slide holds about 2.5 seconds; order: ground floor plus basement, ground floor, penthouse duplex, then back to the first (loop about 8.5s).
- Title out: letters fade from the end of the word, stretching vertically and blurring (scaleY up to about 1.4, 400ms, 30ms stagger right to left).
- Title in: new letters appear left to right from a stretched, blurred, transparent state settling to normal (about 600ms, ease-out, 30ms stagger).
- Photo: crossfades to the next render with a slight reveal from the top (about 600ms).
- Specs and description: values swap with a quick fade (200ms out, 300ms in); the button label updates; the flowers stay fixed.

## Rebuild it
1. Page: `bg-[#B4CDDA] text-[#38342E] min-h-dvh relative`, the floral PNG `absolute top-0 right-[10%] w-[40%] z-20 pointer-events-none`.
2. Grid: `grid grid-cols-[1fr_auto_1fr] gap-10 items-start px-16 pt-40`, with the photo `w-[30vw] aspect-[3/4] object-cover`.
3. Title: render the current unit name as per-letter `motion.span`s inside `AnimatePresence mode="popLayout"`, `font-family: Oranienbaum; font-size: 10vh; text-transform: uppercase`.
4. Letter variants: `initial: { opacity: 0, scaleY: 1.6, filter: "blur(6px)" }`, `animate: { opacity: 1, scaleY: 1, filter: "blur(0px)" }`, `exit` the reverse; `transformOrigin: "bottom"`, staggered 30ms (exit uses `staggerDirection: -1`).
5. Photo: stack the old and new images and animate the new one's `clipPath` from `inset(0 0 100% 0)` to `inset(0)` over 600ms.
6. Auto-advance with an interval of 2800ms and also drive slides from the pager arrows.

## Generation prompt
Elegant real estate website slider on a soft powder-blue background: a portrait photo of a sunlit Mediterranean villa courtyard in the centre, small specs on the left and a short description with an outline pill button on the right, a huge dark condensed serif title below, magenta bougainvillea cascading from the top edge; the title letters stretch, blur and dissolve as slides change between garden, ground floor and penthouse units, airy luxurious mood, no logos.