cinematic-scrub-landing

电影感逐帧拖动落地页 — 黄金模板

构建一个优质、契合品牌的落地页，让主视觉视频随鼠标响应，并通过其余页面内容引导访客走过由 5 个节拍组成的叙事弧线。用户提供视频，还可选择提供 logo、产品照片和品牌背景——此技能负责提取配色、选择字体、处理 RTL/LTR、搭建项目骨架、重新编码所有关键帧视频、实现鼠标逐帧拖动效果、提供版块库并进行验证。

此技能的存在意义

参考实现位于 https://github.com/hoodini/bamba ——这是一个以色列 RTL 网站，介绍零食“במבה”。其中，婴儿视频会随着光标在整个页面上移动；下方 4 个风格迥异的版块（亮黄色食谱、奶油色怀旧相册、深色沉思式定价、红色行动收尾）引导访客依次经历 渴望 → 喜悦 → 怀旧 → 沉思 → 行动。

此技能中的每条规则都来自该项目的实际构建经验。硬性规则部分中的要点全部是历经实践总结出的硬性要求——优先于任何通用的“良好代码”默认做法。

---

版块展示（你要构建的内容）

主视觉保持在顶部。下方从版块库中挑选 4 个版块，并按叙事弧线排序。每个版块都完全不透明（不会透出视频），且拥有独特的品牌风格：

节拍	类型	参考
1 — 渴望	主视觉（鼠标逐帧拖动视频）
2 — 喜悦	Sun — 明亮的主色渐变、漂浮的装饰性 SVG、巨大的幽灵文字、统计卡片
3 — 怀旧	Album — 奶油色纸张、点状微图案、带真实产品照片的拍立得拼贴
4 — 沉思	Roast — 深色背景搭配径向强调色光晕，三张各有不同视觉处理方式的定价卡片
5 — 行动	Signal — 满版强烈强调色（红色/橙色/绿色）、超大标题 + CTA、玻璃质感容器面板

对于技术/SaaS 品牌，可根据需要替换版块类型（见下方的版块库）——但始终以 Signal 版块收尾。

---

如何使用此技能

1. 将素材放入一个干净的工作目录：

   • 主视觉视频（任意容器格式——.mp4、.mov、.webm）
   • Logo（强烈建议使用 SVG；也可使用带透明背景的 PNG）
   • 1-3 张产品/主体图片（JPG/PNG，透明背景为佳）

2. 与用户简要确认（提出默认选项后继续）：

   • 产品名称 + 元标签标语
   • 语言代码（决定 RTL/LTR 和字体选择）
   • 品牌背景——时代、受众、情感核心、配色氛围
   • 可选：明确的调色板十六进制值、叙事弧线节拍

3. 按顺序执行以下工作流。 所有阶段均为必需。不要跳过 ffmpeg 重新编码——它是逐帧拖动体验顺滑流畅的关键。

4. 完成前进行验证。 第 9 阶段包含 12 项检查，全部执行。

---

输入——向用户收集以下信息

PRODUCT_NAME: "<e.g. במבה / Bamba / Hope the Cheetah / Acme CRM>"
TAGLINE: "<the meta-message — e.g. 'it's not a snack, it's lifelong memories'>"
LANGUAGE: "<he | en | ar | es | fr | ja | ...>"
IS_RTL: "<true | false>"                                   # he/ar/fa = true; everything else = false
HERO_VIDEO_FILE: "<exact filename in cwd — e.g. baby2.mp4>"
LOGO_FILE: "<exact filename — leave blank if none>"
PRODUCT_IMAGE_FILE: "<exact filename — leave blank if none>"
BRAND_CONTEXT: |
  <2-4 sentences: era it evokes, who the audience is, the emotional core,
  the visual identity (warm/cool/playful/serious). Drives palette + motifs.>
PALETTE: "<optional — comma-separated hexes if overriding>"
NARRATIVE_ARC: "<optional — 5 emotional beats; AI proposes if blank>"

完整的文本模板（包含相同的 YAML 区块和提示词正文）位于 references/GOLDEN_PROMPT.md——如果无法直接访问技能运行时，请填好 YAML 后将其粘贴到 Claude 中。

阶段 0 — 规划设计（编码前输出一份不超过 200 词的简报）

编写任何代码之前，先输出：

1. 提取的 5 色调色板：background（最深的墨色）、cream（暖调的米白色文本——绝不能是 #FFFFFF）、accent（主要品牌色）、accent2（次要品牌色）、support（第三色调）。如果没有给出 PALETTE，则从徽标和产品图片中提取。调色板必须在色调上协调一致——要么全部暖调，要么全部冷调，绝不能混搭。暖调品牌（食品、自然、怀旧、动物）→ 不使用蓝色、蓝绿色、薄荷绿、青色。冷调品牌（科技、金融、医疗、科幻）→ 除极少量点缀色外，不使用暖色调。

2. 字体三重搭配（标题 / 正文 / 手写点缀），按语言选择：

   • he：Rubik（标题）+ Assistant（正文）+ Suez One（点缀）
   • en：Anton（标题）+ Inter（正文）+ Caveat（点缀）
   • ar：Cairo（标题）+ Tajawal（正文）+ Reem Kufi（点缀）
   • es / fr / it / de：Anton 或 Bebas Neue（标题）+ Inter（正文）+ Caveat（点缀）
   • ja：Noto Sans JP 字重 900（标题）+ Noto Sans JP（正文）+ Yusei Magic（点缀）
   • 其他语言：选择三款适合该文字体系的 Google Fonts，分别承担 display-black / body-clean / handwritten-script 的作用。

3. 叙事弧线——设计 5 个情感节点，与 BRAND_CONTEXT 对应。为每个节点从章节库中选择一种章节类型。

然后执行——无需请求确认。

---

阶段 1 — 资源准备（关键步骤）

1a. 验证 ffmpeg

which ffmpeg     # or: Get-Command ffmpeg on PowerShell

如果不存在，请停止并告知用户安装（brew install ffmpeg / Windows：http://ffmpeg.org）。

1b. 将主视觉视频重新编码，使每一帧都是关键帧

浏览器只能即时跳转到关键帧——标准视频大约每 250 帧才有 1 个关键帧，导致鼠标拖动时严重卡顿。这个命令就是高端作品与业余作品的区别：

ffmpeg -y -i <HERO_VIDEO_FILE> -g 1 -keyint_min 1 -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -an hero.mp4

验证输出：hero.mp4 应为 5-50 MB。如果超过 50 MB，使用 -crf 25 重新运行；如果超过 80 MB，则使用 -crf 28。移除音频（-an）——主视觉视频应为静音。

1c. 复制徽标和产品图片

cp <LOGO_FILE>           public/logo.<ext>
cp <PRODUCT_IMAGE_FILE>  public/product.<ext>   # if provided

---

阶段 2 — 搭建项目骨架

npm create vite@latest site -- --template react-ts
cd site
npm install
npm install lucide-react
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
mkdir -p public
mv ../hero.mp4 public/hero.mp4
# Also move the logo + product image into public/

---

阶段 3 — Tailwind 配置

完全替换 tailwind.config.js。使用提取的调色板和适合相应语言的字体：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        background: '<ink/dark>',
        cream:      '<warm off-white — NEVER #FFFFFF>',
        accent:     '<primary brand color>',
        accent2:    '<secondary>',
        support:    '<tertiary>',
      },
      fontFamily: {
        sans:    ['<body font>',         'system-ui', 'sans-serif'],
        display: ['<display font>',      'sans-serif'],
        accent:  ['"<handwritten font>"', 'cursive'],
      },
    },
  },
  plugins: [],
}

---

阶段 4 — index.html

完全替换。遵循 IS_RTL 设置。始终添加指向徽标的 favicon 链接：

<!DOCTYPE html>
<html lang="<LANGUAGE>" dir="<rtl|ltr>">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="apple-touch-icon" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="<Google Fonts URL for the three chosen fonts>" rel="stylesheet">
    <title><PRODUCT_NAME> — <TAGLINE></title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

---

阶段 5 — index.css（设计系统）

完全替换。以下每项工具类都至关重要。名称基于前面提取的暖色调配色；如果品牌采用冷色调，请将阴影色调中的「yellow」/「red」替换为实际的强调色。

必须包含：

• html { scroll-behavior: smooth; } + section[id] { scroll-margin-top: 90px; }，避免锚点定位的区段被固定导航栏遮挡。
• body 背景 = background 颜色（视频加载失败时的备用颜色）。光标 = crosshair。默认字体 = 正文无衬线字体。
• .liquid-glass / .liquid-glass-strong — 背景模糊 + 饱和度 + 内侧亮边框 + 带遮罩的渐变边缘高光。强效变体使用带 accent 色调的内发光。
• .glass-pill — 紧凑的圆角胶囊，采用相同的玻璃质感，用于导航项和小型徽标。
• .cta-primary — 品牌 CTA：linear-gradient(135deg, accent-light, accent, accent-shade) + 强调色发光阴影，悬停时增强 + translateY(-1px) 上移效果。
• .brand-mark — 未提供 SVG 时用于小型 Logo 标记的小方块/圆形。
• .grid-bg — 细微的 1px 网格，带径向淡出遮罩，用于深色区段下方。
• .reveal / .revealed — IntersectionObserver 滚动显现：opacity 0 → 1 + translateY 28 → 0，过渡时长 0.9s，使用 cubic-bezier(0.16, 1, 0.3, 1)。
• .scrim-top / .scrim-bottom — 仅用于主视觉区域的渐变叠加层。
• 各区段背景，按感觉而非颜色命名：
  • .sun-section — 明亮的主强调色渐变 + 细微的点状纹理（「喜悦 / 打开袋子」的节拍）。
  • .album-section — 暖白色纸张质感，径向强调色调 + 微型点状图案，边缘遮罩淡出。
  • .roast-section — 深色背景，带径向强调色 + 位于对角的 accent2 光晕 + 带遮罩的网格纹理。
  • .signal-section — 满版浓郁强调色（通常为红色/橙色/绿色），用于行动收尾。
• .polaroid — 白色卡片，内边距 14px 14px 44px 14px，柔和的分层阴影，悬停时上移至 translateY(-6px) rotate(0)。.polaroid-tape = 顶部居中的黄色/强调色胶带条，绝对定位，旋转 -4°，带虚线侧边装饰。
• .stamp — 强调色虚线边框胶囊，全大写，字母间距 0.18em。
• .ribbon — 定价/热门徽标，底部带 clip-path 三角形，带深色投影。
• .highlight-circle — 通过 ::after 绘制手绘感椭圆：在行内 <span> 周围绘制旋转 3px 的强调色边框。将其用于大标题中最重要的单个词（每个标题最多一个）。
• 装饰图案滤镜：.peanut-svg / .<motif>-svg，带 drop-shadow。
• 遵循 prefers-reduced-motion: reduce — 在媒体查询中禁用显现动画 + 平滑滚动。

---

阶段 6 — App.tsx 架构

架构不可妥协。一次就要做好：

6a. 导入

import { useEffect, useRef, useState } from 'react';
import {
  Menu, X, ArrowLeft, ArrowRight, ArrowDown, ArrowUp, MousePointer2,
  // …plus 4-8 brand-thematic icons (Heart, Sparkles, Cookie, PawPrint, Cpu, Leaf, …)
} from 'lucide-react';

6b. 在 App.tsx 中定义可复用组件

• useReveal<T>() — IntersectionObserver 钩子，返回一个 ref；首次进入视口时添加 revealed 类（threshold 0.15）。
• GlassCard — 带显现钩子的包装组件，可选 strong 属性，接受 className。
• Motif — 单个装饰性 SVG 组件，主题由 BRAND_CONTEXT 决定（食品用花生、动物用爪子、科技用电路、自然用叶子、饮料用水滴、能源用闪电）。在每个深色/明亮区段中以低不透明度浮动显示 3-6 处。
• ScrollToTopButton — 固定位置：RTL 时为 bottom-6 left-6，LTR 时为 bottom-6 right-6。当 window.scrollY > window.innerHeight * 0.6 时显示。平滑滚动到顶部。使用符合语言习惯的简短标签（"לראש" / "Top" / "أعلى" / "Inicio"）。

6c. 鼠标拖动控制效果（核心）

const videoRef = useRef<HTMLVideoElement>(null);
const stateRef = useRef({ targetTime: 0, isSeeking: false });

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleLoaded = () => {
    const mid = video.duration / 2;
    video.currentTime = mid;
    stateRef.current.targetTime = mid;
  };

  const handleSeeked = () => {
    const s = stateRef.current;
    s.isSeeking = false;
    if (Math.abs(s.targetTime - video.currentTime) > 0.01) {
      s.isSeeking = true;
      video.currentTime = s.targetTime;
    }
  };

  const handleMouseMove = (e: MouseEvent) => {
    const s = stateRef.current;
    const d = video.duration;
    if (!d || isNaN(d)) return;
    const normalized = e.clientX / window.innerWidth;
    // If subject moves "backwards" relative to cursor and feels wrong, optionally
    // use `1 - (e.clientX / window.innerWidth)` instead — ASK the user first.
    s.targetTime = Math.max(0, Math.min(d, normalized * d));
    if (!s.isSeeking) { s.isSeeking = true; video.currentTime = s.targetTime; }
  };

  video.addEventListener('loadedmetadata', handleLoaded);
  video.addEventListener('seeked', handleSeeked);
  window.addEventListener('mousemove', handleMouseMove);
  return () => {
    video.removeEventListener('loadedmetadata', handleLoaded);
    video.removeEventListener('seeked', handleSeeked);
    window.removeEventListener('mousemove', handleMouseMove);
  };
}, []);

isSeeking 守卫至关重要——没有它，mousemove 触发速度会超过浏览器的解码速度，导致 seek 队列溢出 + 明显卡顿。

6d. 可点击的滚动监听导航

const navItems: { label: string; target: string }[] = [
  { label: '<demo>',     target: 'top'     },
  { label: '<recipe>',   target: 'recipe'  },
  { label: '<moments>',  target: 'moments' },
  { label: '<family>',   target: 'family'  },
  { label: '<contact>',  target: 'contact' },
];

const scrollToSection = (target: string) => {
  setMenuOpen(false);
  if (target === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
  document.getElementById(target)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

为每个导航项设置 onClick={() => scrollToSection(target)}。导航中的 CTA 按钮也调用 scrollToSection('contact')（或最终节拍对应的 id）。

6e. 根 JSX 布局——Z-INDEX 陷阱（切勿违反）

return (
  <div className="relative">                              {/* NO bg-* class on this wrapper */}
    <ScrollToTopButton />
    <video ref={videoRef} src="/hero.mp4" muted playsInline preload="auto"
           className="fixed inset-0 h-full w-full object-cover -z-20" />

    <nav className="fixed top-0 inset-x-0 z-50 ...">{/* nav */}</nav>
    {menuOpen && <div className="fixed top-24 inset-x-4 z-40 ...">{/* mobile menu */}</div>}

    <section className="relative h-screen overflow-hidden">{/* HERO — video shows through */}</section>
    <section id="recipe"   className="sun-section ...">{/* OPAQUE — own identity */}</section>
    <section id="moments"  className="album-section ...">{/* OPAQUE */}</section>
    <section id="family"   className="roast-section ...">{/* OPAQUE */}</section>
    <section id="contact"  className="signal-section ...">{/* OPAQUE — the action finale */}</section>
    <footer  className="bg-background py-8 ...">{/* mini-footer */}</footer>
  </div>
);

外层 <div> 不得设置背景色。 在包装元素上设置 bg-background / bg-cream / bg-white 会遮住 -z-20 视频，导致 Hero 区域的滚动效果失效。只有 body 将 bg-background 作为后备背景。这是参考实现中最常见的错误。上线前务必检查。

---

阶段 7 — 区块库（在 Hero 之后选择 4-5 个）

Hero 是第 1 个区块。然后从此区块库中再选择 4 个，按 NARRATIVE_ARC 排列。不要重复使用相同的模式。 每个区块都有完全不透明的独立背景——只有 Hero 区域会透出视频。

类型 A — “太阳”（明亮的主色调）

使用大面积主色渐变背景。以低不透明度放置悬浮的主题 SVG。角落放置巨大、褪色的幽灵数字/文字（例如，创立年份，透明度为 6%，字号为 260px）。标题面板：对比鲜明的奶油色圆角卡片，带有强阴影——内部放置标题，眉题为旋转 -2° 的强调手写字体词语，大号超粗标题以 .highlight-circle 包围的词语结尾。标题旁悬浮一张真实产品照片，带倾斜效果（6°，投影），悬停时恢复正向。下方横向排列 3 张统计卡片，每张均为奶油色圆角 [28px]，并有略微不同的旋转角度（-1.5°、0.8°、-0.6°）；每张卡片包含一个巨大的超粗强调色数字（88-110px）、右上方的小标签徽章、正文和底部署名。底部放置两张大型对比色文字面板（一张深色，一张强调色 2），并配有主题图标。

类型 B — “相册”（奶油色怀旧纸张）

奶油色纸张背景，带有细微的点状微图案（边缘处做遮罩处理）。角落放置一个巨大的、褪色的强调色 2 手写字体词语，透明度为 4-6%。标题面板：纯白圆角卡片，带阴影。旁边放置一张引言卡片：深色背景、强调色引言图标、强调字体（手写风格）的推荐语、署名下划线，并略微旋转 -2°。主体：拍立得便当网格——一张大型主打拍立得（md:col-span-2 md:row-span-2，旋转 -1.5°），内部将 PRODUCT_IMAGE 放在渐变边框中，配有角落主题折边和标签徽章；另有 4 张较小的拍立得，每张都带有主题图标渐变图像区域；所有卡片均带黄色/强调色胶带、手写说明文字，且旋转角度略有不同。

类型 C — “烘焙”（深色沉思风格）

深色背景，两个相对的角落分别带有强调色和强调色 2 的径向光晕，并叠加带遮罩的网格纹理。以极低不透明度放置悬浮的主题 SVG。标题面板：使用 liquid-glass-strong 圆角面板，标题带有强调色光晕。侧边标签：使用 glass-pill，包含主题图标和单行短语。主体：三张定价卡片，分别采用三种不同的视觉设计（这种多样性至关重要——切勿使用三张相同的卡片）：

1. 浅色卡片——奶油色纸张，强调色边框，花生棕深色文字，右上角放置虚线印章徽章，经典价格数字，深色 CTA 按钮。
2. 突出显示的卡片——强调色渐变背景，尺寸略大（顶部使用负外边距使其上移），右上角放置 .ribbon，超大强调色 2 价格数字，以及带强烈光晕的强调色 2 CTA。
3. 深色卡片——深色背景，强调色 2 饰边，带光晕的强调色 2 数字、主题图标和 cta-primary 按钮。

类型 D — “Signal”（最终行动）

全屏铺满鲜艳的强调色（红色、橙色、绿色——取决于品牌的“行动”色），在对角放置两个大型模糊的 accent2 色光球，并在文字后方居中放置一个巨大的模糊 accent2 色椭圆。悬浮的 SVG 图案，透明度约为 30%。一个独立面板（深色半透明、背景模糊并带有强调色调），其中包含：倾斜 -2° 的 .stamp 徽章眉题、大型响应式标题（60→148px），混合使用展示黑体和居中的手写字体行，并以一个简短的结尾词收尾。下方是两行副标题。大型主 CTA 按钮（奶油色背景、强调色文字），带有一个微微脉动的小圆点指示器。可选的次要描边链接。底部的 Logo 两侧以水平分隔线衬托（“by ”）。

类型 E — “Workshop” / “Specs”（技术型）

适用于科技 / SaaS / B2B 场景，尤其是其中有一个环节介绍“工作原理”的情况。深色背景，左右交替的双栏行：一侧是带编号的眉题、标题和正文，另一侧是玻璃质感卡片，展示代码 / 示意图 / 截图。保持强烈的纵向节奏。如果 BRAND_CONTEXT 是技术类，请用它替代 B 或 C。

始终以类型 D（Signal）收尾，让最后一个环节聚焦行动。 即使是技术类 SaaS 页面也需要这样——将温暖的收尾替换为冷色调（深蓝色或紫罗兰色），但保留这一结构。

---

第 8 阶段 — 硬性规则（优先于任何相矛盾的“最佳实践”）

1. 外层包装 <div> 不要设置背景色。 只有 body 使用 bg-background。其他任何设置都会遮住视频。
2. Hero 视频使用 position: fixed; -z-index: 20 — 重新编码时使用 -g 1 -keyint_min 1。
3. 每个非 Hero 区块都必须完全不透明，并使用各自的背景类。绝不要用半透明遮罩让所有区块都“透出 Hero”——那只是把单调伪装成艺术。
4. 每个区块都要有独特的视觉识别。 使用不同的背景、不同的配色重点和不同的布局模式。五个区块不能看起来像同一种卡片网格的五种变体。
5. 区块顺序由叙事弧线决定。 从 BRAND_CONTEXT 奠定的情绪开始，以行动收尾。
6. 标题在复杂背景上也必须清晰易读。 每个悬浮文本块（标题、引言、副标题、光标提示、徽章）都要放在面板中——深色区块使用 liquid-glass-strong，浅色区块使用白色／奶油色卡片，小型提示使用 glass-pill。不要让文字直接悬浮在复杂纹理上。
7. 标题最大字号：Hero ≤ 78px（桌面端，确保产品／主体仍清晰可见）。区块标题 ≤ 108px。最终 CTA ≤ 148px（不让其他内容争夺注意力）。
8. 配色统一：暖色品牌 → 除极少量点缀外，不使用冷色调；冷色品牌 → 除极少量点缀外，不使用暖色调。文字绝不使用 #FFFFFF——始终使用项目的 cream 值。
9. Logo 处理方式：原样使用 Logo 文件。不要反转、不要着色、不要裁切，也不要放进与之争抢注意力的彩色方框。尺寸：导航栏 h-9／Hero 署名 h-12／最终 CTA 署名 h-16／迷你页脚 h-6。
10. 真实产品摄影优于生成式渐变。 如果提供了 PRODUCT_IMAGE_FILE，就要醒目使用——用作主打拍立得卡片和 Hero 侧边装饰，和／或用于其中一张定价卡片。
11. 导航栏支持点击和滚动定位。 使用 { label, target } 项，平滑滚动到对应区块。在 section[id] 上设置 scroll-margin-top: 90px，避免区块滚动后被导航栏遮挡。
12. 滚动到顶部按钮在滚动超过视口高度的 60% 后显示；RTL 页面固定在左下角，LTR 页面固定在右下角，并使用简短且符合语言习惯的标签。
13. RTL 布局：Hero 文本面板位于右下角。前进箭头使用 ArrowLeft。光标提示位于左下角。移动端菜单项右对齐。
14. LTR 布局：Hero 文本面板位于左下角。前进箭头使用 ArrowRight。光标提示位于右下角。
15. 网站图标使用 Logo，在 index.html 中通过 <link rel="icon" type="image/svg+xml" href="/logo.svg" /> 设置。还要添加 apple-touch-icon。
16. 装饰性图案 SVG——设计一个以内置 React 组件形式编写、主题契合 BRAND_CONTEXT 的图案（花生、爪印、电路、叶子、水滴、闪电、雪花）。每个深色／鲜艳区块中以低不透明度显示 3～6 个实例。
17. 幽灵字体：至少在一个区块的角落放置一个巨大、低不透明度（4-8%）的词语或数字——创立年份、一个词表达的情绪、品牌名称。字号 200-300px，淡到像水印。
18. 手写风格点缀：使用手写体字体，在每个标题上方以 -2° 倾斜角、点缀色显示区块眉题（"המתכון"／"the recipe"／"el origen"）。还要用它来呈现最终 CTA 标题的中间一行，打破节奏。
19. 使用印章徽章代替普通胶囊标签，展示“成立 X 年”／“始于 YYYY”／“原创”／“限量”等字样——采用虚线边框、大写字母和加宽字距。
20. 用手绘风格的红色椭圆圈出每个区块标题中最重要的那个词。每个标题最多圈一个词。
21. 定价卡片必须各不相同。 分别采用浅色、高亮点缀色和深色三种截然不同的样式。高亮卡片尺寸更大，带缎带装饰并具有发光效果。
22. 怀旧回忆卡片采用拍立得样式：白色卡片、黄色／点缀色胶带、轻微倾斜、手写说明文字、渐变图片区域；悬停时旋转归正至 0° 并上移。
23. CTA 使用品牌 CTA 渐变和光晕（cta-primary 类）。始终带箭头图标。主要操作按钮还要始终带一个微小的脉冲圆点指示器。
24. 编写完成后运行 npx tsc --noEmit。 必须无任何输出且通过。然后运行 npm run dev，确认服务正常启动。两项都通过前，不要声称已完成。
25. 不要添加用户未要求的功能——不要添加联系表单、邮件订阅、分析工具、Cookie 横幅、语言切换器或深色模式开关。严格按规格交付。
26. 所有文案都使用 LANGUAGE。 不要在希伯来语页面中混入英文固定文案，反之亦然。仅允许品牌标识、CSS 字体系列名称以及 TypeScript／React 标识符使用 LANGUAGE 以外的文字。
27. 代码或文案中不要使用表情符号，除非品牌调性明确要求。
28. 代码中不要写注释，除非是为了解释不明显的原因（例如 isSeeking 守卫）。

---

阶段 9 — 运行并验证

1. npx tsc --noEmit → 无输出。
2. npm run dev → Vite 显示 ready in <ms>，且没有错误。
3. 打开本地 URL。
4. Hero 检查 — 页面加载后，Hero 清晰可见；移动鼠标时，视频流畅地随鼠标移动，没有卡顿。如果主体相对于光标向“后退”，感觉不对，请先询问用户，再切换为 1 - (e.clientX / window.innerWidth)。
5. 版块独立性检查 — 滚过 Hero 后，应看到 4 个版块，每个都有自己的不透明背景，不会透出 Hero 视频。如果能在后续任一版块中看到 Hero 主体，说明外层容器有一个 bg- 类 — 找到并移除它（硬性规则 #1）。
6. 导航栏点击测试 — 点击每个导航项；平滑滚动后应定位到正确版块，且版块位于导航栏下方（而非被导航栏遮挡）。点击导航栏中的 CTA 按钮应滚动到最终行动版块。
7. 滚动到顶部测试 — 滚动超过视口高度的 60% 后，浮动按钮应出现在左下角（RTL）或右下角（LTR）。点击 → 平滑滚动到顶部，按钮淡出。
8. Logo 检查 — Favicon 在浏览器标签页中可见；Logo 在导航栏 / Hero / 最终版块 / 迷你页脚中的尺寸正确，且没有反色或色调偏移。
9. 资源检查 — 如果提供了产品图片，它至少应以较大尺寸出现一次（作为特色拍立得照片或 Hero 侧边装饰），而不只是缩略图。
10. 响应式检查 — 在 360px、768px、1280px 宽度下，没有水平滚动、文字重叠；在 md 断点以下，导航栏折叠为汉堡菜单。
11. 减少动态效果 — 在开发者工具中设置 prefers-reduced-motion: reduce 并重新加载。滚动显示效果应直接呈现（无动画），平滑滚动应立即完成。
12. 如果任何检查失败，先修复再报告完成。不要把问题留给用户。

报告开发服务器打印的 URL、你选择的配色方案和叙事弧线，以及使用的版块类型。

---

参考实现

Bamba（במבה）网站：https://github.com/hoodini/bamba — 面向以色列零食的希伯来语 RTL 落地页，包含全部五个版块、随鼠标擦动的视频背景、可点击的导航栏，以及真实的 Osem 品牌素材。如果本技能中有任何不明确之处，以该仓库为准。

完整文本模板（内容与此 SKILL.md 相同，格式适合粘贴到 Claude 中使用）位于 references/GOLDEN_PROMPT.md。当技能运行时不可用时，可将其用作备用方案。

---

何时改用其他技能

• parallax-landing-page — 由滚动驱动，页面本身固定不动，5 个文本场景随帧擦动而交叉淡入淡出。当需求是“滚动擦动视频，页面不移动”时使用。
• video-to-landing-page — Apple 风格的粘性 Hero，滚动时视频通过均匀间隔提取的 JPEG 帧逐帧推进。单个 Hero 下方带有其他版块。
• video-edit — 字幕、基于转录文本的剪辑、社交媒体短片。不适用于落地页。
• hyperframes — 构建 HTML 视频合成（方向相反 — HTML → MP4）。
• 此技能（cinematic-scrub-landing） — 鼠标驱动的固定全页视频背景，下方是包含 4–5 个不透明品牌版块、沿垂直方向滚动的叙事弧线。当用户希望 Hero 响应光标，并让下方页面讲述一个故事时，选择此技能。