---
id: "aw-el-b9adc5c4-e9ee-4ec8-b94b-ccab3315e6e9"
source: https://www.awwwards.com/inspiration/pre-loader-era-residence
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 11.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Plum Preloader with Arch Reveal

## Summary
A preloader for a luxury residential site: a deep plum screen shows a stacked condensed serif wordmark with a script flourish, two letterspaced words either side and a giant faint script word behind. An arched window then opens in the centre onto a sunlit pool scene, widens into the full hero with a huge white wordmark and blue sky, and finally dims back into plum. Worth studying for the arch-shaped mask reveal and the restraint of the type.

## Style
- Theme: dark (plum, opening onto a bright photo)
- Mood: luxurious, romantic, sunny, calm, refined
- Tags: preloader, arch-mask, clip-path-reveal, condensed-serif, script-type, real-estate, hero-intro
- Category: Hero, Motion

## Palette
| Role | Hex |
|---|---|
| Plum | #350D25 |
| Blossom pink frame | #F6BCCB |
| Dusky plum | #40293F |
| Sky blue | #29569A |
| Mauve | #917378 |
| Light sky | #6A96CB |
| Bougainvillea | #D73AA5 |
| Deep magenta | #A0236D |

## Typography
- Wordmark: tall condensed serif caps, regular, white, two stacked lines (the second wider), about 4% of frame height on the loader and about 12% in the hero; a white script word overlaps its base. Closest free fonts: Six Caps or Antonio for the condensed caps, Pinyon Script for the script (shown as a placeholder wordmark).
- Flanking words: thin serif caps tracked about +0.8em, about 1% of height.
- Hero side phrases: condensed serif caps, white, about 2% of height.
- Background script: a giant handwritten word at about 40% of height, plum on plum at about 8% lightness difference.
- Footer caption: two tiny uppercase sans lines centred at the bottom (Inter 600).

## Layout
- 4:3 frame (1600x1200) with the site shown as a 16:10 window inset on a blossom pink frame; magenta bougainvillea flowers spill over the top right corner.
- Loader: everything centred; a small four-petal emblem at the top, wordmark at the centre, flanking words at about 20% and 80% of width, a thin vertical line under the wordmark and the caption at the bottom.
- Arch window: centred, about 45% of the width, round-topped (radius equal to half its width), rising from the bottom edge, with a thin outline arch just outside it.
- Hero: full-bleed photo of white terraced villas, palms and a deep blue sky; wordmark centred in the upper half.

## Elements
- Four-petal emblem icon top centre.
- Wordmark with script overlay.
- Giant faint script word texture behind.
- Arch mask with a 1px outline arch offset by about 12px.
- Hero photograph with a small round seal top left and a thin vertical index line on the left.
- Bougainvillea cut-out over the corner of the window.

## Motion
- 0 to 2.4s: loader holds; the vertical line under the wordmark grows downward like a progress bar (about 2s, linear).
- 2.4 to 4.4s: the arch rises from the bottom and opens over about 1s (ease-out expo), revealing the pool scene; inside it the wordmark letters slide up one by one (about 60ms stagger).
- 4.4 to 6.4s: the arch expands to fill the window (about 900ms, cubic ease-in-out) and the photo scales from 1.2 to 1.0; the big wordmark settles.
- 6.4 to 8.4s: a plum overlay fades in to about 70% (600ms) as the hero dims.
- 8.4 to 10.3s: the loader state returns; the clip loops.

## Rebuild it
1. Loader as `fixed inset-0 bg-[#350D25] grid place-items-center text-white`, with the giant script word as an absolutely positioned background element at `opacity-[0.08]`.
2. Progress line: `motion.div` `scaleY` 0 to 1 with `originY: 0`, duration tied to asset loading.
3. Arch reveal: wrap the hero image in a `motion.div` whose `clipPath` animates from `inset(100% 27% 0 27% round 50% 50% 0 0)` to `inset(0% 27% 0 27% round 50% 50% 0 0)` and then to `inset(0 0 0 0 round 0)`.
4. Inner image: `scale` 1.2 to 1 over 1.2s with ease `[0.16, 1, 0.3, 1]`.
5. Wordmark letters: split into spans and animate `y: "100%"` to 0 with 60ms stagger inside `overflow-hidden` lines.
6. Remove the loader with `AnimatePresence` once the hero has settled; keep the corner flowers as a fixed PNG layer.

## Generation prompt
A luxury real estate website preloader: a deep plum screen with a tall condensed white serif wordmark and a script flourish, widely letterspaced words on either side and a giant faint handwritten word in the background; an arch-shaped window opens in the center revealing a sunny pool with white terraced villas and palm trees, then expands into a full hero under a deep blue sky, framed by pastel pink with magenta bougainvillea in the corner; romantic, refined, no real brand names.