Story Horizon为 Archify 故事系统引入唯一可读的下一步——状态机扩展与可验证的视觉时间轴【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyStory Horizon 是 Archify 故事系统的一次克制而精确的视觉演进不新增任何控件、面板或动画只把现有 beat 状态机从past / active / pending三分法扩展为past / active / next / pending四分法让读者在镜头移动之前就能看到紧邻的下一站。本文以 docs/research-visual-evolution-round-39.md 这份实现就绪的研究建议为骨架结合 viewer 实现 与 Story Horizon 测试 的源码级证据完整还原其设计动机、同行对比、12 条最小实现契约、12 个失败模式与 13 条验收标准。读完本文你将掌握如何在保持单一稳定、可检查、确定性产物的产品边界内为一个已能良好叙事的故事系统补齐当下与未来的最后一级视觉层级并知道如何用浏览器读回与测试用例验证该特性不会污染导出产物。一、核心概念past → active → next → pendingArchify 的故事系统已经能出色地解释当下Story Follow Camera 框定前一个、当前与下一个创作停靠点Story Director Strip 标注当前路线、关系、职责与上下文Story Trail 保存已经走过的路径精确时刻链接可以恢复任意一个稳定 beatPresentation Stage 则移除了大部分播放装饰。然而图表中仍有一个视觉缺口当前 beat 状态无法把紧邻的未来与其余未来区分开。Round 39 之前的实际状态是past - active - pending - pending - ...Round 39 的目标是让它变成past - active - next - pending - ...其中next只能从当前创作故事的下一个稳定 ID推导而来它应当让下一个节点与任何精确创作的连接线connector变得可发现同时不提前移动镜头、不合成边、不改变图表、不新增面板。最终效果是一条更清晰的可视时间轴读者在镜头移动前就能同时看到我在哪里、身后留下什么、故事接下来将去向何方。来自当前工作树的证据共享 viewer 已经把所有故事节点记录为data-story-step、把每个精确故事连接线记录为data-story-beat-step。但setStoryBeat()此前用同一个三元表达式把它们统一归类为past、active或pending见 viewer 实现。对应的 CSS 层级是pending 节点不透明度0.22pending 边0.16past 节点0.72past 边0.58active 节点与边完全可见。这套层级解释了历史与当下但所有未来停靠点看起来同样遥远。这个缺陷在 Story Follow 场景下尤其明显——Story Follow 已经为previous current next预留了取景空间可下一个停靠点的呈现状态仍与其它 pending 节点无异参见 Story Follow 契约测试。数据的真实规模当前 11 个 Proof Lab 产物包含 33 个创作章节、150 个已解析的故事停靠点与 117 个非最终转换。重读这些已编译 HTML 可以得到80 个单向 forward 转换1 个单向 reverse 转换4 个多边multiple转换32 个没有直接创作边的分组grouped转换。这意味着 Story Horizon 在 117 个 beat 上都有真实状态可展示同时也提供了必须不得虚构连接线的具体反例而 33 个最终 beat 必须不显示任何 horizon。二、为什么这是下一个最高杠杆的切片产品后果用预期而非装饰提升观感Story Horizon 通过 anticipation预期而非 decoration装饰提升感知精致度读者在场景切换前能看到一个有边界的终点镜头移动因此显得有意图并鼓励继续下一步它对暂停、手动选择、分享、移动端、Still 与 reduced-motion 状态同样有效因为未来提示不依赖动画也能传达信息另一个工具栏、minimap、inspector、样式预设、播放模式或氛围动效层都会与 Archify 已有的表面竞争而 Story Horizon 是通过补全 Story Follow 与 Story Director 的时间层级来提升它们的价值。原文决策依据Round 39 选择 Story Horizon 为最高杠杆切片的判断来自剩余视觉缺口不是又一个缺失的控件而是图表没有区分紧邻的未来与其余未来同时有 117 个真实 beat 需要该状态、33 个最终 beat 需要显式排除它。三、主源对比Borrow / Adapt / SkipFireworks Tech Graph先排语义变化保持场景稳定Fireworks 按语义顺序绘制已有路线保持节点、标签、容器、标记几何与镜头固定并让完成的拓扑停留足够久以供检查其动效契约还显式排除评审场景中的大量装饰效果。借用同一时刻只有一个语义路线占据注意力、不可变的图表几何仍是视觉世界、每个移动序列都有稳定终态。改造Archify 应在直播 viewer 内部用一个静态的紧邻下一步状态来制造预期而不是再渲染一条 GIF 时间线现有 Story Follow 事务仍是唯一镜头所有者。跳过粒子动画、额外样式目录、光晕、波纹、背景动效、帧渲染器与无限循环。Structurizr创作化揭示 显式读者控制Structurizr 动画按步骤揭示创作的元素或关系并保留上一步/下一步与键盘控制演示模式移除工具栏装饰以突出图表。借用创作顺序、离散步骤、可读的当前场景。改造与严格揭示不同Archify 应保留稳定拓扑并只展示一个未来停靠点作为方向参照——next是同一创作 SVG 之上的 viewer 视角而非新视图或模型事实。跳过完全隐藏所有未来元素、新增视角选择器、创建独立演示产物。LikeC4动态步骤与架构模型分离LikeC4 动态视图定义有序、反向、连续与并行步骤步骤可携带注释与导航但保持在视图内、不污染底层模型渲染器把 walkthrough 暴露为 viewer 能力。借用保留创作方向与多重性保持 walkthrough 状态与架构真相分离。改造复用 Archify 已有的forward、reverse、multiple、grouped故事步骤分类——分组转换可以预览真实的下一个节点但不得显示连接线多边转换只能预览该步骤已解析的精确创作边集合。跳过另一套 DSL、动态视图运行时、Mantine/XYFlow、为meta.views[].focus中已存在的事实新增 schema。D2递进应继承上下文并保持有界D2 的steps继承前一块板层与场景使用不同继承规则其导出指南警告过多动画板会让读者困惑或被迫等待循环。借用引入一个有界增量时保留已建立的上下文。改造past是继承上下文active是当前增量next是唯一可预见的增量更远的停靠点保持 pending全部位于同一稳定画布上。跳过板替换、多文件场景、自动播放动画 SVG/GIF、向 Archify 源 schema 引入组合语义。React Flow框住当前语义目标而非整张图React Flow 官方幻灯片教程用节点子集fitView聚焦初始与当前幻灯片支持点击、显式控件与键盘导航FitViewOptions接受精确节点子集、padding、缩放边界、时长、缓动与插值。借用当前步取景使用显式语义 ID导航状态显式且可由用户操作。改造保留 Story Follow 现有的previous current next子集Story Horizon 在该取景内提供空间预期绝不在 beat 变化前把视口移向下一节点。跳过幻灯片网格布局、可拖拽画布数据、React 状态与 React Flow 依赖。Cytoscape.js 与 D3最新意图胜出不要创建动画队列Cytoscape.js 可以按选中元素集合适配视口并显式动画化该适配且可停止/清除排队的视口动画D3 规定同名 transition 会中断进行中的 transition 并取消更早的 pending transition。借用快速手动导航时必须只保留最新的 current/next 状态与镜头收据。改造Story Horizon 本身是静态的setStoryBeat()原子地写入整个时间状态现有镜头生成/取消契约继续独占移动。跳过ghost 副本、弹簧、默认状态过渡、动画队列与这两个依赖。W3C不依赖动效也保留含义WAI 轮播模式要求自动序列具备显式 prev/next 与停止/重启控制WCAG 动画指南建议尊重动效偏好并消除不必要移动Media Queries 5 定义了prefers-reduced-motion。借用当自动移动被暂停或移除时故事仍必须可理解。改造在 Live、Still 与prefers-reduced-motion中保持同一静态next层级不再新增自动aria-live播报Story Director 仍是唯一的当前步口述解释。跳过自动开始、悬停触发推进与循环注意力效果。Borrow / Adapt / Skip 汇总决策Round 39 契约Borrow一个语义变化独占注意力previous/current/next 离散且由读者控制。Borrow显式语义 ID 同时决定视口取景与叙事状态。Borrow动效被暂停或移除时图表仍可用。Adapt为现有 Story Beat 状态机只增加一个next状态。Adapt保留真实 forward、reverse、multiple、grouped 事实。AdaptStory Follow 保持唯一镜头所有者Story Director 保持唯一口述字幕所有者。Skip另一个面板、minimap、编辑器、依赖、schema 字段、布局遍或导出格式。Skip无限动效、粒子、呼吸光晕、提前镜头漂移、克隆的未来拓扑。四、最小实现契约源码级还原setStoryBeat()在 archify/assets/template.html 中原子地完成分类与写入。对照契约逐条验证原子四分类storyBeatState(step)用四次分支完成分类——step storyBeatIndex返回paststep storyBeatIndex返回activestep storyBeatIndex 1返回next否则返回pending见 storyBeatState。节点、精确故事边与 trail 停靠点均以同一函数写入data-story-beat-state。唯一 next 节点nextStep storyBeatIndex 1 storySteps.length ? storySteps[storyBeatIndex 1] : null至多一个 next 故事节点最终 beat 为null。精确边复用、绝不合成节点与边的 next 分类走同一storyBeatState边的data-story-beat-step在 storyStep 中按前一停靠点到当前停靠点的真实出/入边解析并依据edges.length与 forward/reverse 数量判定start / group / forward / reverse / multiple——不反转 SVG 几何也不重写 label、marker 或 dash 模式。multiple 标记全部已解析边、grouped 只标节点multiple时storyStep().edges中每个精确创作边都会带上该 step 的 beat-step 标记grouped时edges为空数组因此只可能标记下一个节点而不产生任何连接线预览。测试显式断言doesNotMatch任何createElementNS(...story-horizon|data-story-horizon-edge)见 story-horizon.test.mjs。透明度与饱和度优先CSS 在 模板样式 中实现节点层级active 1.00 past 0.72 next 0.50 pending 0.22next 另加filter: saturate(0.66)精确故事边层级active 1.00 past 0.58 next 0.34 pending 0.16trail 流边 next 为0.2。不改动创作边本身next 的 CSS 规则不包含animation:、drop-shadow或stroke-dasharray测试正则直接校验trail 停靠点.guided-view-stop[data-story-beat-statenext]用静态虚线边框作为非颜色提示见 guided-view-stop 样式。HUD 里的Next · 标签后缀renderStoryCaption(step, total, nextStep)在 nextStep 存在时写入nextStep.index 1 · nextStep.nodeLabel且storyCaptionNext.hidden !nextStep见 renderStoryCaptionHUD 中的 guided-story-caption-next 以第三列 grid 形式存在、不增加行高。确定性恢复Play、Pause、上一步/下一步、手动 beat 与精确#viewidbeatnode-id恢复都走同一个setStoryBeat()因此在首帧绘制前就产生一致状态不引入自动播放。Story Follow 不预移镜头followStoryStep()只在storyBeatIndex匹配时解析收据generation 防竞态镜头仅在该 beat 变为 current 时移动。Live / Still / reduced-motion 同一静态 nexthtml[data-motionstill]下所有[data-story-step]与[data-node-id]关闭 transitionprefers-reduced-motion同样应用。清理全部 next 状态settleStoryBeats()、clearStoryTrail()中多次svg.removeAttribute(data-story-next)/panel.removeAttribute(data-story-next)导出克隆时clone.removeAttribute(data-story-next)且canonicalStateClean断言克隆无data-story-next。普通 embed 行为不变embed 仅在其既有显式故事边界内继承 Horizon。data-story-next还同时写入 svg 根与 panelsvg.setAttribute(data-story-next, nextStep.nodeId)/panel.setAttribute(data-story-next, nextStep.nodeId)为测试与调试提供统一事实源。显式非目标不做章节自动播放或 cold-open 动画不做默认章节推断不做未来路径路由、图预测或传递边推断不做分支选择器、时间轴拖动器、缩略图条或新卡片不向规范 SVG 或 JSON schema 增加新语义状态不做拓扑揭示/隐藏、布局变化或克隆图不做环境、无限或独立调度的动画。五、需要防止的 12 个失败模式所有未来节点都变亮——特征失去horizon含义恢复它本想消除的视觉噪声next 状态压过 current 状态——光晕或高透明度会从真实 beat 抢走注意力past 上下文弱于 next——读者失去已走过的路线时间层级必须保持active past next pendinggrouped 转换获得合成连接线——这会制造虚假的架构事实从 multiple 转换猜测一条边——隐藏真实多重性并使故事不确定新虚线预览线覆盖语义 dash 含义——异步、读、写、安全、失败关系可能已用线型表达创作含义镜头提前漂移——读者意图未变时当前主体却已移动快速步进残留 stale next 或 stale 镜头完成——最新读者意图必须原子胜出精确时刻恢复闪错 next 节点——恢复必须在呈现可见前解析出 current 与 next最终 beat 保留 horizon——错误暗示故事未完成新字幕行重新撑高 Round 38 的 HUD——画布高度收益必须保留窄屏下.guided-story-caption-next { display: none }即为此设计见 移动端样式viewer 状态泄漏进导出——规范 SVG、PNG、打印与普通 embed 必须保持干净。六、验收标准与测试验证13 条验收标准在 story-horizon.test.mjs 中基本可逐条对号入座五种渲染器共享同一实现architecture、workflow、sequence、dataflow、lifecycle 五个样例逐一渲染HTML 均命中data-story-beat-statenext、step storyBeatIndex 1、data-story-next写入 svg 与 panel、以及guided-story-caption-next的 hidden/aria 结构且生成的 SVG 不含任何 Horizon 运行时属性。每个非最终 beat 恰好一个逻辑 next 节点最终 beat 为零模板断言storyBeatIndex 1 storySteps.length ? storySteps[storyBeatIndex 1] : null与storyCaptionNext.hidden !nextStep。forward / reverse / multiple / grouped / final 只用创作事实模板中的分类表达式与禁止合成边的负向断言共同保证。精确故事边仅在该步已解析时获得 nextgrouped 无连接线预览。Classic、Signal Flow、Blueprint 下不依赖光晕或单色仍可读next 规则无动画/投影/dash 改写blueprint 预设对 active 显式关闭 drop-shadow 与动画。Play、Pause、手动 beat、prev/next、反向导航、精确恢复产生相同确定性状态。快速重复 beat 变化无 stale 状态与 stale Story Follow 完成。Story Follow 仅为 active beat 移动。Still 与prefers-reduced-motion语义层级一致且无 pulse/zoom/pan/transition。390px 移动宽度无横向溢出、无新控件行、44px 触控目标不丢失。Presentation 播放保持 Round 38 紧凑 HUD 高度。普通 embed、打印、规范 SVG、SVG/PNG 导出、干净序列化均无 Horizon 运行时状态或 viewer 覆盖层测试断言svg.removeAttribute(data-story-next)出现至少 3 次、panel.removeAttribute(data-story-next)至少 2 次、克隆移除data-story-next并校验canonicalStateClean。浏览器读回覆盖 start、middle、final、forward、reverse、multiple、grouped、精确链接、Still、reduced-motion、移动端与导出状态且零 console 告警/错误。七、结论与落地方式Round 39 的决策是现在实现 Story Horizon。它是让现有故事系统更电影化的最小真实变更——不是增加更多动画而是把画布变成一张可读的过去-现在-未来构图。它直接放大 Story Follow Camera 与 Story Director Strip 的价值不依赖动效也可用并守住 Archify 最强的产品边界单一稳定、可检查、确定性的产物。要亲手验证这套实现可以运行仓库内的渲染管线与测试用 render-examples.mjs 渲染示例后在浏览器打开产物 HTML依次执行 Play / Pause / 上一步 / 下一步观察next节点与精确边的透明度层级变化运行 story-horizon.test.mjsnode --test archify/test/story-horizon.test.mjs逐条核对上文 13 条验收标准的自动断言查看 story-follow-camera.test.mjs 与 story-director-strip.test.mjs理解 Horizon 如何与既有镜头事务和口述字幕共存。参考文档docs/research-visual-evolution-round-39.mdRound 39 研究建议原文、viewer 实现状态机与分类、Story Horizon 测试验收证据。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考