# 晚安坞 · 四面场景 Demo

打开 index.html 即可离线运行。不需要安装依赖或连接 Figma。

依据 Figma「首页-试验1」467:3796 制作，保留 390×844 画布、原背景、头像、图标、播放器与主题入口的位置。默认睡眠，固定循环关系为：冥想 → 睡眠 → 小憩 → 呼吸 → 冥想。

左右滑动、键盘方向键或右侧演示按钮均可切换。两侧透视预览已移除，界面只保留中央 CTA 和四个模式位置标记。中间是带图标的当前模式主 CTA；切换时随背景共用同一立方体侧面转动。中央 CTA 可进入功能入口占位页并返回。

动效总长默认 620ms：场景连续缩至95%、以 CSS 3D 旋转90°、展开，三个动作重叠衔接；滑动松手按剩余角度使用180–460ms落位；CTA与背景共用侧面，内容随转角淡出淡入。四张场景图在启动时预加载，转动时使用已解码图片。短距离滑动可退回，快速滑动可完成切换，连续点击保留下一次切换意图。支持慢速观察和减少动态效果。

顶部入口及底部控件不随立方体转动。主题入口仅静态展示，已移除主题选择弹层和交互。轮播标记从睡眠开始，依次为睡眠、小憩、呼吸、冥想；四面相邻关系保持不变。浏览器禁止自动有声播放，需点击「开启演示音频」或底部声音按钮。

## 素材说明

四个模式分别使用内置 imagegen 生成的独立场景图：睡眠为月夜湖面、冥想为晨雾山水、小憩为午后花园、呼吸为海岸。场景图配合轻微缓动，属于动态图片展示，尚未接入循环视频。原始 Figma 背景素材仍保留。生成提示词见 scene-prompts.md，图片位于 assets/*-scene-v1.png。声音为本地 Web Audio 合成环境声，四个模式音色不同，以等功率交叉淡入淡出演示切换，无远程请求。

右侧「使用自己的背景视频与音乐」可分别为当前模式导入本地素材；切换其它模式后仍保留本次导入内容。导入文件仅在本次页面打开期间有效。

四面背景节点均有 video 元素，可在 app.js 中接入正式预设文件。实际 App 的模式入口、用户页、记录页和分享流程需要由项目路由接管，本 Demo 不会修改 Figma 文件或真实用户数据。

## 修改与构建

demo.template.html：结构与样式。app.js：交互、动画及声音混合。assets：Figma 原始图片/SVG及动态模式文字预览。tools/build.py：内嵌所有资源，生成独立 HTML 和 ZIP。

在此目录运行 `python tools/build.py`。

当前入口字体为 Noto Sans SC。保持与 Figma 相同的字体、留白和图标完整边界。

转面底色取自 Figma 背景/背景变量：Light #F3F1EE（中性色/100），Dark #111116（Dark中性色/Dark 900）。按北京时间默认选择日夜，也可在演示面板切换。侧面使用28px圆角、轻阴影及1400px透视距离，减弱锐角。

四面统一覆盖36%暗色半透明遮罩，图片和导入视频均不模糊。遮罩随每个立方体侧面转动，按钮、图标和文字保持清晰。