量化线场

STYLEKIT_STYLE_REFERENCE
style_name: 量化线场
style_slug: quantized-line-field
style_source: /styles/quantized-line-field

# Hard Prompt

## 什么时候用
当你希望 AI 严格按风格规则生成代码时使用。它是生产界面最稳的默认选择。

## 怎么用
- 把完整提示词复制到 ChatGPT、Claude、Cursor 或其他编码助手。
- 在提示词后追加具体产品、页面或组件需求。
- 生成后按禁止项和交互状态检查，确认没有风格漂移。

请严格遵守以下风格规则并保持一致性，禁止风格漂移。

## 执行要求

- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。

## Style Rules

默认使用下方完整案例复现三张品牌卡片。用户追加的品牌、文案和配色需求可以覆盖对应的默认数据；其余采样、线宽、噪声、交互和无障碍规则保持一致。

请制作一个名为“Identity, in lines.”的精致响应式单文件 HTML 页面，直接用现代浏览器打开即可运行。只使用原生 HTML、CSS、JavaScript、Canvas 2D 和 Path2D。不要使用库、框架、模块、构建工具、图片、图片链接、外部 SVG 文件、外部字体或网络请求。CSS 和脚本全部内联。最终只返回完整 HTML 文件。

1. 页面与卡片
制作克制的编辑式页面：顶部有“StyleKit / Visual studies”小字标识和动效开关。主标题是“Identity, in lines.”，介绍文案是“Move through a familiar mark. Find the structure beneath the surface.”。在最大宽度 1,200 像素的内容区内，桌面端一行排列三张卡片，间距 19 像素；卡片宽高比为 0.70、圆角 17 像素、高度至少约 460 像素。屏幕宽度不超过 650 像素时改为单列。每张卡片左上有用线条绘制的小标志和品牌名，左下依次放置准确标语和“Reveal the source →”按钮：Apple 是“Think different.”；Google 是“Find your next possibility.”；Tesla 是“Accelerate the future.”。页脚分别写“A study of recognition and reconstruction.”与“One path. A field of light. Four line weights.”。主标题使用 Georgia/Times 衬线字体，字号 38–57px；卡片文字使用 Arial/Helvetica 无衬线字体，标语字号 27–37px。字体全部来自本地系统。Apple 背景 #eeeeeb、线色 #202220；Google 背景 #2152e7、线色 #c2dcff；Tesla 背景 #111212、线色 #ec353e。每个品牌的蓝色检测标记颜色见下方路径数据。点击来源按钮时打开无障碍弹窗，展示对应的精确路径，并提供关闭控件。保证卡片内容清晰、不被裁切，并适合触控。

2. 只采样一次路径
使用下方数据中三个精确的 24×24 Path2D 路径字符串，并使用对应 scale 居中绘制：将 300 像素临时画布乘以 scale 除以 24，平移到中心，再将路径原点平移 -12,-12。每个品牌单独创建一个尺寸为 300×300 的脱离 DOM 的临时 canvas，即 60 个网格单元乘以每格 5 个超采样像素。先填充不透明黑色，再用白色填充品牌 Path2D。只读取一次像素数据。对每个 60×60 网格单元，将来源图像中对应的 5×5 像素按 Rec. 709 公式计算，即 0.2126 R + 0.7152 G + 0.0722 B，再除以 255 并求平均，保存为含 3,600 个数值的 Float32Array。之后只保留该数组和品牌元数据。把临时 canvas 的宽高设为 0，并让 context 和像素缓存离开作用域。包括尺寸变化在内，都不得重新采样路径。

3. 量化竖线绘制
每张卡片绘制 60 根等距竖列，每列 30 段竖线。每一段取相邻两行网格亮度的平均值。使用 0.12、0.42、0.89 三个阈值量化成且仅量化成四档。线宽只使用 0.38、1.12、2.28、3.80，并乘以“网格单元尺寸除以 5.25”。每段接近两个网格单元高，段间留 0.7 像素窄缝，使用平头线帽；四档透明度依次是 0.15、0.64、0.93、1，让标志像一节节竹段。按粗细档分组，每帧每组只描边一次。卡片顶部的小标志也必须根据已存的亮度表绘制；不能加入 Logo 图片或 SVG 元素。

4. 缓慢、可复现的流动噪声
初始化时使用 xorshift 整数 PRNG，以 seed 7319 生成一张共享的 128×128 随机格点表；每轮依次执行 state ^= state << 13、state ^= state >>> 17、state ^= state << 5。把每个无符号整数除以 4,294,967,295，再乘以 2 并减去 1，得到 -1 到 1 的格点值。用平滑双线性 value noise 取样，先把每个局部小数 t 转换为 t*t*(3-2*t)；每个品牌的 seed 作为水平偏移。每段的 x 取“列 × 0.15 + 品牌 seed”，y 取“行 × 0.16 - 经过秒数 × 0.17”，使可见噪声缓慢向下流动。在线宽分档之前，调整后亮度为“亮度 × 0.94 + 噪声 × 0.12 × (0.25 + 亮度 × 0.75)”。鼠标静止时，线条粗细也应轻轻漂移。动画过程中不要调用 Math.random。

5. 指针作用与弹簧复位
用卡片内的 CSS 像素坐标记录指针位置。合并连续指针事件：先保存最新 client 坐标，在下一动画帧中只读一次卡片边界；状态文字只在状态切换时更新。指针进入、触摸或从上一次脉冲位置累计移动超过 1.5 像素时，把脉冲设为 1，让附近线段径向散开。作用半径为 Logo 绘制区域宽度的四分之一。影响系数为 max(0, 1 - 距离/半径)，先平方再乘以脉冲和 25，沿径向产生位移，竖直方向再乘 0.58。位移使用阻尼弹簧模型：刚度 145、阻尼 19，每次积分步长最多 1/30 秒。脉冲按 exp(-dt × 5.5) 衰减后，每段都回到原始网格坐标；即使鼠标停在原处，也不能让线条持续散开。鼠标和触控使用同一套弹簧反馈；键盘聚焦时显示检测框，无须模拟指针移动。

6. 确定性的检测框
检测框必须来自当前的数值线场，不能只在初始化时算出固定坐标，也不调用 AI 服务。覆盖层可见时，扫描间隔至少 100ms。复用一个 60×60 Float32Array，每次扫描先清空；对每段跨两行的可见线条，把当前叠加噪声后的亮度，根据弹簧位移后的位置，用双线性权重分别累积到对应两行网格。仍然只用初始化采样的源数据，不能再次读取画布像素。暂停时，聚焦或尺寸变化可以补做一次静态扫描，但不能连续安排帧。

对这张实时亮度场建立积分图，计算 7×7 窗口的平均亮度，选中后向外扩一格。最亮窗口均值低于 0.04 时不画框；保留得分至少为最亮候选 48% 的区域。空间非极大值抑制使用 16 格中心间距；不足两个区域时放宽为 12 格，最多保留三个。为避免相近分数导致乱跳，可在候选排序中加上 0.025 * exp(-到上一目标的距离平方 / 128) 的小幅连续性权重。将新窗口与 12 格以内的旧目标匹配，保留目标身份、速度和连线顺序。只把检测目标吸附到整数网格，显示框使用刚度 144、阻尼 24 的临界阻尼弹簧逐帧跟随，积分子步长不超过 1/120 秒。绘制时保留小数网格位置，绝不能再次取整抵消平滑动画；移动中的坐标可保留一位小数，停稳后精确落到目标格点。遇到无关的新目标，先把旧框淡出到透明度低于 0.04，再替换位置并淡入新框，透明度缓动使用 1 - exp(-dt * 16)。最多保留三个槽位，连线透明度跟随两个端点中较低者，避免连线突跳。暂停时直接更新为稳定静帧，不连续安排淡入淡出动画。

绘制蓝色框、淡色填充、明显角标、坐标与细连线，指针或键盘聚焦时出现，离开后淡出。信号稳定时框可以稳定，但噪声或鼠标形变必须能改变检测位置；不能靠随机游走制造动态，也不能声称执行了真实 AI 推理。

7. 高清画布、动效与无障碍
每张卡片使用独立可见 canvas。让画布 backing width 和 height 等于画布自身的实际 CSS 尺寸乘以当前 devicePixelRatio 并取整，再设置 2D transform，使绘图坐标仍使用 CSS 像素。每个 requestAnimationFrame 帧都清空并重画。用 ResizeObserver 响应卡片尺寸变化，但不重新采样标志。即使 CSS 宽高未变，单独改变 DPR 也必须更新像素缓冲：绘制前比较当前 DPR 与缓存值，或使用变化后重新绑定的 resolution matchMedia 监听；不能只依赖 ResizeObserver。暂停动效时，DPR 或尺寸变化也应更新画布并补画一个静帧。验收时保持 CSS 视口尺寸不变，将 DPR 从 1 切到 2，确认像素缓冲翻倍且采样次数仍为三次。让高像素密度屏上的线条保持清晰。提供可键盘操作的动效开关，并保持 aria-pressed 状态准确；遵守 prefers-reduced-motion，默认静止。卡片可通过键盘聚焦并有实用的无障碍名称；canvas 仅作装饰，应从辅助技术中隐藏。支持触控，移动端触控目标要足够大。

8. 生命周期与响应式行为
页面不可见、卡片滚出视口或来源弹窗打开时暂停动画；恢复时重置上一帧时间，避免长暂停造成过大的时间步长。用 IntersectionObserver 暂停屏外卡片。当动效暂停时画出稳定静帧并停止连续安排动画帧。窄屏改为单列，同时保留 Logo 绘图区和底部文案间距。如果浏览器不支持 Canvas 2D 或 Path2D，在页面内展示简短提示，不要抛出未捕获异常。

9. 返回前检查
按以下可观察条件检查成品：恰有三张卡片，并包含下方精确路径数据；每个品牌初始化时只读一次像素，后续帧和尺寸变化都不再读取；每张亮度表都是 60×60；每张卡片绘制 60 列、每列 30 段，并且只用四档线宽；空闲噪声使用固定 seed 且向下流动；指针和触控触发弹簧后复位，键盘聚焦可显示检测框；最多三个吸附网格的检测框由蓝色连线连接；DPR 为 2 时 backing store 尺寸翻倍；减少动态效果偏好下默认静止；手机卡片改为单列；没有外部请求、图片元素或控制台错误。除非确实检查或运行生成的文件，否则不要声称这些检查已通过。

精确标志数据（必须保留路径字符串）：
Apple — seed 3, scale 0.82, 背景 #eeeeeb，线色 #202220，检测色 #267dff
M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701

Google — seed 29, scale 0.79, 背景 #2152e7，线色 #c2dcff，检测色 #91dcff
M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z

Tesla — seed 51, scale 0.81, 背景 #111212，线色 #ec353e，检测色 #4eaeff
M12 5.362l2.475-3.026s4.245.09 8.471 2.054c-1.082 1.636-3.231 2.438-3.231 2.438-.146-1.439-1.154-1.79-4.354-1.79L12 24 8.619 5.034c-3.18 0-4.188.354-4.335 1.792 0 0-2.146-.795-3.229-2.43C5.28 2.431 9.525 2.34 9.525 2.34L12 5.362l-.004.002H12v-.002zm0-3.899c3.415-.03 7.326.528 11.328 2.28.535-.968.672-1.395.672-1.395C19.625.612 15.528.015 12 0 8.472.015 4.375.61 0 2.349c0 0 .195.525.672 1.396C4.674 1.989 8.585 1.435 12 1.46v.003z

绝对禁止：

- 禁止用 Logo 图片或 SVG 元素替代展示中的竖线标志
- 禁止每帧读取像素或在尺寸变化时重新采样路径
- 禁止用 blur、backdrop-blur 或 shadow-lg 掩盖线条结构
- 禁止将扫描框描述为真实 AI 识别结果
- 禁止给每段线条使用连续线宽，必须保留四档分节
- 禁止省略键盘聚焦、触控和暂停动效的行为

必须遵守：

- 以 bg-[#fafaf8] 纸面和 bg-[#eeeeeb]、bg-[#2152e7]、bg-[#111212] 卡片承载线场
- 主标题使用 font-serif，界面文字使用 font-sans，坐标使用 font-mono
- 卡片使用 rounded-[17px]、清晰留白和统一比例
- 初始化时每个路径只采样一次，保存 60×60 亮度表
- 用 60 列、30 段和四档线宽重建标志，保留分节感
- 从当前带噪声和形变的线场重新检测亮区，蓝框稳定跟随并更新网格坐标
- 指针脉冲驱动弹簧，静止后回到原位，遵守减少动态效果偏好
- 交付含完整路径的提示词，并提供离线 HTML 参考

---

# Quantized Line Field (量化线场) Design System

> 把图形的明暗转换成四档竖线，用轻柔流动、弹簧位移和网格检测框，让品牌标志成为可探索的交互视觉。

## 核心理念

把图形拆成光，再用四档竖线重新组合。细线铺满背景，粗线构成标志；噪声缓慢向下流动，指针让局部线段散开，再弹回原位。

把动感留给图形，文字和操作保持安静。浅灰、钴蓝、近黑三张卡片共享网格与比例，分别用黑、浅蓝、红色线条表达身份。衬线大标题和清晰的无衬线正文，配合等宽坐标注释，让编辑感与计算感共存。

检测框来自亮度窗口的排序，只是视觉交互。完整提示词包含实际路径、采样网格、线宽阈值和验收条件，使访客可以生成自己的单文件版本。

---

## Token 字典（精确 Class 映射）

### 边框
```
宽度: border
颜色: border-[#d9dbd5]
圆角: rounded-[17px]
```

### 阴影
```
小: shadow-none
中: shadow-none
大: shadow-none
悬停: shadow-none
聚焦: shadow-none
```

### 交互效果
```
悬停位移: （无）
悬停缩放: （无）
悬停透明度: hover:opacity-90
过渡动画: transition-colors duration-200
按下状态: active:opacity-80
```

### 字体
```
标题: font-serif font-normal tracking-tight
正文: font-sans
等宽: font-mono
```

### 字号
```
Hero: text-4xl md:text-6xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-4xl
H3: text-lg md:text-xl
正文: text-sm md:text-base
小字: text-xs
```

### 间距
```
Section: py-12 md:py-20
容器: px-6 md:px-10
卡片: p-7
小间距: gap-3
中间距: gap-[19px]
大间距: gap-8
```

### 颜色角色
```
背景主色: bg-[#fafaf8]
背景辅色: bg-[#eeeeeb]
背景强调色: bg-[#2152e7], bg-[#111212]
正文主色: text-[#202220]
正文辅色: text-[#686b64]
正文弱化色: text-[#73766e]
按钮主色: bg-[#202220] text-[#fafaf8]
按钮辅色: bg-transparent text-[#202220] border border-[#d9dbd5]
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：

### 禁止的 Class
- `blur`
- `backdrop-blur`
- `shadow-lg`
- `shadow-xl`
- `rounded-none`

### 禁止的模式
- 匹配 `^blur(?:-|$)`
- 匹配 `^backdrop-blur(?:-|$)`
- 匹配 `^shadow-(?:lg|xl|2xl)$`

### 禁止原因
- `blur`: Keep discrete strokes sharp.
- `backdrop-blur`: Use opaque card surfaces.
- `shadow-lg`: Separate cards through color and spacing.
- `rounded-none`: Use 17-pixel card corners.

> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
font-sans
focus-visible:outline-2
```

### 卡片必须包含
```
rounded-[17px]
overflow-hidden
```

### 输入框必须包含
```
border
focus-visible:outline-2
```

---

## [COMPARE] Quantized Line Field 错误 vs 正确对比

以下错误示例只代表“未经过当前风格适配的通用默认值”，不要把错误示例当成视觉建议。

### 按钮

[WRONG] **错误示例**（通用组件库默认样式，不要直接复制）：
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  点击我
</button>
```

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="font-sans focus-visible:outline-2 bg-[#202220] text-[#fafaf8]">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（未经当前风格适配的通用卡片）：
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="rounded-[17px] overflow-hidden p-7">
  <h3 class="font-serif font-normal tracking-tight text-lg md:text-xl">{TITLE}</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（未经当前风格适配的通用输入框）：
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="border focus-visible:outline-2" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Quantized Line Field 页面骨架模板

以下骨架只使用当前风格的 token。替换 `{PLACEHOLDER}` 时，不要移除或替换这些 token：

### 导航栏骨架
```html
<nav class="bg-[#fafaf8] text-[#202220] border border-[#d9dbd5] px-6 md:px-10">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-[19px]">
    <a href="/" class="font-serif font-normal tracking-tight text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-[19px] font-sans text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-[#2152e7] text-[#202220] py-12 md:py-20 px-6 md:px-10">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif font-normal tracking-tight text-4xl md:text-6xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="font-sans focus-visible:outline-2 bg-[#202220] text-[#fafaf8]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-[#fafaf8] text-[#202220] py-12 md:py-20 px-6 md:px-10">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif font-normal tracking-tight text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[19px]">
      <!-- Card template - repeat for each card -->
      <div class="rounded-[17px] overflow-hidden p-7">
        <h3 class="font-serif font-normal tracking-tight text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#73766e]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="border focus-visible:outline-2" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-[#eeeeeb] text-[#686b64] py-12 md:py-20 px-6 md:px-10">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-serif font-normal tracking-tight text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif font-normal tracking-tight text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Quantized Line Field 生成后自检清单

**输出代码前，逐项验证当前风格的 token 和规则。如有违反，先修正再交付：**

### Token 检查
- [ ] 按钮包含： `font-sans focus-visible:outline-2`
- [ ] 卡片包含： `rounded-[17px] overflow-hidden`
- [ ] 输入框包含： `border focus-visible:outline-2`

### 禁止项检查
- [ ] 没有使用 `blur`
- [ ] 没有使用 `backdrop-blur`
- [ ] 没有使用 `shadow-lg`
- [ ] 没有使用 `shadow-xl`
- [ ] 没有使用 `rounded-none`

### 风格规则检查
- [ ] 以 bg-[#fafaf8] 纸面和 bg-[#eeeeeb]、bg-[#2152e7]、bg-[#111212] 卡片承载线场
- [ ] 主标题使用 font-serif，界面文字使用 font-sans，坐标使用 font-mono
- [ ] 卡片使用 rounded-[17px]、清晰留白和统一比例
- [ ] 初始化时每个路径只采样一次，保存 60×60 亮度表
- [ ] 用 60 列、30 段和四档线宽重建标志，保留分节感

### 风格漂移检查
- [ ] 没有违反：禁止用 Logo 图片或 SVG 元素替代展示中的竖线标志
- [ ] 没有违反：禁止每帧读取像素或在尺寸变化时重新采样路径
- [ ] 没有违反：禁止用 blur、backdrop-blur 或 shadow-lg 掩盖线条结构
- [ ] 没有违反：禁止将扫描框描述为真实 AI 识别结果
- [ ] 没有违反：禁止给每段线条使用连续线宽，必须保留四档分节

### 通用交付检查
- [ ] 响应式布局在手机、平板和桌面下稳定，没有横向溢出
- [ ] 所有交互元素有清晰焦点、可访问名称和 reduced-motion 方案
- [ ] 文本对比度达到 WCAG AA，且没有用颜色单独传递状态
- [ ] 结果仍然能够一眼识别为 Quantized Line Field

---

## [EXAMPLES] 示例 Prompt

### 1. 完整复现三张品牌卡片

含完整路径和验收条件的独立 HTML。

```
请制作一个名为“Identity, in lines.”的精致响应式单文件 HTML 页面，直接用现代浏览器打开即可运行。只使用原生 HTML、CSS、JavaScript、Canvas 2D 和 Path2D。不要使用库、框架、模块、构建工具、图片、图片链接、外部 SVG 文件、外部字体或网络请求。CSS 和脚本全部内联。最终只返回完整 HTML 文件。

1. 页面与卡片
制作克制的编辑式页面：顶部有“StyleKit / Visual studies”小字标识和动效开关。主标题是“Identity, in lines.”，介绍文案是“Move through a familiar mark. Find the structure beneath the surface.”。在最大宽度 1,200 像素的内容区内，桌面端一行排列三张卡片，间距 19 像素；卡片宽高比为 0.70、圆角 17 像素、高度至少约 460 像素。屏幕宽度不超过 650 像素时改为单列。每张卡片左上有用线条绘制的小标志和品牌名，左下依次放置准确标语和“Reveal the source →”按钮：Apple 是“Think different.”；Google 是“Find your next possibility.”；Tesla 是“Accelerate the future.”。页脚分别写“A study of recognition and reconstruction.”与“One path. A field of light. Four line weights.”。主标题使用 Georgia/Times 衬线字体，字号 38–57px；卡片文字使用 Arial/Helvetica 无衬线字体，标语字号 27–37px。字体全部来自本地系统。Apple 背景 #eeeeeb、线色 #202220；Google 背景 #2152e7、线色 #c2dcff；Tesla 背景 #111212、线色 #ec353e。每个品牌的蓝色检测标记颜色见下方路径数据。点击来源按钮时打开无障碍弹窗，展示对应的精确路径，并提供关闭控件。保证卡片内容清晰、不被裁切，并适合触控。

2. 只采样一次路径
使用下方数据中三个精确的 24×24 Path2D 路径字符串，并使用对应 scale 居中绘制：将 300 像素临时画布乘以 scale 除以 24，平移到中心，再将路径原点平移 -12,-12。每个品牌单独创建一个尺寸为 300×300 的脱离 DOM 的临时 canvas，即 60 个网格单元乘以每格 5 个超采样像素。先填充不透明黑色，再用白色填充品牌 Path2D。只读取一次像素数据。对每个 60×60 网格单元，将来源图像中对应的 5×5 像素按 Rec. 709 公式计算，即 0.2126 R + 0.7152 G + 0.0722 B，再除以 255 并求平均，保存为含 3,600 个数值的 Float32Array。之后只保留该数组和品牌元数据。把临时 canvas 的宽高设为 0，并让 context 和像素缓存离开作用域。包括尺寸变化在内，都不得重新采样路径。

3. 量化竖线绘制
每张卡片绘制 60 根等距竖列，每列 30 段竖线。每一段取相邻两行网格亮度的平均值。使用 0.12、0.42、0.89 三个阈值量化成且仅量化成四档。线宽只使用 0.38、1.12、2.28、3.80，并乘以“网格单元尺寸除以 5.25”。每段接近两个网格单元高，段间留 0.7 像素窄缝，使用平头线帽；四档透明度依次是 0.15、0.64、0.93、1，让标志像一节节竹段。按粗细档分组，每帧每组只描边一次。卡片顶部的小标志也必须根据已存的亮度表绘制；不能加入 Logo 图片或 SVG 元素。

4. 缓慢、可复现的流动噪声
初始化时使用 xorshift 整数 PRNG，以 seed 7319 生成一张共享的 128×128 随机格点表；每轮依次执行 state ^= state << 13、state ^= state >>> 17、state ^= state << 5。把每个无符号整数除以 4,294,967,295，再乘以 2 并减去 1，得到 -1 到 1 的格点值。用平滑双线性 value noise 取样，先把每个局部小数 t 转换为 t*t*(3-2*t)；每个品牌的 seed 作为水平偏移。每段的 x 取“列 × 0.15 + 品牌 seed”，y 取“行 × 0.16 - 经过秒数 × 0.17”，使可见噪声缓慢向下流动。在线宽分档之前，调整后亮度为“亮度 × 0.94 + 噪声 × 0.12 × (0.25 + 亮度 × 0.75)”。鼠标静止时，线条粗细也应轻轻漂移。动画过程中不要调用 Math.random。

5. 指针作用与弹簧复位
用卡片内的 CSS 像素坐标记录指针位置。合并连续指针事件：先保存最新 client 坐标，在下一动画帧中只读一次卡片边界；状态文字只在状态切换时更新。指针进入、触摸或从上一次脉冲位置累计移动超过 1.5 像素时，把脉冲设为 1，让附近线段径向散开。作用半径为 Logo 绘制区域宽度的四分之一。影响系数为 max(0, 1 - 距离/半径)，先平方再乘以脉冲和 25，沿径向产生位移，竖直方向再乘 0.58。位移使用阻尼弹簧模型：刚度 145、阻尼 19，每次积分步长最多 1/30 秒。脉冲按 exp(-dt × 5.5) 衰减后，每段都回到原始网格坐标；即使鼠标停在原处，也不能让线条持续散开。鼠标和触控使用同一套弹簧反馈；键盘聚焦时显示检测框，无须模拟指针移动。

6. 确定性的检测框
检测框必须来自当前的数值线场，不能只在初始化时算出固定坐标，也不调用 AI 服务。覆盖层可见时，扫描间隔至少 100ms。复用一个 60×60 Float32Array，每次扫描先清空；对每段跨两行的可见线条，把当前叠加噪声后的亮度，根据弹簧位移后的位置，用双线性权重分别累积到对应两行网格。仍然只用初始化采样的源数据，不能再次读取画布像素。暂停时，聚焦或尺寸变化可以补做一次静态扫描，但不能连续安排帧。

对这张实时亮度场建立积分图，计算 7×7 窗口的平均亮度，选中后向外扩一格。最亮窗口均值低于 0.04 时不画框；保留得分至少为最亮候选 48% 的区域。空间非极大值抑制使用 16 格中心间距；不足两个区域时放宽为 12 格，最多保留三个。为避免相近分数导致乱跳，可在候选排序中加上 0.025 * exp(-到上一目标的距离平方 / 128) 的小幅连续性权重。将新窗口与 12 格以内的旧目标匹配，保留目标身份、速度和连线顺序。只把检测目标吸附到整数网格，显示框使用刚度 144、阻尼 24 的临界阻尼弹簧逐帧跟随，积分子步长不超过 1/120 秒。绘制时保留小数网格位置，绝不能再次取整抵消平滑动画；移动中的坐标可保留一位小数，停稳后精确落到目标格点。遇到无关的新目标，先把旧框淡出到透明度低于 0.04，再替换位置并淡入新框，透明度缓动使用 1 - exp(-dt * 16)。最多保留三个槽位，连线透明度跟随两个端点中较低者，避免连线突跳。暂停时直接更新为稳定静帧，不连续安排淡入淡出动画。

绘制蓝色框、淡色填充、明显角标、坐标与细连线，指针或键盘聚焦时出现，离开后淡出。信号稳定时框可以稳定，但噪声或鼠标形变必须能改变检测位置；不能靠随机游走制造动态，也不能声称执行了真实 AI 推理。

7. 高清画布、动效与无障碍
每张卡片使用独立可见 canvas。让画布 backing width 和 height 等于画布自身的实际 CSS 尺寸乘以当前 devicePixelRatio 并取整，再设置 2D transform，使绘图坐标仍使用 CSS 像素。每个 requestAnimationFrame 帧都清空并重画。用 ResizeObserver 响应卡片尺寸变化，但不重新采样标志。即使 CSS 宽高未变，单独改变 DPR 也必须更新像素缓冲：绘制前比较当前 DPR 与缓存值，或使用变化后重新绑定的 resolution matchMedia 监听；不能只依赖 ResizeObserver。暂停动效时，DPR 或尺寸变化也应更新画布并补画一个静帧。验收时保持 CSS 视口尺寸不变，将 DPR 从 1 切到 2，确认像素缓冲翻倍且采样次数仍为三次。让高像素密度屏上的线条保持清晰。提供可键盘操作的动效开关，并保持 aria-pressed 状态准确；遵守 prefers-reduced-motion，默认静止。卡片可通过键盘聚焦并有实用的无障碍名称；canvas 仅作装饰，应从辅助技术中隐藏。支持触控，移动端触控目标要足够大。

8. 生命周期与响应式行为
页面不可见、卡片滚出视口或来源弹窗打开时暂停动画；恢复时重置上一帧时间，避免长暂停造成过大的时间步长。用 IntersectionObserver 暂停屏外卡片。当动效暂停时画出稳定静帧并停止连续安排动画帧。窄屏改为单列，同时保留 Logo 绘图区和底部文案间距。如果浏览器不支持 Canvas 2D 或 Path2D，在页面内展示简短提示，不要抛出未捕获异常。

9. 返回前检查
按以下可观察条件检查成品：恰有三张卡片，并包含下方精确路径数据；每个品牌初始化时只读一次像素，后续帧和尺寸变化都不再读取；每张亮度表都是 60×60；每张卡片绘制 60 列、每列 30 段，并且只用四档线宽；空闲噪声使用固定 seed 且向下流动；指针和触控触发弹簧后复位，键盘聚焦可显示检测框；最多三个吸附网格的检测框由蓝色连线连接；DPR 为 2 时 backing store 尺寸翻倍；减少动态效果偏好下默认静止；手机卡片改为单列；没有外部请求、图片元素或控制台错误。除非确实检查或运行生成的文件，否则不要声称这些检查已通过。

精确标志数据（必须保留路径字符串）：
Apple — seed 3, scale 0.82, 背景 #eeeeeb，线色 #202220，检测色 #267dff
M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701

Google — seed 29, scale 0.79, 背景 #2152e7，线色 #c2dcff，检测色 #91dcff
M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z

Tesla — seed 51, scale 0.81, 背景 #111212，线色 #ec353e，检测色 #4eaeff
M12 5.362l2.475-3.026s4.245.09 8.471 2.054c-1.082 1.636-3.231 2.438-3.231 2.438-.146-1.439-1.154-1.79-4.354-1.79L12 24 8.619 5.034c-3.18 0-4.188.354-4.335 1.792 0 0-2.146-.795-3.229-2.43C5.28 2.431 9.525 2.34 9.525 2.34L12 5.362l-.004.002H12v-.002zm0-3.899c3.415-.03 7.326.528 11.328 2.28.535-.968.672-1.395.672-1.395C19.625.612 15.528.015 12 0 8.472.015 4.375.61 0 2.349c0 0 .195.525.672 1.396C4.674 1.989 8.585 1.435 12 1.46v.003z
```

### 2. 替换为自己的品牌

替换路径、配色和文案，保留线场规则。

```
使用量化线场风格制作品牌卡片。保留 60×60 单次采样、四档线宽、流动噪声、弹簧复位和检测框。把品牌路径、名称、标语和配色替换为我提供的数据；缺少路径时先明确缺失，不要猜测标志。交付单文件 HTML。
```

## 绝对禁止（匹配即拒绝）

以下模式一旦出现，视为风格违规——不找借口，直接重写。

- 用 Logo 图片或 SVG 元素替代展示中的竖线标志
- 每帧读取像素或在尺寸变化时重新采样路径
- 用 blur、backdrop-blur 或 shadow-lg 掩盖线条结构
- 将扫描框描述为真实 AI 识别结果
- 给每段线条使用连续线宽，必须保留四档分节
- 省略键盘聚焦、触控和暂停动效的行为

## 自检清单（交付前逐条确认）

如果任何一条不通过，说明风格漂移了——修改后再交付。

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 Inter / Roboto / Geist 等过度使用的字体
- [ ] 没有嵌套卡片（卡片里面套卡片）
- [ ] 没有在彩色背景上放灰色文字
- [ ] 正文对比度满足 WCAG AA（≥4.5:1）
- [ ] 没有 bounce / elastic 缓动曲线
- [ ] 动效有 prefers-reduced-motion 备选方案
- [ ] 正文行宽不超过 65-75 个字符
- [ ] 没有单侧粗边框装饰（border-left/right accent stripe）
- [ ] 没有渐变文字（background-clip: text）
- [ ] 没有把玻璃态（glassmorphism）当作默认风格
- [ ] 没有 tiny uppercase tracked eyebrow 放在每个 section 标题上面
- [ ] 禁止用 Logo 图片或 SVG 元素替代展示中的竖线标志
- [ ] 禁止每帧读取像素或在尺寸变化时重新采样路径
- [ ] 禁止用 blur、backdrop-blur 或 shadow-lg 掩盖线条结构
- [ ] 禁止将扫描框描述为真实 AI 识别结果
- [ ] 禁止给每段线条使用连续线宽，必须保留四档分节