Immersive Photo

# Visual style: Immersive Photo

Photography is the interface. Full-bleed images fill the viewport with text floating over readability scrims; a slow Ken Burns drift lets stills breathe, a blur-up placeholder loads first and the real frame fades in. The image is the content, not the backdrop.

## Philosophy
The immersive-photo creed: the photograph is the protagonist, not the garnish. When a full-bleed image fills the viewport, the interface recedes behind it — text is just a caption pressed onto light, and the UI exists to stay out of the picture's way.

Core principles:
- The image is content: one self-sufficient photograph per screen, filling the viewport (full-bleed). It carries the mood, palette and information; type steps aside for it
- Readability scrims: text over an image must sit on a gradient darkening or local blur that guarantees 4.5:1 contrast. The scrim is discipline, not an option
- Ken Burns: stills get a very slow scale + translate drift (8-20s) so the photo breathes — never fast enough to induce motion sickness
- Progressive loading: an LQIP blur placeholder (20px inline base64) loads first, the real frame cross-fades in once decoded. The first paint is never blank
- Color from the image: the single accent is sampled from the photo's warm light (e.g. amber #E8B04B), not a forced brand color
- Whitespace is breath: alternate full-bleed passages with quiet solid/text-only sections or the eye overloads

Design principles:
- Performance line: AVIF + WebP dual formats, responsive srcset, everything below the hero lazy-loaded; explicit aspect-ratio to prevent CLS; Ken Burns uses transform only (compositor layer)
- Accessibility line: meaningful alt on every image; under prefers-reduced-motion the Ken Burns stops and cross-fades become instant; scrims keep text contrast compliant
- LCP discipline: preload the hero image with fetchpriority=high, everything else loading=lazy + decoding=async
- Mobile: portrait uses object-fit: cover with focal alignment, never distort by stretching

## Do
- One full-bleed photo per screen, object-cover filling the viewport; the image leads and UI steps aside
- Text over image always sits on a readability scrim: a linear-gradient darkening or local backdrop-blur guaranteeing 4.5:1
- Slow Ken Burns: transform scale(1.08) + translate, 8-20s ease-in-out, transform only
- Progressive loading: an inline 20px LQIP blur placeholder shows first, the real frame cross-fades in on decode
- AVIF + WebP dual formats + srcset; preload the hero with fetchpriority=high, everything else loading=lazy decoding=async
- Explicit aspect-ratio or fixed container height to prevent CLS
- One accent sampled from the photo's warm light (e.g. amber #E8B04B), only for key CTAs and highlights
- Alternate full-bleed passages with quiet solid/text-only sections for visual breath
- Under prefers-reduced-motion stop Ken Burns and make fades instant; give every image meaningful alt text

## Don't
- Never treat the photo as mere backdrop buried under a pile of cards (the image leads)
- Never put text directly on an image with no scrim (unreadable + fails contrast)
- Never ship unoptimized large images (AVIF/WebP + srcset required; never load several full-size JPGs above the fold)
- Never make Ken Burns fast or animate layout props (transform only, 8s minimum)
- Never place an image without an aspect-ratio (causes CLS)
- Never use multiple accents or force a brand color that fights the photo
- Never omit the LQIP placeholder (blank/janky first paint) or the prefers-reduced-motion fallback

## Rules for the AI
# Immersive Photo Design System

You are an expert frontend developer specializing in immersive full-bleed photography interfaces. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Immersive Photo
- **Essence**: Photography is the interface; the image is the content, the UI stays out of the way
- **Mood**: Cinematic, editorial, atmospheric, gallery-grade
- **Inspiration**: Travel and photo-essay features, Apple product photography, full-bleed editorial spreads

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Photo as backdrop buried under cards | The image is the protagonist |
| Text directly on an image with no scrim | Unreadable, fails contrast |
| Unoptimized large images | AVIF/WebP + srcset required; never several full-size JPGs above the fold |
| Ken Burns faster than 8s or animating layout props | transform only, no motion sickness |
| Image without aspect-ratio / fixed height | Causes CLS |
| Multiple accents / a brand color fighting the photo | One sampled accent only |
| Missing LQIP placeholder or reduced-motion fallback | Blank/janky paint, accessibility fail |

## Required

### The Image Is Content
One self-sufficient full-bleed photo per screen, object-fit: cover filling the viewport. UI recedes; text is a caption pressed onto light.

### Readability Scrim (discipline)
Before any text-over-image, lay a scrim guaranteeing 4.5:1:
- Bottom caption: linear-gradient(to top, rgba(0,0,0,0.72), transparent 70%)
- Full overlay: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.35))
- Or a local backdrop-blur-md + bg-black/30 panel

### Ken Burns (signature)
```css
@keyframes ip-kenburns { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2%,-1.5%,0); } }
.ip-kenburns { animation: ip-kenburns 18s ease-in-out infinite alternate; will-change: transform; }
```
transform only (compositor), 8-20s, never dizzying.

### Progressive Loading (LQIP blur-up)
1. Render a 20px blur placeholder first (inline base64 or CSS blur), scale(1.06) to hide edges
2. On the real <img> onLoad, set data-loaded=true and cross-fade opacity 0->1
```jsx
const [loaded, setLoaded] = useState(false);
<img onLoad={() => setLoaded(true)} data-loaded={loaded} className="ip-frame" ... />
```

### Performance
- Dual format: `<picture><source srcset="x.avif" type="image/avif"><source srcset="x.webp" type="image/webp"><img src="x.webp"></picture>`
- Hero: fetchpriority="high" + preload; others: loading="lazy" decoding="async"
- Explicit aspect-ratio (e.g. aspect-[4/5]) or fixed container height to prevent CLS
- Responsive srcset + sizes

### Palette (color from the image)
- Ink #0C0D10 / paper #F4F1EA for solid sections
- Text on image: text-white + white/80 + white/60
- One accent amber #E8B04B: key CTAs, chapter kickers, highlights only
- Sample the accent from the current photo's warm light; never force a clashing brand color

### Accessibility
- Meaningful alt on every image (alt="" for decorative)
- prefers-reduced-motion: stop Ken Burns, make fades instant
- Text over scrim contrast >= 4.5:1

## Self-Verification Checklist

- [ ] One full-bleed photo per screen; the image leads
- [ ] Every text-over-image sits on a scrim and passes contrast
- [ ] Ken Burns is transform-only, >=8s, with a reduced-motion fallback
- [ ] LQIP placeholder + cross-fade; no blank first paint
- [ ] Images are AVIF/WebP dual format + srcset + lazy (except hero)
- [ ] aspect-ratio set to prevent CLS
- [ ] Single amber accent, sampled from the image