Immersive Photo

沉浸摄影

stylekitMITPortfolio · portfolioExperimental · experimentalLight and dark · bothLow (display) · lowBlue · blueMedium · mediumSerif · serifLanding · landing

摄影即界面。全幅大图铺满视口，文字压在图上、靠可读性遮罩浮起；缓慢的 Ken Burns 推拉让静照呼吸，模糊占位先行、真图渐显。图是内容不是背景，排版为让照片说话而生。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Immersive Photo" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/immersive-photo @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/immersive-photo · bfa7da909e86 · © AnxForever

Do

每屏一张全幅照片 object-cover 铺满视口，图是主角、UI 让路
文字压图必铺可读性遮罩：linear-gradient 暗罩或局部 backdrop-blur，保证 4.5:1 对比
Ken Burns 缓慢推拉：transform: scale(1.08) + translate，8-20s ease-in-out，只用 transform
渐进加载：LQIP 20px 模糊占位内联 base64 先显，真图 decode 后 opacity 交叉淡入
图用 AVIF + WebP 双格式 + srcset；hero preload fetchpriority=high，其余 loading=lazy decoding=async
显式 aspect-ratio 或固定容器高度防 CLS
唯一强调色从照片采暖光（如琥珀金 #E8B04B），只用于关键 CTA 与高亮
满图段与安静纯色/纯文字段交替，给视觉呼吸

Don't

禁止把照片当纯装饰背景后铺一堆卡片挡住它（图是主角）
禁止文字直接压在图上不加遮罩（读不清 + 对比不达标）
禁止用未优化大图（必须 AVIF/WebP + srcset，绝不首屏加载多张全尺寸 JPG）
禁止 Ken Burns 过快或改布局属性（只用 transform，8s 起步）
禁止无 aspect-ratio 直接塞图（触发 CLS）
禁止多个强调色，禁止硬塞与照片冲突的品牌色
禁止省略 LQIP 占位（首屏白屏 / 跳版）与 prefers-reduced-motion 降级

Prompt

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

---
"Immersive Photo" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/immersive-photo @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Immersive Photo. \"Immersive Photo\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/immersive-photo @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-immersive-photo",
      "license": "MIT",
      "attribution": "\"Immersive Photo\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/immersive-photo @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#0c0d10"
    },
    "foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card": {
      "$type": "color",
      "$value": "#0c0d10"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#0c0d10"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f4f1ea"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#e8b04b"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#1b1c1e"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a6a6a6"
    },
    "border": {
      "$type": "color",
      "$value": "#2e2f31"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#0c0d10"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 8px 28px rgba(0,0,0,0.4)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Immersive Photo" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/immersive-photo @ bfa7da909e86. */
:root {
  --background: #0c0d10;
  --foreground: #ffffff;
  --card: #0c0d10;
  --card-foreground: #ffffff;
  --primary: #0c0d10;
  --primary-foreground: #fafaf9;
  --secondary: #f4f1ea;
  --secondary-foreground: #ffffff;
  --accent: #e8b04b;
  --accent-foreground: #fafaf9;
  --muted: #1b1c1e;
  --muted-foreground: #a6a6a6;
  --border: #2e2f31;
  --destructive: #dc2626;
  --ring: #0c0d10;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 8px 28px rgba(0,0,0,0.4);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Immersive Photo" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/immersive-photo @ bfa7da909e86. */
/** Tailwind theme extend for Immersive Photo (stylekit-immersive-photo) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#0c0d10",
        "foreground": "#ffffff",
        "card": "#0c0d10",
        "primary": "#0c0d10",
        "primary-foreground": "#fafaf9",
        "secondary": "#f4f1ea",
        "accent": "#e8b04b",
        "muted": "#1b1c1e",
        "border": "#2e2f31",
        "destructive": "#dc2626",
        "ring": "#0c0d10"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 8px 28px rgba(0,0,0,0.4)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Immersive Photo" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/immersive-photo @ bfa7da909e86. */
@layer base {
:root {
  --background: #0c0d10;
  --foreground: #ffffff;
  --card: #0c0d10;
  --card-foreground: #ffffff;
  --primary: #0c0d10;
  --primary-foreground: #fafaf9;
  --secondary: #f4f1ea;
  --secondary-foreground: #ffffff;
  --accent: #e8b04b;
  --accent-foreground: #fafaf9;
  --muted: #1b1c1e;
  --muted-foreground: #a6a6a6;
  --border: #2e2f31;
  --destructive: #dc2626;
  --ring: #0c0d10;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 8px 28px rgba(0,0,0,0.4);
}
}