前端 / 开源 / 交互工程

把复杂的东西做得能被看见

我做界面，也做让界面跑得动的那层东西——状态机、渲染管线、性能预算。这里放的是过程，不只是截图。

查看作品 GitHub

目前可接洽 · 远程协作

Selected Work

做过的东西

每个项目都写清了问题、约束和最后没做成的部分。比起"用了什么"，我更想说清楚"为什么这么选"。

Xi Flow

面向长流程任务的节点式编排引擎，把「一堆异步脚本」变成可视化、可回放、可断点恢复的工作流。

TypeScript
React
XState
Vite
Web Worker

首屏 JS: -38%
节点调度延迟: 从 120ms → 24ms

Glitch UI

一套以「故障艺术」为视觉语言的组件库，所有动效都可在零 JS 的前提下降级为静态态。

CSS
TypeScript
Web Components
Storybook

组件体积中位数: 1.8 KB gzip
无障碍审计: WCAG AA 全通过

Pixel Cache

一个 4KB 的图片缓存与渐进加载库，用 IndexedDB 做跨会话缓存，弱网下二次访问接近秒开。

TypeScript
IndexedDB
Service Worker

体积: 3.9 KB gzip
二次访问 LCP: 2.9s → 0.7s

Stack

能力轴

日常使用

TypeScript
React / Astro
CSS / 动效
Node.js

熟悉

WebGL / GLSL
Vite / 构建优化

实验中

Rust
WebAssembly

轨迹

一条能看清走向的线

2023
从写页面到写系统
接手一个十几个 cron 脚本堆出来的自动化系统，第一次意识到"能跑"和"可维护"是两件事。
2024
开始认真对待性能预算
给团队引入构建体积门禁，把首屏 JS 从 480KB 压到 190KB，也养成了每改动必看 Lighthouse 的习惯。
2025
把视觉语言做成组件
做了 Glitch UI，第一次把动效当成"必须能降级"的工程问题，而不是装饰。
2026
交互工程与渲染
Xi Flow 把调度、渲染、回放拆开，也开始写自己的 shader。现在主要在做这件事。

About

我关心的三件事

能被理解的结构状态机、事件流、明确的数据边界，比聪明的技巧更值钱。
能被感知的速度性能不是跑分，是"点下去有没有立刻回应"。
能被关掉的特效任何动效都要能在低端机和 reduced-motion 下安静退场。