Build it yourself, not with a library自己写，而不是找个库
Every effect on this site is a few dozen lines of Canvas 2D or CSS. These guides explain how the ones that look hard actually work — the geometry, the maths, and the numbers worth changing. Each guide links to the demos it talks about, and every demo runs in the browser without a build step.本站每个特效都是几十行 Canvas 2D 或 CSS。这十篇指南拆的是那些「看起来很难」的效果到底怎么实现——几何、数学，以及哪些数值值得改。每篇都链到文中提到的示例，所有示例都无需构建、直接在浏览器里跑。
A particle is four numbers and a deadline粒子就是四个数，加一个截止时间
Every particle effect on this site — the firework shell, the fountain, the falling snow, the confetti — is the same program with different numbers. Once you see the shared skeleton, the hard-looking ones stop being hard.本站所有粒子类效果——烟花、喷泉、飘雪、纸屑——是同一个程序换了不同的数字。看清这具骨架之后，那些看起来很唬人的效果就不唬人了。
02 · MotionOne force, six pictures一个力，六张画面
Particles falling in a straight line are boring. But you do not need six different systems for six different looks — you need one force, applied with different geometry. These six demos differ mostly in what they divide by.按直线掉落的粒子很无聊。但六种观感不需要六套系统——你只需要一个力，配上不同的几何。这几个示例的差别，主要在于它们除以了什么。
03 · PerspectiveFake 3D on a flat canvas在平面画布上伪造 3D
None of these demos has a 3D engine. The tunnel is circles at decreasing scale, the starfield is dots moving outward, the cube is six CSS planes. What they share is a single idea — divide by depth — and a discipline about draw order.这几个示例里没有一个 3D 引擎。隧道是逐渐缩小的圆环，星空是往外飞的圆点，立方体是六个 CSS 平面。它们的共同点是一个想法——除以深度——和一条关于绘制顺序的纪律。
04 · TextText that moves: typing, per-character animation, and the terminal rain会动的文字：打字、逐字动画与终端数字雨
Text is the easiest thing to animate badly. The effects that look effortless on this site are all one of three techniques, and picking the wrong one is usually why a text animation feels cheap.文字是最容易被做丑的东西。本站那些看起来毫不费力的效果，全都属于三种技术之一，而选错技术，通常就是文字动效显廉价的原因。
05 · TextWhen text stops being text当文字不再是文字
There is a point where typography turns into an image. The trick is knowing which side of that line you are on — because the sampling approach and the CSS approach optimise for completely different things.排版走到某一步就变成了图像。诀窍是判断自己站在线的哪一边——因为采样和 CSS 这两条路，优化的东西完全不同。
06 · ColourThe one canvas setting that makes everything glow一个 canvas 设置，让所有东西都发光
Most of the "expensive looking" effects here are not expensive. They are circles with a radial gradient, drawn with additive blending. Understanding that one mode explains fire, auroras, kaleidoscopes, metaballs and neon text.这里大部分「看起来很贵」的效果其实都不贵。它们就是一圈带径向渐变的圆，用加色混合画出来。理解那一个模式，火焰、极光、万花筒、融合光球和霓虹字就全解释了。
07 · TextureWhy broken looks expensive为什么「坏掉」看起来很贵
A perfectly clean image reads as a render. Add scanlines, grain, or a burst of slice displacement and it reads as a recording of something real. These four effects are the cheapest way to buy that feeling.一张完美干净的图读起来像渲染。加上扫描线、颗粒，或者一阵切片位移，它就读起来像「某个真实东西的录像」。这四个效果，是买到这种感觉最便宜的方式。
08 · InteractionTreating the pointer as a signal, not an event把指针当作信号，而不是事件
A click is a discrete event: it happened, then it is over. Pointer movement is a stream, and everything interesting about these five effects comes from treating it that way — sampling it, buffering it, and letting it decay.点击是离散事件：发生了，然后结束了。指针移动是一条流，这五个效果里所有有意思的地方，都来自把它当成流来处理——采样它、缓冲它、让它的残留衰减。
09 · InteractionThings you can grab, poke and peel能抓、能戳、能刮开的东西
An effect that responds to the pointer is not automatically interactive. What makes these five feel like objects is that they have boundaries, weight, and a defined state for "being held".对指针有反应，不等于可交互。让这五个效果像「东西」的，是它们有边界、有重量，而且「被抓住」是一个明确的状态。
10 · GeometryShapes nobody drew: recursion, displacement and polar coordinates没人画过的形状：递归、位移与极坐标
Everything else on this site is a loop over particles. These four are a loop over structure: a bolt that subdivides itself, a tree that calls itself, a spiral that is one equation, and a pulse that is one phase offset.本站其它东西都是对粒子的循环。这四个是对结构的循环：一棵自己分裂的闪电、一棵调用自己的树、一条只有一个方程的螺旋、一圈只差一个相位的脉冲。