Creative Development · AI Coding

AI Coding 实验场用 AI 协作快速把想法做成可交互原型

项目说明

下列每个项目都是一次完整的「构想 → 生成 → 调优 → 上线」实验:从能演奏乐曲的互动壁纸、随鼠标产生纵深视差的新年皮肤,到基于手势与鼠标的街机游戏,再到数学曲面的实时渲染,以及鼠标驱动的粒子星云场。每块预览都是真实运行的程序,滚动到画面中央时自动开始演示,离开后自动停止;需要鼠标操作的项目会自动模拟指针把玩法演示出来,你把鼠标移进画面即可随时接管。有声音的项目默认出声,可随时静音,也可点击「全屏体验」进入完整版本。

01 — Canvas · Web Audio

Musical Garden 互动壁纸

鼠标划过屏幕即可播下会发声的花朵,每朵花对应一个纯音;静置片刻后花园会自动演奏《天空之城》主题旋律,视觉生长与音乐进度同步推进。

滚动到画面中央即可自动运行(含声音)
Live preview 全屏体验 →

02 — React · 3D 视差

马年皮肤 · 3D 视差交互

为浏览器新年皮肤做的交互原型:背景、主视觉、文字、花枝与吊牌拆成七个景深图层,随鼠标位置以不同幅度偏移和倾转,形成纵深视差;指针划过会洒下闪烁翻转的亮片,悬停「AI+」吊牌会让它翻面摆动。整版按 1920×1080 设计稿等比适配任意窗口。

滚动到画面中央即可自动运行
Live preview 全屏体验 →

03 — Canvas · 手势识别

Zen Blade 水果忍者

高帧率 Canvas 街机游戏:抛物线物理、切片与粒子特效、连击判定与 60 秒挑战。预览中用鼠标划动即可切水果,全屏版本可开启摄像头手势识别,用指尖当刀。

滚动到画面中央即可自动运行(含声音)
Live preview 全屏体验 →

04 — Three.js · Shader

数学之美 · Zindler Conoid

用 Three.js 与自定义着色器把抽象的参数方程渲染成可交互的发光曲面:滑块实时重塑几何形态,鼠标带阻尼跟随旋转,三套配色平滑过渡,并内置自动漫游镜头。

滚动到画面中央即可自动运行
Live preview 全屏体验 →

05 — Canvas · 粒子系统

星云粒子场

数百个粒子在星云背景中漂移、连线,鼠标移入即产生吸附引力,让粒子跟随游走;点击可让粒子瞬间爆散,滚轮增减粒子数量并叠加色彩饱和度,方向键还能调节整体速度与旋转。配色会随本地时间在晨昏间自动切换。

滚动到画面中央即可自动运行
Live preview 全屏体验 →
返回全部项目 ↗