目录 / INDEX
六卷
每一卷都做了可以点开的版本。带「可交互」标记的，可以直接在页面里动手。
01 品牌识别 · 版面
QW · 个人名片三稿
三套方案 · 五张稿QW 六边形徽标霓虹渐变 · 栅格系统
五张原稿全部上线：第一张为方案一正反合版，其余为正反单页。图上姓名、校名与联系方式均已做模糊处理。
三套方案，共用同一枚 QW 六边形徽标。
徽标是把姓名首字母压进一个六边形：两个字母共用一条中轴，外面再套一层更细的六边形描边，缩到 8 毫米也不糊。三套方案换了三种光——紫渐变、青蓝栅格、紫粉霓虹——徽标本身没动。
版式共用一套栅格：左栏放信息，右栏放徽标，四角留直角框线做「取景器」的暗示。背面把兴趣拆成两栏卡片，配线性图标与英文小注，让姓名之外的部分也有呼吸的地方。
方案一侧重渐变与留白，方案二用栅格和发光描边做界面感，方案三两色对冲，再压一层水平扫描线——像老显示器没调好的那种偏色，故意留着的。
三套方案换了三种光，徽标没动——先被记住的应该是那一枚六边形。
- 方案
- 三套 · 五张稿
- 徽标
- QW 六边形 · 双线描边
- 交付
- 线上稿 + 印刷准备文件
02 交互叙事 · Canvas
今天，心里是什么天气
四种情绪四层天气纯前端单文件
在窗口里点任意一张卡片进入，再点画面与天气互动。
四种情绪，四层天气。选一个走进去。
喜是暖阳、彩虹与花瓣；怒是火焰、火星与热浪；哀是斜雨、薄雾与水珠；惊是雷电、闪白与震颤。每一层都是独立的粒子系统，用 Canvas 逐帧画出来。
交互只有两个动作：选一层，然后在画面里点。没有按钮阵列，所有操作都发生在天气本身——这也是我想试的事：让界面自己变成内容。
- 喜暖阳 · 彩虹 · 花瓣
- 怒火焰 · 火星 · 热浪
- 哀斜雨 · 薄雾 · 水珠
- 惊雷电 · 闪白 · 震颤
03 三维空间 · WebGL
四年 · 空间
16 件作品4 个展区p5.js · WebGL
进去之后用鼠标拖动换视角，滚轮前后走；桌面端体验最好。
把四年的平面摊开，变成一个能走进去的房间。
三面展墙加一条纵深通道，16 件作品按系列挂在四个展区。第一人称可以走近看细节，环绕视角能一次看完整个空间。
展厅本身也是一件作品：墙面的墨绿、赭石与留白取自传统卷轴的装裱配色；灯光只打作品，不打墙——所以越往里走，越像走进一幅画。
- 作品数
- 16 件 / 4 个展区
- 渲染
- p5.js · WebGL
- 体积
- 单文件 5.3 MB
04 动态影像 · 2D MG
纸飞机送信 & 绵绵
24 fps16:9 / 9:16全片无真人
另有交互播放页《红绿灯的失眠夜》，纯 Canvas + WebAudio 实时生成，带声音。
两部片子，一横一竖，没有一个人出镜。
《纸飞机送信》写一只纸飞机把信送到旧邮筒手上的全过程。角色全是物件：小纸、旧邮筒、风铃、纸飞机群——情绪只靠眼形、嘴形和翅膀角度表达。暗部一律用天蓝压深，全片不出现纯黑。
《绵绵》是竖屏的情绪片，120 秒。走散了也会被温柔找到：羊群穿过雾、萤火与树影，最后停在有光的地方。
看《红绿灯的失眠夜》交互版 ↗ 读《纸飞机送信》完整分镜脚本 ↗- 规格
- 24fps · 1080p / 竖屏 1344
- 分镜
- 48 组镜头 · 无人物约束
- 风格
- 2D MG · 扁平矢量
05 实时交互 · 手势
手势炒菜 · 隔空翻炒
MediaPipe21 关键点本机推理
举起手，隔空翻炒这锅小菜，60 秒出锅。
手部关键点在浏览器本地推理，21 个点算出手掌朝向与开合，映射成四个动作：张掌左右移动是翻炒，握拳上下抬是颠锅，双手升降控火候，剪刀手朝上撒盐。
熟度、糊度、火候和趣味分同时变——手停三秒就糊，火开太大也会糊。这一组练的是把「识别」翻译成「手感」：允许误判，但误判也要好玩。
- 识别
- MediaPipe Tasks Vision
- 延迟
- 本机 GPU 推理
- 玩法
- 60 秒 · 四手势
06 游戏设计 · Canvas
方块 & 墨雀
两个可玩键鼠 + 触屏墨雀支持手势
关于 / ABOUT
六卷之后
这六组东西连起来，是一个人从平面走到实时的过程：先学会把一行字排好，再让字动起来，最后让它能被手碰到。
技术上全部是纯前端——一个 HTML 文件，加上 Canvas、WebGL、WebAudio，没有框架也没有构建工具。这个站本身也一样：index.html + 一份 CSS + 一份 JS，丢进任何静态托管都能跑。
六个源文件夹里的东西，能搬的都搬进来了：五张名片原稿、两部成片、九场分镜、手势作品的模型与 wasm，连手势工程的整套源码也在。档案里逐个对过账 ↗ 原件在原始文件区 ↗
站内署名统一为「设计者」，姓名与学校信息已隐去。
设计者 · 二〇二六
用到的
- 版式设计
- 品牌识别
- 分镜脚本
- MG 动画
- Canvas 2D
- WebGL / p5.js
- WebAudio
- MediaPipe
- 交互叙事
- 响应式