awwwards-hero-section

Awwwards 级别的 Hero 区域

此技能仅适用于 Hero 区域，不负责完整页面、导航系统、页脚或功能区。当用户要求设计 Hero、着陆页页头、首屏区域，或提供 Hero 设计参考截图时，此技能会触发。

---

工作流程

┌──────────────────────────────────────────────────────────────────────┐
│                                                                      │
│   BRIEF IN ──→ Phase 1: Read ──→ Phase 2: Architecture              │
│                  (extract signals)  (pick one, commit)               │
│                                                                      │
│                              ──→ Phase 3: Build                      │
│                                   (type, palette, atmosphere,        │
│                                    motion, mobile)                   │
│                                                                      │
│                              ──→ Phase 4: Verify                     │
│                                   (visual diff against reference)    │
│                                                                      │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.   │
│                                                                      │
└──────────────────────────────────────────────────────────────────────┘

---

阶段 1：阅读参考

编写任何代码之前，先从用户的参考图片中提取设计信号（或根据用户的简述推断）。不要把自己的审美强加到参考设计上。要忠实解读实际呈现的内容。

→ 从每张图片中提取以下信号

信号	观察内容
模式	浅色或深色背景
焦点元素	视口中最突出的是什么？超大字体、3D 对象、满幅摄影、产品模型、抽象形状、视频，还是零散的悬浮元素
字体风格	衬线、无衬线或混合。超大还是克制。全大写还是大小写混排。字距紧密还是正常。是否使用斜体
文本与图片的关系	文本位于图片上方（分层）？旁边（分栏）？主体后方（遮罩）？内部（裁切）？还是与行内图片交织在文字之间？
布局重心	视觉重量位于何处？居中？左下？分布在两侧？满幅？
颜色数量	统计不同色调的数量——获奖级 Hero 几乎总是最多使用 2-3 种
导航风格	悬浮胶囊？扁平水平布局？分栏（左侧 Logo，右侧链接）？极简（仅 Logo + 菜单）？
微观细节	旋转文本徽章、等宽字体元数据标签、玻璃拟态卡片、作品集链接、CTA 胶囊样式

→ 生成代码前，先输出 Hero 提取摘要

用 2-3 行准确说明提取到的信息：

“Hero 提取：深色模式，以 CSS 透视效果构成的居中 3D 卡片轮播为焦点元素，下方是大小写混排的超大无衬线标题，上方有等宽字体微标签，搭配单个幽灵按钮式 CTA 和悬浮胶囊导航。配色：近黑色 + 白色 + 一种柔和的强调色。整体感觉：具有分层卡片纵深感的深色电影感品牌机构。”

→ 如果没有提供参考图片

只问一个问题：“你希望这个 Hero 更接近［深色电影感］还是［浅色编辑风］？品牌名称和一句话价值主张是什么？”

如果可以从上下文中推断（例如用户提到“AI 初创公司”或“奢侈品牌机构”），则跳过提问，并说明你的 Hero 提取摘要。

✓ 质量检查：阅读

进入阶段 2 之前，请确认：

• 已从参考中提取全部 8 项信号（或根据简述进行推断）
• 已撰写 Hero 提取摘要
• 已确定模式（浅色/深色）、焦点元素和配色方向

---

阶段 2：选择一种架构

从以下六种架构中选择最符合参考的一种。不要混合两种架构。选定后就彻底采用。

---

架构 A：电影感居中布局

最适合：深色电影感品牌机构网站、沉浸式产品发布、氛围感品牌页面

标题位于视口中央。电影感视觉元素（3D 渲染、产品图、氛围感摄影）铺满背景，或悬浮在文字后方/周围。CTA 是标题下方单个居中的胶囊按钮或幽灵按钮。

[viewport container: relative, min-h-[100dvh], overflow-hidden]
  [background visual: absolute inset-0, object-cover or positioned 3D element]
  [content overlay: relative z-10, flex flex-col items-center justify-center text-center]
    [optional eyebrow: small mono label]
    [H1: massive centered, max 2-3 lines]
    [optional subtext: max 20 words, muted color]
    [CTA: single pill button]

背景视觉元素使用 position: absolute; inset: 0，图片使用 object-fit: cover，3D 内容或插画则使用绝对定位并居中。文字通过 position: relative; z-index: 10 置于上层。如果文字可读性不足，可在图片层与文字层之间添加渐变遮罩（bg-gradient-to-t from-black/60 via-black/20 to-transparent）。

---

架构 B：不对称分割

最适合：大胆的机构首页、AI／科技产品发布页、品牌宣言页面

一侧放置巨大的标题（通常在左侧，占宽度的 55-65%）。另一侧放置辅助内容（副文案、CTA 或视觉素材），并在垂直方向上错开。两侧不会对齐到同一基线——刻意营造垂直张力。

[viewport container: min-h-[100dvh], grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] items-end lg:items-center gap-8 lg:gap-0]
  [left: H1, massive, left-aligned, takes up most of the width]
  [right: subtext + CTA OR visual asset, vertically offset from the H1 baseline]

在左侧栏使用 items-end，在右侧栏使用 items-start（反之亦可），以营造垂直张力。标题应给人一种将页面锚定在一侧的感觉。在移动设备上（< 768px），折叠为单列并占满宽度。

---

架构 C：全幅主体

最适合：运动员／个人品牌网站、产品摄影主视觉、编辑风格的时尚或生活方式页面

全视口照片或 3D 渲染图就是主视觉。文字直接叠加在图片上——可以放在左上角、左下角，或延伸到下边缘。没有单独的“文字区域”——图片与文字共处于同一空间平面。

[viewport container: relative, min-h-[100dvh], overflow-hidden]
  [full-bleed image: absolute inset-0, object-cover]
  [gradient scrim: absolute inset-0, bg-gradient-to-t from-black/70 via-transparent to-black/20]
  [content: absolute bottom-0 left-0 p-12 lg:p-20, z-10]
    [H1: massive, white, mix-blend-mode: difference OR on top of scrim]
    [optional CTA]

文字必须能在照片上清晰辨认。使用渐变蒙层，或在文字上使用 mix-blend-mode: difference（该模式会根据背景反转文字颜色）。蒙层更稳妥，混合模式更大胆。在移动设备上，调高蒙层的不透明度。

---

架构 D：排版海报

最适合：创意工作室作品集、个人品牌宣言、以字体排印为主导的编辑风格页面

文字排版就是视觉主体。没有主视觉图片。标题本身以延伸至视口边缘的尺寸，就是图形元素。文字可以跨越视口边缘拆分排列。在同一标题中使用不同字重、字号或斜体，营造视觉层次。

[viewport container: min-h-[100dvh], flex flex-col justify-between p-8 lg:p-16]
  [top: nav or micro-label]
  [center: H1 at viewport-scale (10vw-15vw), possibly split into multiple positioned lines]
  [bottom: CTA or micro-metadata strip]

使用 font-size: clamp(4rem, 12vw, 16rem)。第一行可使用 text-align: left，第二行使用 text-align: right，让文字形成对角线视觉流动。使用 <span> 包裹元素，在同一标题中混用 font-weight: 900 与 font-weight: 300，或 font-style: italic。

---

架构 E：嵌入图片的文字排版

最适合：创意机构主视觉、风格鲜明的品牌页面、编辑风格首页

在巨大的标题文字中，单词之间嵌入小型圆角图片。图片与文字行内排列，高度与文字相同，起到视觉标点的作用。标题读起来像一句话，中间穿插着小照片。

[viewport container: min-h-[100dvh], flex items-center justify-center]
  [H1: massive, contains <span> wrappers for inline images]
    "Build " [inline-image: w-16 h-10 rounded-full object-cover align-middle mx-1] " a quieter, " [inline-image] " smarter AI agency presence."

/* BLUEPRINT: Inline hero images
   WHY: The images must match the x-height of the surrounding text.
   They are punctuation, not focal elements. Making them too large
   turns the heading into a gallery instead of a sentence. */
.inline-hero-img {
  display: inline-block;
  width: clamp(3rem, 5vw, 5rem);
  height: clamp(2rem, 3.5vw, 3.5rem);
  border-radius: 9999px;       /* pill shape */
  object-fit: cover;
  vertical-align: middle;
  margin-inline: 0.25em;
}

在移动设备上，行内图片可以随文字缩小，也可以堆叠到标题下方（hidden md:inline-block）。

---

架构 F：层叠纵深（Z 轴构图）

最适合：作品集展示、SaaS 产品演示、多项目机构展示

通过 CSS perspective 和 transform: rotateY() rotateX()，将多个视觉元素（卡片、图片、UI 模型）排列在不同纵深位置。一个元素作为“最近处”（尺寸最大、位于前方中央）。其他元素则向背景退去（尺寸更小、经过旋转、不透明度更低）。文字在构图上方或下方起到锚定作用。

[viewport container: min-h-[100dvh], relative, perspective: 1200px on parent]
  [card layer: absolute, multiple cards with varying transform: rotateY(Xdeg) translateZ(Ypx)]
    [front card: scale(1), translateZ(0), centered]
    [left card: rotateY(25deg), translateZ(-200px), scale(0.85), opacity-70]
    [right card: rotateY(-25deg), translateZ(-200px), scale(0.85), opacity-70]
  [text layer: relative z-10, positioned below or overlapping the card cluster]
    [H1]
    [CTA]

/* BLUEPRINT: Perspective card shelf
   WHY: perspective-origin centers the vanishing point. 
   preserve-3d lets child transforms create real depth.
   backface-visibility prevents render flicker on rotation. */
.perspective-container {
  perspective: 1200px;
  perspective-origin: center center;
}
.depth-card {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
}

⚠ 偏移警告： 此架构中 AI 最常见的失败模式，是将 8-10 张卡片以随机旋转角度随意散布在屏幕上。布局必须有一张清晰的焦点卡片（位于前方中央、不透明度为 100%、尺寸最大），并有 2-4 张辅助卡片对称地向纵深处退去。想想 Apple TV 应用的内容架，而不是卡片爆炸。

---

✓ 质量检查：架构

进入第 3 阶段前，请确认：

• 你从 A-F 中选定了一个架构
• 你的选择符合第 1 阶段提取的主视觉
• 你没有混合两种架构

---

第 3 阶段：构建主视觉

→ 字体排版

主视觉标题不是“大号文本”，而是构建整个视口结构的建筑元素。

字体选择——从对应行中选一种：

风格	优质候选字体（选一种）
简洁现代 / 科技 / SaaS	Geist、Satoshi、Cabinet Grotesk、Outfit、PP Neue Montreal
醒目宣言 / 代理机构	Clash Display、Cabinet Grotesk、Monument Extended、Sohne Breit
编辑风 / 奢华	PP Editorial New、GT Sectra Display、Canela、Reckless Neue（仅当参考设计使用衬线字体时才用衬线字体）
窄体 / 工业风	Bebas Neue、Oswald、Barlow Condensed、Archivo Black

⚠ 风格偏离警告： Inter、Roboto、Open Sans、Poppins、Arial 和 Helvetica 是正文字体，不是展示字体。用作主视觉标题字体会显得平庸，无论布局有多出色。如果参考设计使用其中一种，请仔细确认——在主视觉尺寸下，Inter 和 Geist 看起来几乎相同，而 Geist 才是展示级字体。

标题 CSS 蓝图：

/* BLUEPRINT: Hero heading
   WHY: clamp() makes the heading responsive without breakpoints.
   Negative letter-spacing is critical at large sizes - positive
   tracking on massive text creates a loose, amateurish feel.
   line-height below 1.0 lets ascenders and descenders overlap
   slightly, which looks intentional at display scale. */
.hero-heading {
  font-size: clamp(2.5rem, 7vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
  max-width: 18ch; /* prevents 4+ line wraps */
}

/* For 1-3 word headings, go larger */
.hero-heading--short {
  font-size: clamp(4rem, 14vw, 18rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
}

辅助文本层级：

元素	规格
眉题（标题上方）	font-size: 0.75rem、letter-spacing: 0.12em、text-transform: uppercase，使用等宽字体或几何无衬线字体。柔和的颜色（深色背景使用 text-white/50，浅色背景使用 text-zinc-500）
副文本（标题下方）	font-size: clamp(1rem, 1.25vw, 1.25rem)、max-width: 45ch、line-height: 1.6，使用柔和的颜色。不得超过 20 个词
CTA 按钮	实心胶囊按钮（rounded-full px-8 py-3.5）或幽灵胶囊按钮（rounded-full px-8 py-3.5 border border-white/20）。font-size: 0.875rem、letter-spacing: 0.05em，大写。最多只能有一个 CTA。不要添加次要的“了解更多”链接

---

→ 配色

主视觉中最多使用 3 种色调。这不是建议，而是获奖主视觉与杂乱设计的分水岭。

深色主视觉配色：

/* BLUEPRINT: Dark hero atmosphere
   WHY: #0a0a0a reads as black but has enough data for 
   subtle gradients to register. Pure #000000 is a dead 
   flat surface that cannot hold atmospheric effects. */
.hero-dark {
  background: #0a0a0a;
  color: #f5f5f5;
  /* Accent: one muted hue, used on max 1-2 small elements */
}

浅色主视觉配色：

.hero-light {
  background: #FAFAF9; /* or #F5F5F0 or #FDFBF7 - warm cream, not pure white */
  color: #1a1a1a;      /* or #111111 - near-black, not pure black */
  /* Accent: one considered hue */
}

⚠ 风格偏离警告： 主视觉中出现多个高饱和强调色，必然会显得杂乱、缺乏重点。CTA 和激活状态使用一种强调色，其余全部使用基础配色（背景色 + 文本色 + 柔和文本色）。

---

→ 氛围

不要使用纯色的 bg-black 或 bg-white。主视觉需要层次感。

深色模式——径向环境光晕：

/* BLUEPRINT: Ambient glow
   WHY: A barely-visible radial gradient centered slightly 
   above the midpoint creates the illusion of a light source,
   adding depth without any visible element. At 0.03 opacity 
   it's felt, not seen. */
.hero-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}

噪点颗粒叠加层：

/* BLUEPRINT: Film grain
   WHY: Breaks the digital flatness of solid CSS backgrounds.
   position:fixed prevents the grain from scrolling with content.
   pointer-events:none makes it non-interactive.
   0.04 opacity is the threshold where grain is felt but 
   doesn't interfere with text readability. */
.hero-dark::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
}

浅色模式——柔和暖色径向效果：

.hero-light {
  background: radial-gradient(ellipse at 30% 20%, rgba(250,235,215,0.4) 0%, transparent 50%), #FAFAF9;
}

---

→ 动效

每个主视觉都 MUST 配有入场动画。静态挂载会显得像是出了问题。

/* BLUEPRINT: Staggered hero entry (Motion / motion-react)
   WHY: The stagger (0.12s between children) creates a 
   cascade effect. blur(8px)→blur(0) adds perceived quality 
   beyond simple fade-in. The custom cubic-bezier gives a 
   snappy deceleration that feels physical, not computed. */
const heroVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.12, delayChildren: 0.1 }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 30, filter: "blur(8px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.8,
      ease: [0.16, 1, 0.3, 1]  // custom ease-out
    }
  }
};

// Apply: <motion.div variants={heroVariants} initial="hidden" animate="visible">
//          <motion.h1 variants={itemVariants}>...</motion.h1>
//          <motion.p variants={itemVariants}>...</motion.p>
//          <motion.div variants={itemVariants}>CTA</motion.div>
//        </motion.div>

动画顺序： 背景先淡入（0ms）→ 标题向上滑动并逐渐清晰（100ms）→ 副文本向上滑动（220ms）→ CTA 向上滑动（340ms）。总显现时间控制在 800ms 以内。

CTA 悬停物理效果：

/* BLUEPRINT: CTA hover
   WHY: translateY(-2px) creates a subtle lift. The custom 
   cubic-bezier makes the return-to-rest feel weighted, not 
   springy. scale(0.98) on active gives tactile press feedback. */
.hero-cta {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.hero-cta:active {
  transform: translateY(0) scale(0.98);
}

视差结构（如果参考设计有所暗示）：

<section class="hero relative min-h-[100dvh] overflow-hidden">
  <div class="hero-bg absolute inset-0 will-change-transform">
    <img ... class="w-full h-full object-cover" />
  </div>
  <div class="hero-content relative z-10">
    ...
  </div>
</section>

旋转文本徽章（如果参考设计中有）：

/* BLUEPRINT: Rotating badge
   WHY: 12s is slow enough to be ambient, not distracting.
   Use SVG textPath along a circle for curved text.
   Place in a bottom corner (absolute bottom-8 left-8), 
   not floating randomly. */
.rotating-badge {
  width: 100px;
  height: 100px;
  animation: spin 12s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rotating-badge { animation: none; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

---

→ 移动端适配

每种架构都 MUST 在 768px 以下平滑降级。

元素	移动端行为
标题	通过 clamp() 缩小。移动端不得小于 2rem
布局	所有多列布局都折叠为 flex-col 或 grid-cols-1
内嵌图片（架构 E）	按比例随文本缩放，或隐藏（hidden md:inline-block）
3D 透视卡片（架构 F）	在 md 以下移除所有 rotateY/rotateX 变换。垂直堆叠，或仅显示焦点卡片
全出血图片（架构 C）	提高遮罩渐变的不透明度，以确保文本清晰可读
触控目标	所有 CTA 的可点击区域高度至少为 44px
水平溢出	在主视觉外层使用 overflow-x-hidden，防止 3D 变换元素产生滚动条

→ 性能

规则	原因
只为 transform 和 opacity 添加动画	这些属性由 GPU 合成。为 top、left、width、height 添加动画会导致每帧都重新计算布局
仅对正在播放动画的元素设置 will-change: transform	过度使用 will-change 会浪费 GPU 内存。动画结束后应移除
仅对固定或粘性元素使用 backdrop-filter: blur()	对滚动的 Hero 背景应用模糊会严重降低帧率
Hero 图片使用 loading="eager"（或在 Next.js 中使用 priority）	Hero 图片位于首屏区域，延迟加载会导致 LCP 失败
噪点／颗粒效果应放在 position: fixed 的伪元素上	绝不要放在滚动容器上，否则每帧都会重绘
所有动画都必须受 prefers-reduced-motion 控制	使用 Motion 的 useReducedMotion() 或 CSS @media (prefers-reduced-motion: reduce)

---

✓ 质量关卡：构建

进入第 4 阶段前，请确认：

• 遵循第 2 阶段的架构，未混用不同架构
• 标题字体是展示字体，而非正文字体
• 标题使用流式 clamp()，在桌面端至少相当于 text-5xl
• 在 1440px 桌面屏幕上，标题最多换为 2-3 行
• 标题字母间距收紧（负字距）
• 标题行高压缩（< 1.1）
• 配色最多使用 3 种色相
• Hero 使用 min-h-[100dvh]，而非 h-screen
• 包含入场动画（交错淡入、上移并去模糊）
• 所有动画仅使用 transform 和 opacity
• 明确处理移动端布局收缩

---

第 4 阶段：验证

将你的 Hero 与参考内容（若未提供参考，则与 Hero 提取结果）进行比较。逐项检查每个类别。任何一项未通过都不得交付。

构图差异

检查项	通过／失败
视口中有一个主导焦点（而非 3 个或更多相互争抢注意力的元素）
1440x900 视口内可完整显示 Hero，无需滚动即可找到 CTA
桌面端标题最多换为 2-3 行
内容垂直居中或有意锚定（而非挤在顶部）
留白充足且经过有意设计（不拥挤，也非偶然）

字体排版差异

检查项	通过／失败
标题字体不是 Inter、Roboto、Open Sans、Poppins 或 Arial
标题字号使用流式 clamp()
标题字母间距为负值
标题行高低于 1.1
辅助文本最多 20 个词，颜色柔和，宽度受限

色彩差异

检查项	通过／失败
整个 Hero 中最多使用 3 种不同色相
背景具有氛围感（颗粒、辉光、暖色调），而非纯色 bg-black 或 bg-white
没有 AI 风格的紫／蓝渐变背景
没有霓虹点缀、网格色块或彩虹效果

组件差异

检查项	通过／失败
Hero 中最多只有一个 CTA（没有“了解更多”等次要链接）
CTA 具有悬停和按下状态，并使用自定义缓动效果
没有“滚动以探索”提示、弹跳箭头或滚动指示器
Hero 中没有信任标识或“使用者”徽章
没有版本标签（v0.6、BETA），除非需求明确是产品发布
没有任何表情符号

动效差异

检查项	通过／失败
有入场动画（不是瞬间静态显示）
入场动画总时长低于 800ms
遵循 prefers-reduced-motion 设置
没有对 top、left、width 或 height 设置动画

移动端差异

检查项	通过／失败
布局在 768px 以下能够自然收缩
没有水平溢出
触控目标至少为 44px
移动端标题至少为 2rem
图片上的文字清晰可读（必要时提高遮罩不透明度）

内容差异

检查项	通过／失败
没有 AI 文案陈词滥调（“提升”、“无缝”、“释放”、“新一代”、“变革”）
不使用破折号，改用句号、逗号或冒号
没有使用通用素材库图片作为占位图（使用 picsum.photos/seed/{keyword}/{w}/{h}）
该 Hero 放在 awwwards.com 上也不会显得格格不入

---

核心原则

这些基本原则，正是屡获殊荣的首屏设计与普通 AI 输出的区别所在。无论选择哪种架构，这些原则都适用。

一个视觉焦点。 首屏只有一个占主导地位的视觉元素。统计同一视觉层级上相互争夺注意力的元素数量。如果超过 2 个，就逐步精简，直到其中一个明显占主导地位。

与视口尺寸相称的字体。 首屏标题是构成设计的元素，而不是“放大的文字”。最小字号为 clamp(2.5rem, 7vw, 8rem)。对于 1-3 个词的标题：clamp(4rem, 12vw, 15rem)。字间距要紧凑，行高要压缩。

极致留白。 背景不是被浪费的空间——它本身就是设计。使用 flex/grid 垂直居中内容，而不是通过过多内边距将内容推到顶部。

精简配色。 最多 3 种色调。深色首屏：近黑色 + 白色 + 一种强调色。浅色首屏：暖奶油色 + 近黑色 + 一种强调色。使用多种高饱和度强调色会破坏视觉焦点。

适配单个视口。 整个构图（导航栏 + 标题 + 副文案 + CTA + 焦点视觉）必须能在 1440x900 的视口中完整显示，无需滚动。