Immersive Photo

STYLEKIT_STYLE_REFERENCE
style_name: Immersive Photo
style_slug: immersive-photo
style_source: /styles/immersive-photo

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

# 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

---

# Immersive Photo Design System

> 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.

## Design 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

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-white/25
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-[0_2px_8px_rgba(0,0,0,0.3)]
md: shadow-[0_8px_28px_rgba(0,0,0,0.4)]
lg: shadow-[0_24px_60px_rgba(0,0,0,0.5)]
hover: hover:shadow-[0_16px_44px_rgba(0,0,0,0.5)]
focus: focus-visible:ring-2 focus-visible:ring-white/60
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-white/20
Transition: transition-all duration-300 ease-out
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-semibold text-white tracking-tight
Body: text-white/80 leading-relaxed
Mono: font-mono text-[#E8B04B] uppercase tracking-widest
```

### Type scale
```
Hero: text-5xl md:text-7xl
H1: text-4xl md:text-6xl
H2: text-3xl md:text-4xl
H3: text-xl md:text-2xl
Body: text-base md:text-lg
Small: text-sm
```

### Spacing
```
Section: py-24 md:py-32
Container: px-6 md:px-8
Card: p-6
Gap sm: gap-4
Gap md: gap-8
Gap lg: gap-12
```

### Color roles
```
Background primary: bg-[#0C0D10]
Background secondary: bg-[#1A1C22]
Background accent: bg-[#E8B04B]
Text primary: text-white
Text secondary: text-white/80
Text muted: text-white/60
Button primary: bg-white/12 backdrop-blur-md text-white border border-white/30
Button secondary: bg-[#E8B04B] text-[#0C0D10]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-gradient-to-r`
- `from-indigo-600`
- `via-purple-600`
- `to-pink-500`
- `rounded-none`
- `duration-100`

### Banned patterns
- matches `^bg-gradient-to-r$`
- matches `^from-(indigo|purple|pink|fuchsia)-`
- matches `^rounded-none$`

### Why they are banned
- `bg-gradient-to-r`: Depth and color come from the photograph, not decorative gradients
- `from-indigo-600`: No AI-cliche gradients; the accent is sampled from the image's light
- `rounded-none`: Full-bleed imagery reads better with soft rounded framing (rounded-2xl)
- `duration-100`: Photo transitions and Ken Burns are slow and cinematic, never snappy

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
bg-white/12 backdrop-blur-md
border border-white/30
rounded-full
text-white
hover:bg-white/20 hover:border-white/50
transition-all duration-300
```

### Every card must include
```
relative overflow-hidden
rounded-2xl
```

### Every input must include
```
bg-white/10 backdrop-blur-md
border border-white/25
rounded-full
text-white placeholder-white/50
focus:outline-none focus:border-white/60 focus:bg-white/15
transition-all duration-300
```

---

## [COMPARE] Immersive Photo wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="bg-white/12 backdrop-blur-md border border-white/30 rounded-full text-white hover:bg-white/20 hover:border-white/50 transition-all duration-300 bg-white/12 backdrop-blur-md text-white border border-white/30">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="relative overflow-hidden rounded-2xl p-6">
 <h3 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-white/10 backdrop-blur-md border border-white/25 rounded-full text-white placeholder-white/50 focus:outline-none focus:border-white/60 focus:bg-white/15 transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Immersive Photo page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#0C0D10] text-white border border-white/25 px-6 md:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-8">
 <a href="/" class="font-semibold text-white tracking-tight text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-8 text-white/80 leading-relaxed text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#E8B04B] text-white py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold text-white tracking-tight text-5xl md:text-7xl">
 {HEADLINE}
 </h1>
 <p class="text-white/80 leading-relaxed text-base md:text-lg max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="bg-white/12 backdrop-blur-md border border-white/30 rounded-full text-white hover:bg-white/20 hover:border-white/50 transition-all duration-300 bg-white/12 backdrop-blur-md text-white border border-white/30">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#0C0D10] text-white py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold text-white tracking-tight text-3xl md:text-4xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Card template - repeat for each card -->
 <div class="relative overflow-hidden rounded-2xl p-6">
 <h3 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="text-white/80 leading-relaxed text-base md:text-lg text-white/60">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-white/10 backdrop-blur-md border border-white/25 rounded-full text-white placeholder-white/50 focus:outline-none focus:border-white/60 focus:bg-white/15 transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#1A1C22] text-white/80 py-24 md:py-32 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
 <div>
 <span class="font-semibold text-white tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="text-white/80 leading-relaxed text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold text-white tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="text-white/80 leading-relaxed text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Immersive Photo post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `bg-white/12 backdrop-blur-md border border-white/30 rounded-full text-white hover:bg-white/20 hover:border-white/50 transition-all duration-300`
- [ ] Card includes: `relative overflow-hidden rounded-2xl`
- [ ] Input includes: `bg-white/10 backdrop-blur-md border border-white/25 rounded-full text-white placeholder-white/50 focus:outline-none focus:border-white/60 focus:bg-white/15 transition-all duration-300`

### Forbidden check
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `from-indigo-600`
- [ ] Not using `via-purple-600`
- [ ] Not using `to-pink-500`
- [ ] Not using `rounded-none`
- [ ] Not using `duration-100`

### Style rule check
- [ ] 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

### Style drift check
- [ ] Does not violate: Never treat the photo as mere backdrop buried under a pile of cards (the image leads)
- [ ] Does not violate: Never put text directly on an image with no scrim (unreadable + fails contrast)
- [ ] Does not violate: Never ship unoptimized large images (AVIF/WebP + srcset required; never load several full-size JPGs above the fold)
- [ ] Does not violate: Never make Ken Burns fast or animate layout props (transform only, 8s minimum)
- [ ] Does not violate: Never place an image without an aspect-ratio (causes CLS)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Immersive Photo

---

## [EXAMPLES] Example prompts

### 1. 

```
Create an immersive photo travelogue with:
1. Full-screen hero photo with a slow Ken Burns drift (transform scale 1->1.12, 18s ease-in-out alternate), an LQIP blur-up placeholder that cross-fades to the real frame, and a bottom-to-top scrim
2. Ink #0C0D10 / paper #F4F1EA solid sections between the photo passages for breath
3. Chapter kickers and one CTA in amber #E8B04B sampled from the light; everything else white/white-80 over imagery
4. A gallery of full-bleed photo cards (aspect-[4/5]) that scale slightly on hover, each with a gradient scrim caption
5. Images as <picture> AVIF+WebP with srcset; hero fetchpriority=high, rest loading=lazy decoding=async; explicit aspect-ratio to avoid CLS
6. Frosted (backdrop-blur) nav and buttons that stay legible over any photo
7. prefers-reduced-motion: Ken Burns off, fades instant; meaningful alt on every image
```

### 2. 

```
Create an immersive product landing page with:
1. A full-bleed product hero photo, Ken Burns on load, LQIP blur-up, and a left-anchored scrim so the headline stays readable
2. Alternating sections: full-bleed lifestyle photo, then a quiet ink/paper text section, repeating
3. Amber #E8B04B for the single buy CTA and price highlight only; all other text white over scrims
4. Photo detail cards with aspect-ratio locked and hover scale-105
5. <picture> AVIF+WebP srcset, hero preloaded fetchpriority=high, rest lazy
6. A frosted sticky buy-bar (backdrop-blur) that floats over the imagery
7. reduced-motion: no Ken Burns, instant cross-fades; every image has descriptive alt
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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)