---
id: "aw-el-c753c16a-3e81-48f2-b6d9-face65f48982"
source: https://www.awwwards.com/inspiration/key-features-era-residence
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 9.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Inset Panel Feature Slider Headlines

## Summary
A key features section for a residential project: a powder-blue panel inset over full-bleed garden renders, with a giant condensed serif headline that changes per slide, a small centred image slider, a short paragraph and a tagline. The frame of photography around a calm flat panel and the masked letter transitions make it a refined pattern for feature carousels.

## Style
- Theme: light (powder-blue panel with navy type, framed by sunny photography)
- Mood: serene, upscale, airy, editorial
- Tags: feature-slider, condensed-serif, inset-panel, letter-mask, real-estate, image-carousel, scroll-animation
- Category: Features, Motion

## Palette
| Role | Hex |
|---|---|
| Panel powder blue | #B4CDDA |
| Headline navy | #1E2A44 |
| Deep foliage | #343A29 |
| Olive | #6B6A57 |
| Warm stone | #A79D7E |
| Sky blue | #748DB1 |
| Bright sky | #83ADE0 |
| White stone | #F3F0ED |

## Typography
- Headline: tall condensed high-contrast serif, uppercase, navy, about 9% of the frame height, centred, tight tracking. Closest free: Instrument Serif uppercase or Bodoni Moda scaled to 80% width.
- Nav at the top-right: a two-line condensed serif link plus tiny uppercase sans links.
- Body: 9px sans centred, two to three lines, navy at 80%. Closest: Manrope 400.
- Tagline: uppercase sans 7px, bold, 0.15em tracking, two lines.
- Slider index: tiny numerals beside chevrons.

## Layout
- 4:3 (1600x1200). A full-bleed garden render fills the frame; a flat panel is inset about 4.5% left and right, 12% from the top and 6% from the bottom. No radius, no border, no shadow.
- Panel contents: circular badge top-left, nav top-right, headline centred on the top edge region, an image about 16% of the panel width centred at about 45% height, slider controls under it, paragraph at about 75% height, tagline below, a vertical scroll rail at the left edge.
- Strong symmetry: everything centred except badge, nav and rail.

## Elements
- Rotating-text circular badge with a star mark (placeholder name).
- Headline that changes per slide (three slides: location, durability, boutique concept).
- Centred image (16:9-ish) showing a pool garden, a sunny terrace or an outdoor lounge.
- Slider controls: left chevron, index number, a 60px progress line, total number, right chevron.
- Paragraph and two-line tagline.
- Background: lush garden and villa renders with flowering shrubs, matching the active slide.

## Motion
- 0.4s: first slide; 2.0s: headline, image, paragraph and background all switch to slide two.
- 3.6s: holding on slide two; 5.2s: slide three.
- 6.8s: the headline exits letter by letter, each glyph sliding up inside a mask from left to right while a few vertical streaks show motion blur.
- 8.5s: back to slide one, looping.
- Slides advance about every 2.8s. Letters move with about 600ms per glyph, 25ms stagger and a strong ease-in-out; the image and background crossfade in about 500ms; the progress line fills linearly between slides.

## Rebuild it
1. Section: `relative h-screen` with a background image layer (`absolute inset-0 object-cover`), then the panel `absolute inset-x-[4.5%] top-[12%] bottom-[6%] bg-[#B4CDDA] text-[#1E2A44]`.
2. Headline: split into letters, each wrapped in `span.inline-block overflow-hidden`; animate inner spans with Motion `y: ['100%', '0%']` on enter and `['0%', '-100%']` on exit, `transition={{ duration: 0.6, ease: [0.65, 0, 0.35, 1], delay: i * 0.025 }}`.
3. Use `AnimatePresence mode="wait"` keyed by slide index for headline, image and paragraph.
4. Background: crossfade stacked images by toggling opacity over 0.5s.
5. Progress line: a 60px track with an inner bar using `scaleX` from 0 to 1 over the slide duration (linear, `origin-left`).
6. Drive slides with a timer or scroll progress (`useScroll` on a tall wrapper with a sticky panel).

## Generation prompt
A luxury real estate website feature section: a flat powder-blue rectangular panel inset over a sunny garden render of modern villas with flowering bushes, a huge condensed uppercase navy serif headline at the top, a small centred photo of a terrace with slider arrows and a thin progress line, a short paragraph and an uppercase tagline below, a circular text badge in the corner; serene, airy, editorial, premium.