---
id: "aw-el-48375276-e93b-46c3-91c8-ae0552d8229f"
source: https://www.awwwards.com/inspiration/day-night-theme-era-residence
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 15.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Day To Night Hero With Hotspots

## Summary
A real-estate hero where a tiny "by day, by night" switch cross-fades a full-bleed architectural render from bright midday to a deep blue dusk with warm interior lights, while small circular hotspots on the facade open cream info cards. The same composition held in two lighting states makes the place feel lived in, and the hotspots add discovery without cluttering the photo.

## Style
- Theme: mixed (daylight and dusk photography)
- Mood: serene, luxurious, cinematic, inviting, calm
- Tags: day-night-toggle, hotspots, full-bleed-photo, crossfade, real-estate, condensed-serif, info-card
- Category: Hero, Motion

## Palette
| Role | Hex |
|---|---|
| Day sky | #40669F |
| Deep sky | #1C478A |
| Foliage shadow | #2C3021 |
| Light sky | #6088B9 |
| Dusk blue | #3A4B6E |
| Olive green | #65644B |
| Card cream | #EDF1F0 |
| Pool turquoise | #4FC3D9 |

## Typography
- Title (placeholder project name): compressed didone serif, regular, all caps, two stacked lines each about 13% of frame height, white. Bodoni Moda (500) at about 70% width.
- Script overlay (a town name): connected script, white, about 10% of frame height, overlapping the title. Pinyon Script (400).
- Flanking phrases and card titles ("A PLACE", "TO RETURN TO", "CRAFTED TO ENDURE", "LIGHT & FLOW"): compressed serif caps, about 2% of frame height; card titles navy on cream.
- Toggle labels, nav links and card body: sans 8 to 10px; toggle uppercase with 0.2em tracking, card body sentence case, 1.5 line height. Archivo (500).

## Layout
- 4:3 canvas (1600x1200), the hero filling the frame edge to edge.
- Title block centred in the top third; flanking phrases sit at about 22% from each side on the baseline of the script.
- Toggle centred under the script: two small labels joined by a 60px rule, the active one brighter.
- Corner furniture: circular text badge top left (about 50px), stacked links top right, a vertical line with tiny labels on the left edge.
- Hotspots: 18px white outline circles with a centre dot, placed on facades, pool edge and terrace.
- Info card: about 190x230px cream panel, square corners, title at top, empty middle, 4-line body at the bottom, 14px padding, appearing next to its hotspot.

## Elements
- Full-bleed render of terraced white villas with green pergolas and bougainvillea, palms, cypress trees, a long turquoise pool and figures relaxing at the edge.
- Night variant: same view, sky in deep indigo, warm window and pergola lights, pool glowing.
- Circular badge with placeholder name around a four-petal monogram.
- "BY DAY ---- BY NIGHT" toggle (rendered as two words and a rule).
- Hotspot circles with a soft white ring.
- Cream info cards with a serif caps title and a short paragraph.

## Motion
- About 2s: hovering "by night" cross-fades the day image to the dusk image over about 1200ms ease-in-out; the sky darkens first and the window lights fade up slightly later (about 300ms offset).
- 5 to 7s: back to day; hovering a facade hotspot scales its ring from 1 to 1.3 and opens a card that grows from the hotspot (scale 0.9 to 1, opacity 0 to 1, 300ms).
- 8 to 10s: a second hotspot opens another card on the left side, the first one closing.
- 10 to 13s: switch to night again; 13 to 15s back to day. Hotspots pulse gently (2s loop).

## Rebuild it
1. Hero: `relative h-screen overflow-hidden` with two stacked absolutely positioned images (day and night), the night one controlled by Motion `animate={{opacity: isNight ? 1 : 0}}` over 1.2s.
2. For staged lighting, add a third layer of only the lit windows (PNG with transparency) that fades in with a 0.3s delay.
3. Toggle: two buttons with a 60px `h-px bg-white/60` between, `text-[10px] uppercase tracking-[0.2em]`; active button `text-white`, inactive `text-white/50`.
4. Hotspots: absolutely positioned `button` elements at percentage coordinates, `w-[18px] h-[18px] rounded-full border border-white` with a looping scale pulse.
5. Cards: `AnimatePresence` popover `w-48 bg-[#EDF1F0] text-[#1C2A44] p-3.5` with `transformOrigin` set to the hotspot side.
6. Title: compressed serif `text-[8rem] leading-[0.85]` and a script `span` overlapping with negative margin.

## Generation prompt
A luxury Mediterranean residence website hero: a full-bleed architectural render of terraced white villas with bougainvillea pergolas, palm trees and a long turquoise pool, a stacked compressed white serif title crossed by an elegant script word, tiny white hotspot circles on the buildings opening small cream info cards, and the whole scene cross-fading from bright midday to a deep blue dusk with warm glowing windows; calm, cinematic, aspirational, no logos.