作品 关于 联络

Selected Works · 2026

把想法做成 可以点开的东西

六件作业收在这里——一张会翻面的名片、一座浮在云上的城堡、一片用手掌推动的粒子宇宙，还有一部六十四秒的 MG 短片。

下面的每一张卡，点开就是真的能玩。

看作品 关于我
作品
06件作业
交互
04可实时体验
影片
64″MG 成片
依赖
0构建工具
SCROLL

01 — Selected Works

六件作品.

全部为手写 HTML / CSS / JS，无框架、无构建。点「进去看看」在本页内嵌运行， 点「新窗口」可全屏单独体验。

01

Name Card · 名片设计

名片

5:3 画布、真三维翻转的名片。同一张卡的正反两面，说的是同一个人的两种状态。

  • CSS 3D
  • 三版方案
  • 响应式缩放
新窗口

另两版：

02

Interactive Scene · 360° 环视

云端浮空城堡

一座飘在云海上的城堡。拖拽即可 360° 环视，天气与情绪跟着光线一起变。

  • Canvas 手绘
  • 拖拽环视
  • 情绪色彩
新窗口

拖拽或单指滑动环视，松手有惯性。

03

WebGL · 手势交互

手势粒子宇宙

八万颗粒子组成的星系、鲸鱼与太阳系。拖拽旋转，滚轮推近，也能打开摄像头用手掌推动星云。

  • WebGL 粒子
  • 手势识别
  • 三场景
新窗口

首次打开会请求摄像头权限，拒绝也能用鼠标玩。

04

Mini Games · 三款合集

游戏库 COLLECTION

色跃节拍、霓虹跑酷、激流小狐——三款 60fps 的 Canvas 小游戏，键盘即玩，零依赖。

  • Canvas 2D
  • 碰撞与手感
  • 三款可玩
新窗口

进入后按 1 2 3 快速开局。

05

Graphic Design · 平面

作品集

品牌视觉、海报、字体与插画的总集。滚轮向前推进，像翻一本会呼吸的书。

  • 品牌系统
  • 海报 / 字体
  • 滚轮叙事
新窗口

文件较大（4.7 MB），首次打开请稍等一秒。

06 木鸟醒了 MG 动画画面：小女孩与啄木鸟坐在叶子里上升

Motion Graphic · 影片

木鸟醒了 · 闯入世界

64 秒 MG 短片：一片叶子载着小女孩和啄木鸟，穿过云层去看世界。全片手绘分镜与关键帧。

  • 1080p / 64s
  • 分镜叙事
  • 定格感上色
新窗口

同目录还有一件实验：

六个文件夹，一个入口。所有页面都是相对路径，整包可以直接拖到 Cloudflare Pages。

02 — About

关于我.

做设计的时候，我更在意「它动起来是什么样」—— 排版是节奏，留白是呼吸，交互是句子的语气。

这个站里的六件作业，跨度从一张静态名片到一片可以伸手推动的粒子宇宙。 它们都没有用框架，也没有构建步骤：一份 HTML，一个文件夹，双击就能跑。 我相信轻盈的东西更耐用——少一点依赖，多一点手感。

方向 网页交互 / 动效设计
偏好 极简、蓝调、安静的动效
工具 HTML · CSS · JS · WebGL · AE
  • 01

    视觉系统

    从网格、字重到色阶，先把规则立住，再让例外好看。

  • 02

    交互原型

    与其画一百张说明图，不如做一个能点的小东西。

  • 03

    动效与影片

    关键帧是为情绪服务的，不是为炫技服务的。

  • 04

    亲手写代码

    手写 HTML / CSS / JS，让设计稿和落地页之间没有损耗。

03 — Contact

有想法，
就聊聊。

作业、实习、还是一起做个奇怪的小网站，都欢迎。
（邮箱与社交账号在部署前替换成你自己的即可）

写封邮件 再看看作品