为什么值得关注

该作品将 Canvas 2D 上的 Verlet 物理模拟、纯合成音效与 View Transitions API 相结合，在浏览器中实现了博物馆级别的流畅互动体验，数千字符下稳定 60fps。

适合谁使用

数字艺术与交互设计爱好者
关注 Canvas 物理与 Web Audio 的前端开发者
文化遗产与博物馆数字体验策划者
喜爱汉字文化与古典美学的用户

典型使用场景

博物馆中展示中国凤冠的互动数字展品
教学演示：如何在 Web 应用中实现物理模拟
开发者个人作品集展示高级浏览器能力
探索将文字作为可触摸物理材料的创意表达

项目优势

利用字形图集与 drawImage 缓存实现数千字符下 60fps 流畅运行
纯 Web Audio API 合成音效，无任何音频文件，音量与音色随手速变化
双视图（单冠全景与三冠陈列）通过 View Transitions API 实现无缝变形切换
七顶不同凤冠，各自配有与冠物气质相符的诗文字库及匹配的珠帘色调

使用前须知

用户需点击页面一次以解锁浏览器音频，否则无声
仅支持暗色主题，无亮色模式
针对桌面鼠标优化，触屏交互未在文档中明确说明

README 快速开始

凤冠字帘 · Chinese Phoenix Crown

一件可以"拨动"的数字文物——七顶中国凤冠悬于午夜蓝的夜幕中，冠下垂落由汉字织成的珠帘，指尖拂过，字缕如流苏般摇曳作响。

在线体验：

视频演示

https://github.com/user-attachments/assets/25382d23-489d-4f71-b4b5-ad2c539a8e42

75 秒完整演示，包含场景切换、文字帘拨动与交互音效。

项目简介

本项目复刻并再创作了"屋檐下垂落文字帘"的交互效果：每一顶凤冠（点翠、翠玉、金丝、婚冠、戏冠、冰冠、后冠……）下方悬挂着一条由汉字组成的帘幕。字符池取自与冠物气质相配的诗文与吉语——婚冠垂"金枝玉叶、十里红妆"，后冠垂"母仪天下、九龙四凤"，戏冠垂京剧行当术语——帘色也逐字取自冠上实物的点翠蓝、花丝金、宝石红。

鼠标拂过帘幕，字缕会像真实的珠串一样被拨开、回摆，并发出金属风铃般的清脆声响。

核心特性

物理文字帘：Canvas 上的 Verlet 链式物理模拟，每条字缕都是可拨动的珠串，沿凤冠轮廓（图片 alpha 通道采样）自然垂落
双视图：
- Scene —— 单冠全景，左右卡片切换，凤冠间由 View Transitions API 驱动"神奇位移"过渡
- Gallery —— 三冠并排陈列，中间大、两侧小，点击侧冠换焦、点击中冠入景
合成音效：纯 Web Audio API 合成——拨动时的布料沙沙声 + 非谐波泛音叠加的金属铃音（明亮 ping、闪烁长尾、珠串回击），音量与音色随手速变化，无任何音频文件
性能优化：字形图集（glyph atlas）预光栅化 + drawImage 盖章渲染、图集坐标节点级缓存、DPR 上限 1.5、透明尾字剔除，数千字符实测稳定 60 fps
七顶凤冠：点翠凤冠 Fengguan、翠玉冠 Cuiyu、金冠 Jinguan、金簪婚冠 Jinzan、戏冠 Xifeng、冰鸾冠 Bingluan、凤后冠 Fenghou

技术栈

层	技术
框架	Next.js 16（App Router）+ React 19
渲染	Canvas 2D + 字形图集，Verlet 物理
过渡	View Transitions API（共享元素 morph）
音效	Web Audio API（合成，无音频资源）
样式	Tailwind CSS v4，暗色单主题
部署	Vercel

本地运行

pnpm install
pnpm dev

打开，先在页面任意处点击一次（浏览器音频解锁），再拨动文字帘即可听到铃音。

交互提示

操作	效果
鼠标拂过帘幕	字缕被拨开、回摆，伴随沙沙声与铃音
快速扫动	摆幅更大，铃音更亮、偶有珠串二次回击
点击左右小卡片	神奇位移切换至相邻凤冠
顶部 Scene / Gallery	单景与三冠陈列间无缝变形切换

Built with v0

本仓库关联 v0 项目，每次合并到 main 会自动部署。

Continue working on v0 →

Chinese-PhoenixCrown