视觉来源

OVERTURE 光圈舞台、THE WAY I SEE 接触印样、RESONANCE 褶皱雕塑三张参考图位于素材中的 references 组。新增组件继承它们的材质与尺度，不引入另一套通用圆角卡片。

字体

Bodoni Moda Regular 是品牌大字；使用很强的粗细对比与紧凑字距。Manrope 为英文操作文字，中文正文使用 Microsoft YaHei 等本机无衬线字体；中文大标题回退宋体。字体在包中自托管。大标题能越过 96px，但必须检查完整文本与窄屏，不把文字裁断成无法阅读的装饰。

颜色

Stage：近黑与象牙白，以深红衣料承载图像，朱红作为交互信号。Paper：暖白印纸与近黑文字，深朱红用于可读的强调。Nocturne：午夜蓝底与冷白文字，朱红不变。

冷光 ov-cold 是第二光温：聚焦、悬停取景角、光束边缘、信息提示。朱红 ov-accent 表示动作与选中。悬停时冷，选中后红。深蓝 ov-indigo 与深红 ov-oxblood 同为材质色，不作正文。正文使用 ov-text，说明使用 ov-muted；ov-subtle 仅用于装饰和禁用。不要把深红材质色当作暗底正文。

几何与层级

相纸、输入、面板使用直角。圆形用于进入、播放、聚焦等单一动作；开关轨道可使用圆端。细线优先 1px，取景角长度 20px。只有被抽出的相纸和浮层使用柔和偏移阴影。

状态

状态必须同时有语义与视觉：aria-pressed、aria-selected、aria-checked、aria-expanded、aria-invalid、disabled 与对应样式。红色不是唯一通知渠道，提供文字、取景角或形状变化。正文、冷光与聚焦色按三套主题检查（测试要求不低于 4.5:1），操作目标至少约 44px。

三个动作语法各有一个运动原语，全部由 Overture.motion 提供：开幕是光圈，显影是显影，共振是弹簧。组件不自带缓动或回弹。

开幕

从遮挡到呈现，用在进入、展开、确认和转场。遮罩始终对应内容变化；动作完成后停下。

• iris(el, {open, origin, shape})：以 origin（触发控件或一个坐标）为圆心的圆形光圈，另有 shutter（快门）与 unfold（展开）两种形状。退出约为进入的 0.6 倍时长，用 --ov-exit 加速离场；中途打断从当前裁切继续。
• Dialog、Drawer、CommandPalette、Popover、Toast 与灯箱都有进入和退出。按钮、取消、Escape、遮罩、保存，任何关闭路径都先退回触发控件再关闭，焦点随后返回。原生 dialog 继续负责模态与焦点。
• 按钮、图标按钮与单选压印的填充从指针进入的位置张开；键盘操作从中心张开。CueButton 的快门在确认时合上再打开。
• CurtainTransition 用两幅幕布（深红与深蓝交替）从两侧合拢、换幕后分开。主题切换可以从按钮以光圈扩散：Overture.setTheme(theme, root, {origin})。

显影

黑白代表等待观看，彩色代表聚焦或锁定。

• develop(el)：从过曝黑白显影到正常，用在新出现的内容（关键词、提示、选中的图片）。
• flip(scope, selector, mutate)：重排时保留身份，从旧位置移到新位置（表格排序、关键词增删）。
• count(el, text, dir)：数字按增减方向翻片（Stepper、Pagination、照片墙计数）。
• DevelopImage 的光斑带惯性跟随指针，进入时张开、离开时收拢；选中时显影液从按下的点漫开到整幅，键盘聚焦从中心漫开。灯箱照片从缩略图飞入并显影，关闭时飞回原位。ContactSheet 的底片带 1:1 跟手，甩出后按速度停在最近一帧。

共振

用张力、幅度和衰减表达连续变化。spring({preset}) 是阻尼谐振子的解析解：中途改目标时保留位置与速度，freeze() 冻结位移与速度，解冻后同一次运动继续。

SilkResonance 是参数化曲面，不是物理布料求解器；张力走 resonance 弹簧，松手时带着速度越过新张力来回几次，凝住停在回荡中途。胶片两端有橡皮筋阻力并回弹；相纸落桌时位置走 settle、角度走 snap。只有真实材料（丝绸、挂着的相纸）才明显欠阻尼，控件只允许约 3 % 的过冲。

时间与声音

--ov-fast 160 ms 用于确认，--ov-time 420 ms 用于显影，--ov-slow 900 ms 用于大型开幕，统一采用快速响应、缓慢稳定的 --ov-ease。CSS 里的 --ov-spring 与 --ov-settle 是由 snap、settle 两个弹簧生成的 linear() 缓动，与脚本里的运动是同一组常数；不支持 linear() 的浏览器退回普通缓动。

Overture.sound 提供八种 Web Audio 合成声音（齿轮、快门、拨杆、相纸、落桌、丝绸、光圈、移光），默认关闭，Overture.setSound(true) 后才会发声，并按元素的水平位置左右声像。声音不替代视觉与文字反馈，不自动播放。CuePlayer 的三个正弦振荡器是 12 秒原创合成音色示意，不是假称录制的歌剧片段。

减少动态与触控

组件默认遵循系统减少动态。Overture.setMotion(mode) 的 mode 可为 'full'、'reduce' 或 'system'，查询参数 ?motion=full 也可以显式选择。减少动态时弹簧直接落位，光圈与显影跳过，GPU 持续动画和示波等循环停止；照片墙运镜、追光移动这类空间切换改用 dissolve(el, swap) 淡出淡入，在最暗时完成切换，不做位移或缩放。Windows 关闭“显示动画”时浏览器同样报告减少动态；只为展示动效的页面（如单文件演示页）可以默认 setMotion('full')，并提供切换。触屏保留原生纵向滚动，用显式控件代替只有 hover 才可发现的功能。不可只依赖鼠标指针位置完成任务。

复制 dist 中 overture.css、overture.js 和整个 assets/ 目录到你的项目。多文件接入时图形模块需要 HTTP 本地服务；不要依赖 file:// 的跨文件模块加载。只需要一个离线文件时，用 dist/overture-showcase.html 的做法：素材以对象 URL 提供给 configure({assets})，图形引擎经 configure({loadEngine}) 加载。

<link rel="stylesheet" href="overture.css">
<script src="overture.js"></script>
<div id="host"></div>
<script>
Overture.configure({ assetBase: 'assets/' });
const instance = Overture.mount('Range', '#host', {
  label: '开度', value: 70,
  onChange: ({ value }) => console.log(value)
});
</script>

公开协议

• mount(name, host, options) 返回 {element, state, getState(), setValue(value), destroy()}。host 可为元素或 CSS 选择器。挂载只追加当前组件，不替你删除其他内容。
• onChange(detail) 接收状态变化；对应 DOM 事件为冒泡的 ov:change，detail 另含 component 名称。会初始化数值的组件可能在 mount 内触发一次 onChange。
• setValue 只对组件文档中明确声明的可控组件生效。其他组件由原生控件或传入回调控制。
• destroy() 可重复调用；释放事件、定时器、观察器、图形资源、对象 URL、声音和录制流。
• setTheme('stage'|'paper'|'nocturne', element, {origin}) 给一个作用域设定主题；默认作用于根元素。作用于根元素并给出 origin（控件或坐标）时，新主题以光圈从那里扩散（View Transitions；不支持或减少动态时直接切换）。nextTheme(element, {origin}) 按暗场 → 印纸 → 夜场循环。单个组件也可传 theme。
• configure({assetBase, motion, backend, assets, loadEngine}) 的 assetBase 以斜杠结尾；backend 支持 auto、webgl、static；assets 把素材名映射到自带 URL（单文件用）；loadEngine 替换图形引擎的加载方式。请在挂载前配置。

运动与声音

• Overture.motion.spring({preset, value, onUpdate, onRest}) 返回 {to(target, {velocity, preset}), set(value), impulse(dv), freeze(on), finish(), stop(), value, target, velocity, moving, frozen}。to() 返回 Promise：这一段静止时为 true，被新目标取代时为 false。value 可以是数字或数组。预设：snap、settle、stage、resonance、swing。
• Overture.motion.iris(el, {open, origin, shape:'circle'|'shutter'|'unfold', duration}) 返回 Promise；关闭后裁切保留到调用 release(el)。develop(el)、flip(scope, selector, mutate)、count(el, text, dir)、imprint(el) 用于显影、重排、翻片与压印；dissolve(el, swap, {duration, color}) 是减少动态时的空间切换：淡出、在最暗时执行 swap、再淡入。easing('snap'|'settle')、time(name) 给出与弹簧一致的 CSS 缓动和时长。
• Overture.setSound(true|false) 开关交互声音；Overture.sound.play(name, {at, gain, force}) 播放一种声音（force 用于用户明确要求的试听）。声音默认关闭。

样式使用

组件类名为 ov-*，变量为 --ov-*，字体家族为 --font-display、--font-sans。主题通过 data-theme 继承，常规文字保留原生 DOM。两种主题属于同一体系，可以在不同内容区域明确切换。

扩展

调用 Overture.define(name, factory) 注册组件。factory 收到 options 与 context：listen 为自动清理的事件，timeout 为可清理计时，cleanup(fn) 注册销毁，emit(detail) 发布状态，child 挂载随父级销毁的组件。工厂返回一个 HTMLElement。

用户提供的文本必须经 Overture.escape 或 textContent 写入。异步回调检查 context.alive；不要把组件的临时状态写进工作区全局设置。

three.js 0.186.1 的 WebGPURenderer 会优先尝试 WebGPU，再使用 WebGL2。库的两个运行时文件随包保存，无 CDN 请求。依据：three.js 官方说明。

实际技术范围

生命周期与性能

像素比默认上限 1.5，舞台持续运动限制为约 40 fps。不可见或页面隐藏时暂停绘制；减少动态时保留静止造型，并在用户操作时重绘。组件销毁时释放 renderer、geometry、material、texture、RAF、观察器与监听器。

大型 GPU 场景尽量每屏一个。不要把每个表单控件都变成 canvas。组件目录包含光圈、显影、织物、追光和照片墙等 GPU 场景及工坊；常规组件全部保留原生 HTML，适于更广的浏览器和辅助技术。

调试入口

?backend=webgl 强制 WebGL2，?backend=static 检查静态替代，?motion=reduce 检查减少动态。宿主元素的 data-renderer 报告实际后端。初始化失败保留图像或参考静帧，不把空画布当成成功。

WebGPU 需要浏览器支持与安全上下文；本地使用 127.0.0.1，或直接以 file:// 打开单文件演示页（file:// 同样是安全上下文）。单文件把 three.js 与引擎以 gzip 内嵌，运行时解压成对象 URL 再按依赖顺序导入；浏览器没有 DecompressionStream 时进入静态模式。追光遮罩新增 iris 参数与 setBeam(x, y, v, k)：光束在灯位之间移动时，位置、开度与收窄一次更新、绘制一次。GPU 性能和品牌质感是两种不同验收：没有报错不代表已经达到图像参考的视觉水平。

画面构成

品牌字标不另添复杂图标，用文字的尺度建立识别。三种版式是：黑色全幅光圈剧场、印纸与斜向底片、黑场中漂浮的象牙白褶皱。大字尽量维持一行；内容较长时缩小或主动换行，不裁断句子。

可制作的输出

BrandComposer 提供 1920 × 1080 网页横幅、1080 × 1350 海报、1080 × 1920 竖屏、1080 × 1080 方形。可以修改标题、副标题、视觉场景与动势。PNG 是静态输出；支持 captureStream / MediaRecorder 的浏览器可以录制 6 秒无声 WebM。

录制期间保持页面可见，参数暂时锁定。WebM 是浏览器视频输出，不声称兼容所有剪辑软件。这里不生成 MP4，不自动上传或发布任何素材。

字体与替换素材

字体为随包保存的 OFL 字体，许可随文件提供。示例照片为 AI 生成的艺术素材，不是实际品牌拍摄案例。后续正式企划应替换为自己的内容和落款。工作名 Overture 不代表已经完成商标检索。

参考图与动态

宣传画面必须维持参考图中的材质密度和文字尺度。光圈是开场，显影是选择，共振是持续的感官反馈。不是每张海报都需要三个效果同时出现；先明确这张作品的主动作。

本体系将基础令牌、组件、状态、使用情景和组合案例分开维护。参考 GOV.UK Design System 组件 对用途与使用说明的组织；参考 Material 的交互状态 检查默认、聚焦、选中、禁用等状态覆盖。没有复制它们的颜色、组件外观或版式。

工作区内参考了 Safelight 的小型交互原语、Lattice 的组件与令牌文件布局、Ash & Dice 的本地构建和 GPU 接入。它们都保持不变；Overture 是独立体系。

project/tokens.json 是基础变量来源；src/catalog-data.mjs 是组件登记与用法来源；src/ 是实现。构建同步运行时、组件卡、逐组件说明、站点与 ds-viewer 目录。避免维护多套相互漂移的示例代码。

两个追光组件把摄影中的两件事分开：移动光与移动观看的位置。页面示例见 /light-studies.html；所有素材与运行依赖均保存在本机。

移动灯位

FlashlightFocus 保持整面六张照片固定且同时可见。每三格滚轮切换一张：前两格显示 1 / 3、2 / 3 并保持灯位，准星像对焦环一样每格转 30°；第三格光束沿 settle 弹簧移到下一张照片中心（约 570 ms），途中收窄到约 70 %、到达后张开。六个中心是光束唯一的停留位置；连续滚动时从当前位置和速度接着移动。减少动态时不移动，改为淡出淡入。灯位仅有六个固定位置，不经过中间位置；尺寸变化后仍对准对应照片。反向输入重新累计三格，首尾向外滚动释放页面。开度由独立滑块调整。方向键、Home/End、前后按钮及一次触屏滑动直接切换一张。

const light = Overture.mount('FlashlightFocus', '#host', { value: 25 });
light.setValue(65); // 改变光束开度，0–100
// mode:'page' 使用一屏高的照片墙；默认 contained 使用固定高度面板。

固定灯位，穿行照片

PinnedPhotoWall 中的光束始终位于视口中央。DOM 照片、图钉和 SVG 红线形成一个宽阔的空间；普通鼠标每两格滚轮移动一张照片。第一格显示 1 / 2，第二格由 stage 弹簧运镜到下一张（位置进入 0.5 % 约 790 ms）；连续输入保留镜头速度，不在中途停顿；镜头移动时略后退，到达时推近。减少动态时不运镜，改为淡出淡入到下一张。触控板的小输入累计为两格，改变方向时清除旧方向半步；每个大滚轮事件最多计一格，避免一次甩动跳过整个照片墙。

// 独立卡片/面板：在组件内以两格滚轮切换。
const panel = Overture.mount('PinnedPhotoWall', '#panel');
// 沉浸页面：一屏高的停靠照片墙，首尾向外滚动可离开。
const story = Overture.mount('PinnedPhotoWall', '#story', { mode: 'page' });
story.setValue(2); // 运镜至第三张照片

两面墙上的相纸都挂在图钉上：指针拂过时按横向速度和触点离图钉的距离得到一次角速度，swing 弹簧让它绕图钉摆动后停下（触屏不触发）。

两种模式都提供上一张、下一张和照片索引。方向键、Page Up/Down、触屏纵向滑动直接切换一张，Home/End 到首尾。到边界后继续向外滚动或滑动会释放页面，不形成滚动死角。减少动态时直接落位；连续输入从当前镜头位置接替动画。

自动走片

ContactSheet 默认每 4800 ms 进入下一帧。两层完整相纸包含照片、边框、题名及套准标记，一起位移和旋转：旧纸 700 ms 退出，新纸 1050 ms 落位。底片齿孔随胶片条一起移动，载片框同步用 1000 ms 回位。新的输入取消并接替上次动画，只保留两层纸。默认值可通过 autoplay:false、interval、index 配置。悬停底片或主相纸、键盘聚焦照片、离屏、页面隐藏和减少动态均停止自动走片；提供暂停/继续按钮。自动换片不移动键盘焦点或触发 live-region 播报。

操作与结果相连

暗房操作台复用 StageTabs、Range、Stepper、TextField、Switch、Check、CueButton。取景框在分类间移动，曝光刻度驱动画面亮度，数字翻片更换底片，机械拨杆控制取景线，确认标记决定手记是否保留。快门按钮实际导出 1200 × 1200 PNG，并把缩略印相放入纸托。所有数据只在本页保留，重新加载会重置。

图形预算与降级

追光使用 TSL 全屏透明遮罩；优先 WebGPU，回退 WebGL 2。光照按输入或尺寸变化重绘，光束移动期间每帧用 setBeam(x, y, 开度, 收窄) 一次更新并绘制一次，没有常驻动画循环，DPR 上限 1.25。无法初始化 GPU 时使用 CSS 径向遮罩，灯位、开度、滚动及键盘仍可用。光照是覆盖在可访问 DOM 照片上的视觉处理，并非物理光线追踪或真实体积散射。材质颜色属于暖黑、褐纸、象牙相纸和朱红线的同一光照空间，不改变表单和文字的语义颜色令牌。