Dd有设计感的开发者
Cheng Lou 的头像
Cheng Lou前 React 核心成员 · Midjourney 工程师

Cheng Lou：给界面装上弹簧的人

2015 年，react-motion 让整个前端世界开始用弹簧思考动画；在 Facebook，他参与的 Reason 让 Messenger 网页版一半代码换成了 OCaml 方言；2026 年在 Midjourney，他用 Pretext 绕开浏览器最昂贵的重排，又用 Freerange、handwired 把 AI 编程推向「可验证」。

@_chenglou美国加州种子约 20 分钟读完更新于 2026-10-21
  • React
  • 动画
  • 文字排版
  • 编程语言
  • AI 辅助开发

一句话：一个总在做「底层原语」的工程师，但每个原语都从用户能感受到的问题出发：动画被打断时的突兀、聊天列表里文字高度算不准造成的跳动、布局代码里潜伏的 NaN。

代表作：react-motion（★2.2 万，弹簧动画的开山之作）、Pretext（★5 万+，不碰 DOM 的多行文本测量与排版）、ReasonML / ReScript（参与）、Freerange、handwired、sotaku。

关键数字：GitHub 粉丝约 1 万，近一年贡献 6,227 次；X 关注者约 7.9 万。Pretext 发布 48 小时内收获上万星，发布推文的浏览量据报道超过千万。

看点：他公开说 Pretext 是借助 Claude Code 和 Codex 写成的，并把「用浏览器自己的字体引擎作为真值」称为「对 AI 非常友好的迭代方式」。

7.9 万X 关注者
2015加入 X
8 万GitHub 代表仓库 ★
9,943GitHub 关注者

他的 X 简介把职业生涯写成了两行：「Worked on: React, Messenger, Reason, ReScript. Currently: Midjourney, Pretext, Freerange.」十多年里，Cheng Lou 换过好几次战场，但一直在做同一类事情：替开发者重新定义一个「本来以为就该这样」的基础问题。

档案速览

Profile

身份
软件工程师；前 Facebook React / Messenger 团队成员，ReasonML 与 ReScript 核心参与者；现于 Midjourney
所在地
美国加州
代表作
react-motion、Pretext、Freerange、handwired、sotaku；chenglou.me 作品集
常用语言
JavaScript、OCaml / Reason、TypeScript、Python
关键数字
Pretext ★50,864；react-motion ★21,907；GitHub 粉丝 9,948
代表演讲
React Europe 2016《On the Spectrum of Abstraction》
开源组织
reasonml、rescript-lang

他到底在做什么？

Cheng Lou 的作品可以排成一条线：react-motion 回答「动画怎样才能随时被打断」；Reason 回答「类型安全的函数式语言怎样进入前端」；Pretext 回答「不读 DOM 怎样知道一段文字有多高」；Freerange 回答「不打开浏览器怎样确定布局不会出错」。

2026 年的几个项目还有一条暗线：给 AI 一个可以自动对照的真值。Pretext 用浏览器字体引擎作为基准，Freerange 在编译期给出每个数字的取值范围，handwired 把普通程序写成精确、可微分的神经网络。他在探索的是：AI 写的底层代码，怎样才能被证明是对的。

本页依据 GitHub、项目 README、chenglou.me、Reason 官方博客与 Pretext 的公开报道整理，资料截至 2026 年 10 月。Pretext 的性能数字和传播数据来自二手报道，未经独立验证。

成长与经历

  1. 2012–2014

    开源起步

    2012 年注册 GitHub。最早的仓库是一组 React 组件：react-treeview、react-radio-group、react-spinner，还有无代码前端测试工具 node-huxley 和把 JS 对象变成 CSS 类的 RCSS。2014 年的 react-tween-state 是他第一次认真处理 React 动画。

  2. 2015

    react-motion

    用物理弹簧代替「时长 + 缓动曲线」来描述动画：动画可以被打断、被重定向，始终连续。这个思路后来被 react-spring、Framer Motion 等库继承，成为前端动画的主流范式。

  3. 2016

    《On the Spectrum of Abstraction》

    在 React Europe 上关于「抽象光谱」的演讲，被很多工程师视为理解「何时该抽象、何时不该」的经典。同年写了《intro-to-reason-compilation》教程。

  4. 2016–2017

    Reason 与 Messenger

    在 Facebook 参与 ReasonML：给 OCaml 一套 JavaScript 开发者熟悉的语法。据 Reason 官方博客，Reason 团队直接进驻 Messenger 一年多，到 2017 年 9 月，Messenger.com 已有 50% 的代码改用 Reason。这条路线后来演化为 ReScript。

  5. 2022.12

    chenglou.me

    把个人网站做成了 Midjourney AI 作品集，一条推文配一段演示视频，展示了十几项「闪亮的 UI/UX 细节」。据报道，此后几年他在 Midjourney 构建内部的渲染工具。

  6. 2026.03

    Pretext

    纯 TypeScript 的多行文本测量与排版库发布，迅速成为当年最受关注的前端开源项目之一，半年后接近 5.1 万星。

  7. 2026

    Freerange、sotaku、handwired

    4 月发布静态验证布局代码的 Freerange；同年用一个 80 万参数的循环 Transformer 训练数独求解器 sotaku；10 月发布 handwired，把 JS 程序直接「写」成神经网络。

代表作品详解

Pretext ↗

2026.03TypeScriptDOM / Canvas / SVG

「Fast, accurate & comprehensive text measurement & layout.」浏览器里要知道一段文字排出来有多高，通常得先把它放进 DOM，再调用 getBoundingClientRect 或 offsetHeight。这会触发重排，是浏览器里最昂贵的操作之一。虚拟滚动、聊天列表、瀑布流都被它拖累。

Pretext 自己实现了测量和断行逻辑：prepare() 一次性把文本分段测量，layout() 之后只做纯算术，因此可以在 DOM 出现之前就算出排版结果，并渲染到 DOM、Canvas 或 SVG。它支持「你可能都不知道存在的语言」，并用浏览器自己的字体引擎作为对照基准。

  • 演示页（chenglou.me/pretext）有气泡聊天、杂志式分栏、文字绕图等效果，都是原生 CSS 做不到或做起来很慢的。
  • README 特别说明：演示是「推荐阅读的 API 用法范例」，不随 npm 包发布。
  • 据二手报道，gzip 后约 15KB，零依赖；发布 48 小时内收获超过 1.8 万星。
GitHub
★50,864 · ⑂2,761
npm
@chenglou/pretext
创建
2026-03

react-motion ↗

2015JavaScript弹簧动画

「A spring that solves your animation problems.」传统动画用「持续 300ms + ease-out」描述，一旦中途被打断就会跳变。react-motion 改用物理模型：你只声明目标值（spring(10)），弹簧负责从当前状态平滑过渡过去，随时可以换目标。

这一观念转变影响深远：今天几乎所有主流前端动画库都把「弹簧」作为默认选项。

GitHub
★21,907 · ⑂1,145
前作
react-tween-state（★1.7 千）

Freerange ↗

2026.04TypeScript静态分析

「Statically verify your layout code.」它会告诉你 TypeScript 代码里每一个 number 的取值范围，从而找出潜在的 NaN、Infinity、除以零和数组越界。

设计原则很克制：使用官方 TypeScript API，不是新语言也不是分叉，不需要任何注解；在编译期运行，耗时只占 TypeScript 分析时间的一小部分；并且「由 Agent 对着几千个边界情况做过对抗测试」。README 里那句话点明了它的用意：AI Agent 从此可以不打开浏览器，就保证 UI 布局正确。

GitHub
★680

handwired ↗

2026.10TypeScript实验

「把普通 JavaScript 代码变成神经网络：无需训练、结果精确、并且完全可微。」程序由 if-else、循环和状态组成；handwired 把它们改写成矩阵乘法和 ReLU 的组合。比如 (a > 4) ? 10 : 12 可以写成两个 ReLU 的差再加权求和。整个程序最后汇成一个大矩阵乘法，可以在 JS 或 WebGPU 上运行。

GitHub
★1,866

ReasonML / ReScript ↗

Facebook 时期OCaml语言与工具链

Reason 给 OCaml 换上一套 JavaScript 开发者熟悉的语法，配合 BuckleScript 编译成可读的 JS。官方博客 2017 年 9 月宣布，Messenger.com 已有一半代码转成 Reason；后来社区演化出 ReScript。Cheng Lou 至今是 reasonml 和 rescript-lang 两个组织的成员。

其他项目年份是什么
sotaku202680 万参数的循环 Transformer，从零训练，在 2.5 万题的高难度数独基准上解对 99.12%
pure-css-shaders-art—「在艺术与糟糕性能的交界处」：纯 CSS 写的着色器艺术
react-treeview2013轻量灵活的 React 树形组件，★1.1 千
node-huxley2013无代码的前端截图测试

开源与 GitHub

GitHub 183 个公开仓库的语言分布（按仓库数）依次是 JavaScript、OCaml、TypeScript、Python、CoffeeScript，正好对应他的几个阶段：React 时代、Reason 时代、Pretext 时代，以及最近的机器学习实验。

星数最高的项目
仓库★时间一句话
pretext50,8642026快速、准确、全面的文本测量与排版
react-motion21,9072015一个解决动画问题的弹簧
handwired1,8662026把 JS 变成神经网络
react-tween-state1,7342014React 动画
react-treeview1,0982013React 树形组件
freerange6802026静态验证布局代码
chenglou.github.io5722013–2026个人网站源码

个人网站研究

chenglou.me ↗

页面标题就是「My Midjourney AI Art」：没有简历、没有博客，只有一张张他用 Midjourney 生成的图，提示词作为图注，比如「Jupiter planet sitting on a chair on Saturn」「Miniature watermelon delicately balanced on fingertip」。

但这个网站真正的作品是交互本身。源码 README 写得很直白：这是一个「为了展示闪亮的 UI/UX 细节」而做的画廊，并逐条列出了十几项细节，每项都配了一段演示视频。

README 里列出的交互细节（节选）

细节做法
可打断的过渡动画进行中也能继续操作，不会被锁住
与布局解耦的点击区域线性浏览模式下，左右点击区域纵向延伸到窗口边缘；过渡时点击区不跟着图片移动，快速连点也不会误关画廊
按面积而非宽度定尺寸同样宽度下方图显得更大、长图显得更细，所以缩小前者、放大后者，让视觉分量更均衡
缩放窗口时锚定调整窗口大小时没有布局跳动，正在看的那张图不会跑掉
与帧率解耦的动画低端设备掉帧时，过渡依然准时完成
连续的悬停效果光标像磁铁一样吸引图片，而不是一次性的上浮
好看的全选Cmd+A 不会破坏页面的样子
遮挡剔除只渲染视口内的内容，给 DOM 操作量设一个硬上限
无障碍可选的减弱动态效果
细节即作品

这份清单本身就是一份交互设计教材：每一条都是用户说不出来、但会实实在在感受到的「顺」。

网站托管在 GitHub Pages 上，源码仓库从 2013 年一直更新到 2026 年。Pretext 的演示（/pretext）和 handwired 的演示（/handwired）也挂在这个域名下。

观点与方法

A spring that solves your animation problems.

— react-motion README

It implements its own text measurement logic, using the browsers' own font engine as ground truth (very AI-friendly iteration method).

— Pretext README
  • 换一个模型看问题。动画不一定要用「时长」描述，用「物理」描述就自然可中断；排版不一定要问 DOM，自己算也可以算准。
  • 警惕过早抽象。《On the Spectrum of Abstraction》的核心是：抽象是一条光谱，越抽象越强大，也越难懂、越难改，要根据问题选择站在哪里。
  • 给 AI 一个真值。可自动对照的基准，让 AI 辅助开发可以不断逼近正确答案。Pretext、Freerange 都是这样做出来的。
  • 演示即文档。Pretext 的演示页、chenglou.me 的视频清单，都让底层能力变得人人能看懂。

长处与局限

维度长处局限 / 需要留意
影响力react-motion 和 Pretext 都改变了前端社区思考某类问题的方式很少写长文，观点主要散落在 README、推文和演讲里
工程从动画、语言到排版、静态分析，都能做到底层Pretext 等项目覆盖的语言和边界情况极多，用于生产前需要自行评估
设计对交互细节有近乎偏执的要求，并且能讲清楚为什么个人网站是作品集而非介绍页，初次访问者不易了解他的经历
AI 时代率先公开用 Claude Code、Codex 写底层库，并给出可验证的方法部分新项目（handwired、sotaku）仍是实验性质

可以从他身上学什么

  • 从感受出发做底层：先找到用户感受得到的不顺，再回头改造基础设施。
  • 把细节写下来：chenglou.me 的 README 把「顺」拆成一条条可以复用的做法。
  • 为基础设施做演示：好的演示让一个排版库变得人人都看得懂。
  • 让 AI 有据可依：先准备好可自动对照的真值，再让 AI 迭代。

推荐先看这三个

  1. chenglou.me ↗

    打开画廊，快速连点、调整窗口大小、全选，感受 README 里写的每一个细节。

  2. Pretext 演示 ↗

    看看文字绕图、杂志分栏这些「CSS 做不到」的效果。

  3. chenglou.github.io 的 README ↗

    一份可以直接拿来对照自查的交互细节清单。

去看看 Cheng Lou 本人的作品

去 chenglou.me 玩一玩那个画廊，然后读一读它的 README。

chenglou.mePretextGitHub

资料来源

  1. Cheng Lou 的 X 个人资料
  2. GitHub：chenglou
  3. Pretext README
  4. react-motion
  5. Freerange README
  6. handwired README
  7. sotaku README
  8. chenglou.github.io README（交互细节清单）
  9. Reason 官方博客：Messenger.com Now 50% Converted to Reason（2017）
  10. Pretext 报道（Pasquale Pillitteri）
  11. Pretext 报道（Cloud Magazin）
  12. chenglou.me

本页由公开资料整理，可能存在遗漏或过时之处；以本人公开发布的信息为准。