轨道海报编辑风首页 是做什么的？
一个像印刷旅行海报集复活的首页。墨黑与纸白交替出现；字体巨大而紧凑；一个橙色强调色贯穿所有操作。主视觉是一个小宇宙——一颗行星、轨道和纸质卡片——随鼠标倾斜。再往下，真实照片并非放入盒子，而是印刷到海报中：灰度化、以“乘”混合模式叠加到纸色上，置于巨大字母之下，直到访客悬停，色彩才恢复。
参考构建是 example/index.html（Atlasio，一个虚构的旅行品牌，英文）。详细代码在 references/components.md 中；screenshots/ 展示了桌面和移动端的每个部分。
1. 设计之前
- 收集 6–8 张照片，画面中有移动的人物（车站、公告板、道路、窗户）。为每张照片分配一个用途：一张用于主视觉中的小照片、一张用于海报状态、一张用于支持卡片。切勿重复使用同一张照片。
- 检查每张照片中是否有第三方标志和屏幕（机场广告、品牌标志），并将其裁剪掉。
- 选择四个“可能性”（旅行方式、城市、项目、季节）用于海报切换器，以及四个步骤用于路线控制台。每个需要有一个单词的海报标题、两行标题、一句话和一个具体示例（例如“巴黎 → 维也纳 乘夜车”）。
- 压缩照片（参见第5节）。示例中的七张照片总共约 750 KB。
2. 视觉基因
| 元素 | 规则 |
|---|---|
| 墨色 | 页面底色 #101b22；文字纸色 #edece4；柔和色 #9ca6a8；发丝线 #ffffff20。 |
| 纸色 | 浅色部分底色 #edece4，带有海报色调：鼠尾草绿 #cbd4b2、陶土 #d8c4b5、薄雾 #c0cfce、淡紫 #c9c2d3；支持卡片 #dbe1cd 和 #e5d5c6。 |
| 强调色 | 一种橙色 #ff6c3a（行星、太阳圆盘、跑马灯、活动标签、最终部分）。淡石灰绿 #c6d9ab/#c2d3a3 仅用于标题中的句号和路线编号。 |
| 字体 | DM Sans 800–1000 用于展示（字间距 -.065 到 -.09em，行高 .8–1）；400–700 用于正文。IBM Plex Mono 6–9px 大写用于所有标签、坐标和眉题。 |
| 标题 | 三行堆叠：实心、轮廓（-webkit-text-stroke:1px）、橙色；每行随鼠标移动量不同。 |
| 照片 | 在海报和支持卡片内部：grayscale(1) contrast(1.1) + mix-blend-mode:multiply 叠加在有色、独立隔离的卡片上；悬停恢复色彩并缩放至 1.04。小照片（主视觉）保持彩色并带纸色边框。 |
| 形状 | 除行星、太阳圆盘、轨道、切换器中的药丸形状外，全部为方角。 |
| 光标 | 一个 30px 光圈加圆点，mix-blend-mode:difference；在链接上放大。磁吸按钮向指针方向漂移。 |
3. 部分模式
- 头部 – 文字商标、一个等宽字体的“版本”链接、三个锚点、一个运动切换开关（
MOTION ON/OFF）、一个带边框的行动号召按钮、宽度小于 650px 时的汉堡菜单。页面顶部有一个 2px 高的橙色阅读进度条。 - 主视觉 – 等宽字体元数据行、三行标题、一个星号、两行正文、一个下划线链接、小照片。右侧：轨道宇宙（带经纬度环和一个两字母单词的行星、三条轨道、卫星、旋转的等宽标签）和三张浮动卡片：目的地票（点击循环四个“可能性”）、护照印章卡、照片打印。底部栏：滚动链接、“移动鼠标”提示、音量编号。
- 跑马灯 – 全宽橙色条带旋转 -1.6°，巨大的单词由星形符号分隔。
- 可能性 – 带灰色中间短语的标题、药丸切换器，然后是两列版面：海报（坐标行、融合照片、太阳圆盘、巨大单词、底部标签）和细节（大数字、眉题、标题、正文、“起点路线”、墨色按钮、等宽免责声明）。海报随鼠标 3D 倾斜。
- 路线控制台 – 深色部分，标题带橙色短语，四个标签组成带边框的行（活动标签为橙色），面板包含一个巨大的石灰绿数字，位于缓慢旋转的轨道椭圆内，以及步骤说明文本；下方是“解锁”行。
- 支持 – 大旋转星星 + 双色调标题；两张卡片（自助服务和付费顾问），每张包含融合照片、跟随光标的光晕和下划线链接；“学一门语言”行，其中有一个橙色单词。
- 最终行动召唤 – 全橙色部分，带网格、两行巨大链接（“那么，接下来去哪？”）带悬停时移动的箭头、一个简短承诺、墨色按钮和等宽路线行。
- 页脚 – 文字商标、两行句子、链接；等宽底部行，当品牌为虚构时附带诚实说明。
4. 标志性效果
- 鼠标场：在主视觉内触发
pointermove时，在:root上设置--px/--py（-1…1）；标题行、浮动卡片和 3D 轨道系统以不同乘数读取它们用于translate3d/rotateX/Y，通过.6s cubic-bezier(.16,1,.3,1)过渡缓动。一个实时X 050 / Y 050坐标读数随之更新。 - 粒子网络：一个包含 65 个漂移点（手机上 25 个）的画布，距离小于 95px 时连线；指针 120px 内的点被推开，指针 180px 内的点之间形成橙色连线。仅当主视觉可见且运动开启时运行。
- 融合照片海报：照片是一个绝对定位的
<img>，z-index:-2，位于isolation:isolate的海报内；灰度加乘将其印刷到海报颜色中，太阳圆盘在其上叠加，巨大单词位于上方。切换可能性时会淡出旧照片（.swap）、替换src、在load时淡入，并通过data-theme属性更改海报色调和太阳颜色。 - 倾斜卡片 + 光标光：海报和支持卡片向指针方向旋转约 7–9°，并暴露
--cx/--cy用于径向高亮。 - 无障碍标签页：路线标签使用
role="tablist"、轮换tabindex、方向键/Home/End 键。 - 运动切换：一个按钮暂停所有动画并将鼠标场归零；
prefers-reduced-motion和粗指针会自动关闭相同内容。
5. 构建规则
- 照片：
ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg（主视觉照片约 900px 宽）。裁剪标志和屏幕：-vf "crop=w:h:x:y,scale=1100:-2"。每张控制在约 170 KB 以内。 - 独立的 HTML 文件，包含 doctype、charset 和 viewport；字体来自 Google Fonts；内联 SVG 符号用于箭头和星星；无其他依赖。
- 每张照片都有描述场景的真实
alt，海报照片除外（装饰性，alt=""、aria-hidden），因为海报文字和细节承载含义。 - 移动端：主视觉堆叠，宇宙缩放到约 66%，卡片自身变换缩小，海报文字降至
22vw并设置word-break:normal，标签变为 2×2 网格，光标环和倾斜功能关闭。 - 在 390px 宽度下无水平滚动；有跳转链接；可见的
:focus-visible轮廓。
6. 撰写文案
- 三词一组，简短陈述句：“带着梦想来。带着计划走。”“找到地方。画出你自己的路线。”
- 等宽标签像印刷版一样说话：
01 / POSSIBILITIES，MODE 02 / AIR · FAR AWAY BY TOMORROW。 - 示例必须看起来真实，但需标注为示例；法律或入境规则始终指向官方来源。
7. 完成清单
- 每张照片使用一次、注明来源、裁剪掉第三方标志并压缩。
- 主视觉随鼠标倾斜；目的地卡片和“另一个可能性”与海报同步循环四个状态。
- 海报照片切换时无旧图像闪烁；悬停时恢复色彩。
- 路线标签支持键盘操作。
- 运动切换、减少运动偏好和触摸操作均停止鼠标场、画布、跑马灯和倾斜效果。
- 390px 宽度：海报标题内无单词分割、无水平滚动、无控制台错误。
- 截图重新生成：
node scripts/screenshots.mjs example screenshots。