---
id: "aw-el-420ed4ae-2948-4772-a109-f5b623010d7c"
source: https://www.awwwards.com/inspiration/listing-page-era-residence
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 16.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Floor Plan Grid under a Fixed Title

## Summary
An apartment listing page where a pale grid of floor-plan cards drifts continuously behind a single fixed word set in huge condensed navy serif capitals, with a magenta bougainvillea cutout pinned to the top-right corner. Each card pairs a small architectural plan with bedrooms, area and terrace size. Worth studying for how a dense inventory becomes a calm, almost wallpaper-like browsing surface.

## Style
- Theme: light (warm off-white with navy type and a magenta accent)
- Mood: refined, calm, orderly, luxurious
- Tags: listing-grid, floor-plans, infinite-scroll, fixed-title, condensed-serif, real-estate, cutout-flowers
- Category: Features, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #F2F3EC |
| Card surface | #F4F4EF |
| Plan grey | #BAB5B4 |
| Wood floor | #E1D1C8 |
| Title navy | #1C2340 |
| Bougainvillea | #BF358F |
| Plum shadow | #422E41 |

## Typography
- Page title ("APARTMENTS"): tall condensed high-contrast serif, regular, uppercase, slight tracking, about 12 percent of frame height, navy, centred. Oranienbaum or Bodoni Moda (condensed).
- Card specs ("3 BED / 89 M2"): the same condensed serif at about 2.5 percent of frame height, navy.
- Card labels ("GROUND FLOOR", "COMPLETION: 1Q 2026", "+181 M2 TERRACE"): tiny uppercase sans with wide tracking (about 0.15em). Inter (500).

## Layout
- 4:3 frame (1600x1200). The title sits fixed in the centre of the viewport and stays above the moving grid.
- Grid: four to five columns of equal-width cards (about 280px wide in a 1600px frame), gutters about 24px, rows of varying height depending on the plan.
- Cards: very light surface with a faint 1px border and 12px radius, no shadow; content stacked as label at top, plan in the middle, specs centred at the bottom.
- The bougainvillea cutout overlaps the top-right corner (about 30 percent of the width) and sits above both grid and title.
- Plenty of breathing room: plans fill only about 60 percent of each card.

## Elements
- Floor plans: grey architectural drawings with dark wall lines, pale wood-textured floors and white furniture symbols; some include angled terraces.
- Card header: two tiny lines, unit type and completion date.
- Card footer: large serif spec line and a tiny terrace line with a plus sign.
- Title: one word in huge navy condensed serif capitals.
- Floral cutout: a transparent photo of magenta bougainvillea clusters with green leaves, sharply cut out.

## Motion
- The whole grid scrolls slowly and continuously (about 30 to 50px per second) while the title and flowers stay fixed; between frames the cards shift roughly half a card height every 3 seconds.
- Columns appear to move at slightly different speeds, giving a gentle parallax and staggered rows.
- The grid wraps infinitely, so cards re-enter from the bottom without a seam.
- Hover on a card would be a natural place for a subtle plan zoom; the title never moves.

## Rebuild it
1. Wrap the page in `relative h-dvh overflow-hidden bg-[#F2F3EC]`; put the title in `fixed inset-0 grid place-items-center pointer-events-none z-10` with `font-family: Oranienbaum; font-size: 12vh; color: #1C2340`.
2. Build the grid as `flex gap-6 px-6` with five column `div`s, each a vertical stack of cards duplicated twice for seamless wrap.
3. Card: `rounded-xl border border-black/5 bg-[#F4F4EF] p-5 flex flex-col items-center gap-4`, plan image `w-3/4`, specs in the serif, labels `text-[10px] uppercase tracking-[0.15em]`.
4. Animate each column with Motion's `animate(columnRef, { y: ["0%", "-50%"] }, { duration: 40 + i * 6, repeat: Infinity, ease: "linear" })` so speeds differ.
5. Add wheel and touch input that adds to the scroll offset with a spring, so the user can push the drift faster.
6. Place the flower PNG `fixed top-0 right-0 w-[32vw] z-20`.

## Generation prompt
A refined real-estate listing page on warm off-white: a calm grid of rounded cards showing small grey architectural floor plans with pale wood floors and serif room counts drifts slowly upward behind one huge fixed word in navy condensed serif capitals, with a vivid magenta bougainvillea cutout hanging into the top-right corner; elegant, airy, Mediterranean luxury, seamless loop, no logos.