01 — Canvas · Web Audio
Musical Garden 互动壁纸
鼠标划过屏幕即可播下会发声的花朵,每朵花对应一个纯音;静置片刻后花园会自动演奏《天空之城》主题旋律,视觉生长与音乐进度同步推进。
Creative Development · AI Coding
01 — Canvas · Web Audio
鼠标划过屏幕即可播下会发声的花朵,每朵花对应一个纯音;静置片刻后花园会自动演奏《天空之城》主题旋律,视觉生长与音乐进度同步推进。
02 — React · 3D 视差
为浏览器新年皮肤做的交互原型:背景、主视觉、文字、花枝与吊牌拆成七个景深图层,随鼠标位置以不同幅度偏移和倾转,形成纵深视差;指针划过会洒下闪烁翻转的亮片,悬停「AI+」吊牌会让它翻面摆动。整版按 1920×1080 设计稿等比适配任意窗口。
03 — Canvas · 手势识别
高帧率 Canvas 街机游戏:抛物线物理、切片与粒子特效、连击判定与 60 秒挑战。预览中用鼠标划动即可切水果,全屏版本可开启摄像头手势识别,用指尖当刀。
04 — Three.js · Shader
用 Three.js 与自定义着色器把抽象的参数方程渲染成可交互的发光曲面:滑块实时重塑几何形态,鼠标带阻尼跟随旋转,三套配色平滑过渡,并内置自动漫游镜头。
05 — Canvas · 粒子系统
数百个粒子在星云背景中漂移、连线,鼠标移入即产生吸附引力,让粒子跟随游走;点击可让粒子瞬间爆散,滚轮增减粒子数量并叠加色彩饱和度,方向键还能调节整体速度与旋转。配色会随本地时间在晨昏间自动切换。