Who makes this, and why谁在做，为什么做
Effect Lab is a personal project: a place to keep visual effects I have written, explain how they work, and let anyone take the source away. There is no team, no sponsorship and no content generated to fill a page.特效实验室是个人项目：一个存放我自己写的视觉特效、把它们的原理讲清楚、并让任何人都能把源码带走的地方。没有团队，没有赞助，也没有为了填满页面而生成的内容。
The author
I go by BLACK online. I have been writing front-end code for a long time, mostly the unglamorous parts: layout, animation timing, and the small interactions that decide whether a page feels alive or dead. This site is where I keep the pieces I am still happy with.
You can see the source of this site on GitHub, including its commit history — the effects were added in batches over several years, not generated in one pass. For anything else, write to hello@blackgames.cn.
Where the content comes from
There are 131 effects on this site, and they are not all mine. The split matters, so here it is explicitly:
- 58 are written by me, line by line, in plain Canvas 2D and CSS. Each has a detail page with the source and a live demo, and each belongs to one of the ten long-form guides that explain the technique behind it.
- 73 are third-party demos from an old JavaScript exercise repository of mine, written by other people. They are kept exactly as the original authors left them — unmodified, unminified, no advertising inserted. They exist here as reference material: a way to compare my approach against the classic jQuery-era solution to the same problem.
The third-party demos are shown through an iframe and are explicitly marked noindex. They are not part of the site's editorial content and they are not presented as original work; the card titles and one-line descriptions next to them are mine, the code is not.
Why no libraries
Every effect here is a single file with no runtime dependency. That is a deliberate constraint, not a limitation of skill: a particle system in 40 lines is easier to read, easier to copy into someone else's project, and easier to explain than the same effect assembled from a physics engine and three plugins.
It also forces the interesting parts into the open. Writing a spring by hand means you have to understand damping. Writing perspective means you have to understand that projection is a division. Most of what the guides talk about came out of that constraint.
What the guides are for
The demos alone are a gallery. The guides are the reason the site is more than a gallery: ten articles on particles, force fields, fake 3D, text animation, blend modes, distortion, pointer interaction and procedural geometry. Each one walks through the actual numbers used in the demos and the trade-offs behind them, and each links back to runnable examples.
About advertising
The site is supported by Google AdSense. Advertising is limited to the pages I wrote myself — the home page, the guides, and this page. It is deliberately kept out of the third-party demos, because those are other people's work and monetising them would be both a licensing problem and a policy violation.
For details on cookies, consent and how to withdraw it, see the privacy policy.
Corrections
If something in a guide is wrong — a number that does not do what I claim, a browser where it breaks — I would like to know. Email is the fastest way. Small corrections get made and are listed in the changelog.
作者
网上叫 BLACK。写前端很多年，主要写那些不太光鲜的部分：布局、动画节奏，以及那些决定一个页面是「活的」还是「死的」的小交互。这个站是我还满意的那部分作品的存放处。
本站源码在 GitHub 上，提交历史也在——这些特效是几年里分批加的，不是一次生成的。其它事情可以写信到 hello@blackgames.cn。
内容从哪来
站上 131 个特效不全是我的。这个区分很重要，所以写清楚：
- 58 个是我写的，逐行手写，纯 Canvas 2D 与 CSS。每个都有详情页（附源码与实时演示），并且归属于十篇主题长文之一，由长文解释它背后的技术。
- 73 个是第三方示例，来自我一个早年的 JavaScript 练习仓库，作者是别人。它们被原样保留——没有改写、没有压缩、没有插入广告。放在这里的用途是参考资料：拿我的做法和当年 jQuery 时代的经典解法对照。
第三方示例通过 iframe 展示，并明确标记了 noindex。它们不属于本站的编辑内容，也不被当作原创呈现；卡片标题和那一行描述是我写的，代码不是。
为什么不用库
这里每个特效都是单文件、运行时不依赖任何东西。这是一个刻意的约束，不是水平不够：四十行的粒子系统比「物理引擎 + 三个插件拼出来的同一个效果」更好读、更容易被搬进别人的项目，也更容易讲清楚。
它还会把有意思的部分逼到明面上。手写弹簧，你就必须理解阻尼。手写透视，你就必须明白投影是一次除法。指南里讲的大部分东西，都是这个约束的副产品。
指南是干什么的
只有示例的话，这只是一个展厅。指南才是它不止于展厅的原因：十篇长文，讲粒子、力场、伪 3D、文字动效、混合模式、失真、指针交互和程序化几何。每一篇都过一遍示例里真正用到的数值，以及这些数值背后的取舍，并且都链回可运行的例子。
关于广告
本站由 Google AdSense 支持。广告只出现在我自己写的页面上——首页、指南、以及这一页。第三方示例里刻意没有广告，因为那是别人的作品，在上面变现既是授权问题，也是政策问题。
Cookie、同意以及如何撤回同意，见隐私政策。
勘误
如果哪篇指南写错了——某个数字并没有我说的那个效果，或者某个浏览器上会崩——欢迎告诉我，邮件最快。小的修正会改掉，并记进更新日志。
Start with the demos, or start with the explanation.从示例开始，或者从原理开始。
Read the guides阅读深度指南