Skip to content

feat: 沉浸式漫游 Story 模式 + 视频背景 + 背景音乐 + 移动端加固 - #1

Merged
X33834 merged 1 commit into
mainfrom
feat/immersive-story
Sep 15, 2026
Merged

X33834 merged 1 commit into
mainfrom
feat/immersive-story

Conversation

@X33834

@X33834 X33834 commented Sep 15, 2026

Copy link
Copy Markdown
Contributor

新增

  • /story 沉浸式漫游:24 幅精选作品逐屏展示,每屏一幅 + 特别字体(Fraunces 衬线)创作手记;滚动换屏、图片左右视差、标题模糊显影入场、每屏主题色光带生长动画
  • 视频背景:AI 生成奶龙氛围视频(muted 自循环),同时用于首页 Hero 与 Story 背景,图片展示更动态
  • 背景音乐:Web Audio 自合成暖色调 ambient(零外部资源、零版权风险),导航栏一键播放/停止
  • 导航新增「漫游」入口

加固(适配各种页面)

  • body overflow-x: clip 防横向溢出
  • safe-area-inset-* 刘海屏/圆角屏适配
  • 小屏网格列 150px + 图片统一 max-width:100%;height:auto 防溢出
  • 全部动效尊重 prefers-reduced-motion,专注模式自动关闭视频/装饰

本地已验证:tsc --noEmit 通过、npm run build 144 页构建成功、story/首页/视频均 HTTP 200

- 新增 /story 沉浸式漫游:24 幅精选作品逐屏展示(每屏一幅 + 特别字体创作手记),滚动换屏、图片左右视差、标题模糊显影、主题色光带生长
- Hero 与 Story 加入 AI 生成的奶龙氛围视频背景(muted 自循环,prefers-reduced-motion/专注模式自动关闭)
- 背景音乐:Web Audio 自合成暖色调 ambient(零外部资源、无版权风险),导航栏一键播放/停止
- 移动端加固:body overflow-x:clip 防溢出、safe-area 安全区适配、小屏网格 150px 列、图片统一 max-width/height:auto
- 导航新增「漫游」入口
@X33834
X33834 merged commit 5076b71 into main Sep 15, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant