Prompt

# 「北京 → 坝上」硬派越野路书 · 落地页设计蓝图 ## 一、全局视觉系统 ### 配色（军规 HUD） - 底色 ： #0a0d10 （深炭黑）+ #11161b （次级面板） - 主荧光 ： #7CFF6B （HUD 绿，关键数据/激活态） - 警示色 ： #FFB000 （琥珀，警告/海拔/陡坡） - 危险色 ： #FF3D3D （爆胎/熄火/极限值） - 冷蓝灰 ： #5A6B7A （次级文字、网格线） - 白 ： #E8EEF2 （主文字，仅用于标题） ### 字体 - HUD 数据 ： JetBrains Mono 或 IBM Plex Mono （等宽） - 章节标题 ： Oswald 或 思源黑体加粗（粗壮窄体，硬派） - 正文/批注 ： Inter + 思源黑体 ### 全局 HUD 框架（每段都有，固定在视口） - 左上 ：坐标实时跳变 N 40°25'31" / E 116°47'12" ，海拔 ALT: 487m ，章节编号 CH.02 / 06 - 右上 ：当前时间（模拟旅程时钟）、车速 SPD: 87 km/h 、油量条 - 左下 ：迷你轨迹图（作战图缩略，已走过路径高亮） - 右下 ：本段距离倒计时进度条 + "下一节点 23.4km" - 中央偶发 ：扫描线、十字准心、雷达圈（仅在过节点时短暂出现） ### 通用动效语法 - 数据跳变：每 0.3-0.8s 随机重抽一次末位数字（HUD 真实感） - 元素入场：先画线框 → 文字逐字打印（typing 效果）→ 数据填入 - 切段过场：屏幕扫描线从上到下扫过，伴随 [SECTOR LOCKED] 文字闪现 - 偶发噪点：CRT 扫描线 + 1% 概率的 0.05s 故障抖动 ## 二、6 段叙事 × HUD 关键帧时间轴 ### CH.01「启程出城」北京 CBD → 五环 - 背景 ：黑底 + SVG 北京六环路网线框（动态描边绘制） - HUD 主题 ：城市指标 - 车流密度热力点闪烁 - 红绿灯倒计时跳变 - 限速 LIMIT: 80 + 当前 SPD: 65 （绿） - 滚动联动 ：轨迹点沿东三环→京承高速向北推进，每 5% 滚动进度走 1km - 关键帧 ： - 0-30%：CBD 楼群线框透视图渐显，HUD 自检动画 [SYS BOOT]...[OK] - 30-70%：六环出口节点高亮闪烁，"OUT OF CITY" 文字红字闪 3 次 - 70-100%：城市线框淡出，远山轮廓淡入 ### CH.02「高速穿越」京礼高速 / 京承高速段 - 背景 ：抽象等高线 + 高速公路双实线 SVG，缓慢横向位移制造速度感 - HUD 主题 ：巡航数据 - 大号车速读数 120 km/h （带波动） - 续航 RANGE: 412km 、瞬时油耗、转速表（圆形 SVG） - 风阻、外温读数 - 滚动联动 ：海拔曲线（左下）开始上扬，从 50m 爬到 600m - 关键帧 ： - 路边里程牌闪过，每过一个用 +1km 累加器跳数 - 超车小动画：当前车点超过前方点，附带 0.2s 风噪粒子 ### CH.03「燕山隧道」⚡ 【3D 爆点 #1 · Pin 锁滚】 - 触发 ：滚动进入此段后 ScrollTrigger pin 锁定 3 屏高度 - 场景 ：Three.js 真 3D 隧道 - 第一人称视角，从隧道内向出口推进 - 隧道壁瓷砖反光、灯光阵列、远处出口的小亮点 - 背景音效（可选）：低频车内回声 - 关键帧 ： - 阶段 A（前 1 屏滚动）：HUD 显示 IN TUNNEL 红字闪烁、GPS 信号丢失动画 SIGNAL: --- 、坐标变 ??? - 阶段 B（中 1 屏）：出口光斑放大，HUD 数据全部抖动失真 - 阶段 C（出口爆点）：纯白光过曝 0.3s → 渐显 燕山山脉全景线框图 （SVG 等高线 + 摄像机抬头视角），HUD 全部重新自检 [GPS LOCKED][ALT 1240m] - 解锁 Pin，放行进入下一段 ### CH.04「县道转场」丰宁满族自治县 G111 → 乡道 - 背景 ：作战图风格——网格坐标 + 等高线密集化、村庄红点标注（凤山镇/大滩镇） - HUD 主题 ：路况切换 - 路面类型指示器： PAVED → GRAVEL （绿→琥珀切换动画） - 弯道预警雷达，每个弯都用扇形扫描提示 - 海拔曲线持续上扬到 1400m - 滚动联动 ：作战图视角缓慢平移，已走过的路径用绿色虚线，未来路径用琥珀色虚线 - 关键帧 ： - 30% 进度：路面切换动画 [SURFACE CHANGE DETECTED] 大字横扫 - 70% 进度：胎压 4 个轮子的圆形指示器从仪表收纳栏弹出，预备进入越野段 ### CH.05「越野硬派路段」搓板路 / 涉水 / 陡坡 - 背景 ：抽象越野场景——粗颗粒地形等高线 + 河流蓝色折线 + 陡坡警示三角 - HUD 主题 ：极限读数（最丰富的一段） - 俯仰角仪 ：水平仪 + 俯仰角度 SVG 圆盘，跟着滚动进度倾斜（最大 ±28°） - 4 轮独立胎压 ：搓板路时四轮数值高频抖动 - 扭矩分配可视化 ：前后轴 50/50 → 30/70 动态切换 - 涉水深度 ：进入涉水节点时蓝色水位条上升到轮毂 - 差速锁状态 ： DIFF LOCK: ENGAGED 红字常亮 - 关键帧 ： - 0-25%：搓板路——所有数据高频抖动 + 屏幕轻微震动（CSS transform jitter） - 25-50%：涉水节点——水位上升动画 + 红色 WATER DEPTH 65cm 警告 - 50-80%：陡坡爬升——俯仰角拉到 +28°，扭矩重分配，发动机转速读数飙红 - 80-100%：登顶——海拔到 1800m，HUD 短暂全绿 [SUMMIT REACHED] ### CH.06「草原扎营星空」⚡ 【3D 爆点 #2 · Pin 锁滚】 - 触发 ：滚动进入后 pin 锁定 4 屏高度（终章给足停留） - 场景 ：Three.js 真 3D 星空 + 营地 - 半球形星空穹顶（数千粒子点 + 流星粒子系统） - 前景剪影：越野车 + 帐篷 + 篝火（粒子火焰） - 可拖拽视角 ：用户拖动鼠标 360° 环视星空 - 北斗七星可点击高亮 - HUD 主题 ：环境监测（与前面所有段反差） - 外温 -3°C 、湿度、风速 - 电瓶电量、营地照明状态 - 银河方位、月相 - 关键帧 ： - 阶段 A：抵达——车辆停下、车头灯关闭、HUD 由战斗态切环境态（绿色降为暗绿） - 阶段 B：扎营——帐篷展开 SVG 动画 + 篝火点燃粒子从无到有 - 阶段 C（高潮）：仰望天空——视角抬起，星空铺满屏幕，HUD 收缩到边缘半透明 - 阶段 D（结尾）：屏幕中央打出收尾文字 [MISSION COMPLETE] + 总里程 486 KM + 总爬升 1748 M + 用时 09:42:11 ，伴随个人签名/落款

Result

GPT Image-2 - Text to Image

Settings