Cinematic Video Hero

电影视频首屏

stylekitMITContent & media · content-mediaLanding · landingExperimental · experimentalLight and dark · bothLow (display) · lowBlue · blueMedium · mediumSerif · serif

以短循环视频开场的电影级首屏。海报帧先出作 LCP，视频进视口才静音自动播、无缝循环；文字压在可读性遮罩上，暗场调色与缓慢运动营造预告片般的沉浸开场。

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

"Cinematic Video Hero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cinematic-video-hero @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/cinematic-video-hero · bfa7da909e86 · © AnxForever

Do

海报帧作 LCP：poster 属性 + AVIF/WebP，小而清晰，秒开
视频 muted + autoplay + loop + playsInline，无声无缝短循环（6-10s）
video preload="none"，用 IntersectionObserver 进视口才 load()/play()
文字压视频必铺渐变可读性遮罩，保证 4.5:1 对比
暗场电影调色：近黑 #05060A 底 + 一支暖金 #E4C063 强调
显式 aspect-ratio 或固定容器高度防 CLS
双格式 source：webm(VP9) + mp4(H.264)，始终配 poster
缓慢镜头感运动，关键信息全在文字层不在视频里

Don't

禁止视频作 LCP 依赖 / 省略 poster（首屏白屏、LCP 爆炸）
禁止 preload="auto" 或自动加载大视频（流量与性能灾难）
禁止把关键信息放进视频（视频可能不播 / 被降级）
禁止有声自动播（浏览器会拦，且打扰用户）
禁止文字直接压视频不加遮罩
禁止快速/跳变运动或不无缝的循环
禁止忽略 prefers-reduced-motion 与移动端降级

Prompt

Create a cinematic video-hero studio landing page with:
1. Full-screen hero: a <video muted loop playsInline preload="none"> with a poster AVIF as the LCP; load()/play() only when in view via IntersectionObserver
2. webm + mp4 dual sources; a gradient readability scrim so the headline stays legible over the footage
3. Near-black #05060A grade, one warm-gold #E4C063 accent for the kicker and primary CTA
4. Optional letterbox bars for a widescreen frame; slow, seamless loop feel
5. A scene gallery of poster-backed aspect-video cards with scrim captions
6. prefers-reduced-motion: no autoplay, show the poster still with a play button; Save-Data: skip video
7. Frosted secondary buttons and inputs that stay legible over the video; critical info only in the text layer

---
"Cinematic Video Hero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cinematic-video-hero @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Cinematic Video Hero. \"Cinematic Video Hero\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cinematic-video-hero @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-cinematic-video-hero",
      "license": "MIT",
      "attribution": "\"Cinematic Video Hero\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cinematic-video-hero @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#05060a"
    },
    "foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card": {
      "$type": "color",
      "$value": "#05060a"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "primary": {
      "$type": "color",
      "$value": "#05060a"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f3efe8"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "accent": {
      "$type": "color",
      "$value": "#e4c063"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#141519"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a6a6a6"
    },
    "border": {
      "$type": "color",
      "$value": "#28292c"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#05060a"
    }
  },
  "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 10px 30px rgba(0,0,0,0.5)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Cinematic Video Hero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cinematic-video-hero @ bfa7da909e86. */
:root {
  --background: #05060a;
  --foreground: #ffffff;
  --card: #05060a;
  --card-foreground: #ffffff;
  --primary: #05060a;
  --primary-foreground: #fafaf9;
  --secondary: #f3efe8;
  --secondary-foreground: #ffffff;
  --accent: #e4c063;
  --accent-foreground: #fafaf9;
  --muted: #141519;
  --muted-foreground: #a6a6a6;
  --border: #28292c;
  --destructive: #dc2626;
  --ring: #05060a;
  --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 10px 30px rgba(0,0,0,0.5);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Cinematic Video Hero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cinematic-video-hero @ bfa7da909e86. */
/** Tailwind theme extend for Cinematic Video Hero (stylekit-cinematic-video-hero) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#05060a",
        "foreground": "#ffffff",
        "card": "#05060a",
        "primary": "#05060a",
        "primary-foreground": "#fafaf9",
        "secondary": "#f3efe8",
        "accent": "#e4c063",
        "muted": "#141519",
        "border": "#28292c",
        "destructive": "#dc2626",
        "ring": "#05060a"
      },
      "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 10px 30px rgba(0,0,0,0.5)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Cinematic Video Hero" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cinematic-video-hero @ bfa7da909e86. */
@layer base {
:root {
  --background: #05060a;
  --foreground: #ffffff;
  --card: #05060a;
  --card-foreground: #ffffff;
  --primary: #05060a;
  --primary-foreground: #fafaf9;
  --secondary: #f3efe8;
  --secondary-foreground: #ffffff;
  --accent: #e4c063;
  --accent-foreground: #fafaf9;
  --muted: #141519;
  --muted-foreground: #a6a6a6;
  --border: #28292c;
  --destructive: #dc2626;
  --ring: #05060a;
  --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 10px 30px rgba(0,0,0,0.5);
}
}