A1 · 前端动效 · 必看
黑客帝国式的 404 页面概念
看哪里看绿色字符雨组成的走廊向前推进，尽头的「404」从字符墙里浮出来。
Nigel 判断
- 可学
- 把错误页做成一段有纵深的空间镜头，用户迷路时先被画面接住，而不是只看到一行报错。
- 新
- 404 字样不是贴上去的，而是由同一套字符雨“长”出来，场景和信息是一体的。
- 套路
- Matrix 字符雨是老梗；原帖自称 concept，能不能做成轻量的线上页面还看不出来。
前端 UI 与动效
A2 · 前端动效
用 CSS 滚动驱动动画转动 emoji 球
看哪里看右侧标注：上方一个看不见的滚动容器，横向滚动转球、纵向滚动倾斜，只有朝前的那一面 emoji 被构建。
Nigel 判断
- 可学
- 手势交给原生滚动，再用 CSS scroll-driven animation 映射成旋转；只渲染正面，背面的元素直接剔除。
- 新
- 作者把原理直接做成带箭头标注的拆解片，读者一眼能看懂“隐形滚动层 + 剔除”的结构。
- 套路
- 3D 球形 emoji 选择器本身不算新，新的是实现方式。
插画与 3D
F1 · 插画3D
mrdoob Codevember 03 Melt
看哪里看几何体在柔光下慢慢塌下去、摊成一滩，再换成下一个形状。
Nigel 判断
- 可学
- 粉紫渐变底、单点光源和柔和阴影，让程序化形变看起来像实物。
- 新
- Codevember 一天一作，看的是完成度；形变本身没有新招。
- 套路
- 融化、软体效果的 three.js demo 很常见。
F2 · 插画3D
Blender + Godot 做的等离子球
看哪里看玻璃球里的电弧：粉紫色的光束在内外两颗球之间扭动，边缘更亮。
Nigel 判断
- 可学
- 原帖说用的是“Fresnel-inspired trick”：越靠近边缘越亮，几笔就有了玻璃和发光感。
- 新
- 不新，是成熟的 shader 技巧，胜在做得干净。
- 套路
- 科幻实验室道具、发光电弧是常见题材。
作品作者是 emitc2h，jettelly 转介绍；链接指向 jettelly 原帖。
原帖 · x.com/jettelly ↗