# 晚安坞 · Cover Flow Demo

打开 index.html 即可离线预览，请保留同目录 app.runtime.js 和 assets 文件夹；素材外部引用，不使用base64内嵌。原立方体 Demo 保留在同级 home-cube-demo 文件夹。

初始全屏睡眠，保留原来的 CTA、状态栏、顶部入口、底部播放器和位置标记。场景覆盖统一36%暗色遮罩，清晰图片不模糊。

横向拖动进入四景预览：四张缩略图与正向小标题同时可见，顺序为睡眠、小憩、呼吸、冥想。选中项更大且正面朝向，其余项逐渐倾斜。横向移动约63个画布像素切换一项，一次长拖可跨多项；手指停下后不会自动继续滚动。左右两端有限位，不依靠无限轮播隐藏选项。

松手选择最近的一项，短距离取消；缩略图从自己的位置展开回全屏，CTA逐渐出现。四个底部标记始终固定在原位置，预览时标示当前候选项，全屏时标示当前模式。背景铺底为候选图片的模糊版本，并按拖动位置交叉淡入淡出；缩略图本身不模糊。

演示面板的“展开四个场景”可保持预览，点击缩略图或小标题直接选择。键盘左右键可选择，Escape收回当前场景。支持减少动态效果。

音乐在松手确认后交叉淡入淡出，浏览时保留当前音乐。默认声音是本地 Web Audio 合成环境声，需要用户主动开启。视频素材尚未提供，默认用四张生成的场景图；可以导入当前模式的视频与音乐。视频缩略图从首帧取图，等比例裁切，预览暂停视频并显示首帧，返回全屏后继续播放。导入内容仅保留在本次页面打开期间。

app.js 为实际交互源码，demo.template.html 为结构样式，assets 为素材。修改后运行 python tools/build.py 生成轻量 index.html、外部 app.runtime.js 和包含素材的 home-coverflow-demo.zip。app.base.js、sound.part 与其它 tools 脚本为制作过程记录，不是运行依赖。实际 App 功能路由由项目接管，目前 CTA 进入占位页。

已验证：四项同时显示、一次长拖跨三项、短拖切换一项、点击标题选择、全屏 CTA 更新、位置标记固定、切换时没有浏览器脚本错误。真机触摸性能仍需在目标设备验证。

预览缩略图改为3:4比例并居中裁切；当前候选项无暗色蒙层，侧面项随倾斜程度叠加最高52%暗色蒙层。侧面最大倾斜66°，各项有一定重叠，标题保持正向和同时可见。全屏场景仍保留原36%暗色遮罩。

新版手感按约63px卡片中心间距映射拖动；跟随平滑时间约30ms，选项附近有最多12%的轻微吸附，两端额外位移最多6px并柔和回收；不会产生跨多项的惯性甩动。

四景预览进一步收紧，左右预留安全留白；候选卡片132×176，其余128×约171，均保持3:4居中裁切。