Image · Type · Motion · Sound

把图片、文字、动效与声音放进同一个页面

Capabilities

这一页能承载什么

构建期转 AVIF/WebP 并按视口出多尺寸；首屏只加载海报，其余全部 lazy。源图放进 src/assets/ 即可。

Markdown + 内容集合（schema 校验），图文内容与组件解耦，改文字不用碰代码。

WebGL 首屏流场 + GSAP 滚动长卷，全部动态 import、可降级、受 prefers-reduced-motion 控制。

HTML5 音频按需 Range 流式加载，Web Audio 实时频谱，AudioContext 在用户手势内创建。

同构的 fetch handler：Cloudflare Pages Functions + KV，或任意 Node 机器上的同一份逻辑。

Cloudflare 主线 + 境外备份出口，DNS 分线路解析；不备案方案的可达性缓解措施见 docs/。

Motion

GSAP · scrub

滚动被"劫持"成横向位移：GSAP ScrollTrigger 把纵向滚动距离映射为横向 translateX，容器 pin 住不动。

astro:assets

同一张源图在构建时生成多尺寸 + 现代格式，浏览器按视口挑最合适的一张，首屏之外全部 lazy。

a11y first

prefers-reduced-motion 打开时，这段脚本根本不会被加载，横向轨道退化成普通纵向列表。

Sound

Ambient Drift (示例 · CC0) 0:00 / 0:00

Notes