LLLAZ Atelier

界面 · 字体 · 实时渲染

把想法 做成可以摸的 东西。

这是一个前端与视觉的实验场：排版、动效、着色器与实时 3D。 页面里没有第三方脚本，没有 CDN，three.js 走本地托管；首屏之外的一切按需加载。

运行
零外部请求
渲染
WebGL / three.js
排版
系统字体栈
体积
首屏 < 30 kB
下滑

01 / 空间

一块会呼吸的玻璃

下面这个画面是实时计算的：二十面体、粒子尘、两盏色光，随指针轻微偏移。 鼠标移进去试试，切换明暗它也会换一套配色。

02 / 作品

选几件自己在反复用的东西

  1. 01 排版系统 两端对齐的中文度量、字距与行高的手感，靠 clamp 和字重撑住层级。 CSS
  2. 02 动效语法 入场只做一次，滚动用 IntersectionObserver，尊重 prefers-reduced-motion。 JS
  3. 03 实时渲染 three.js 本地托管、按需加载，离屏暂停，DPR 封顶 2，移动端自动降级。 WebGL

03 / 方法

克制，然后是克制地炫耀

先算体积

先决定首屏要多少字节，再决定用什么。动画能交给 CSS，就不写 JS；能用 SVG，就不上图片。

再谈效果

3D 不是为了炫技，是为了让人相信这东西真的在动。所以它反应指针、跟随主题、不可见时立刻停下。

最后是可维护

一套 CSS 变量撑起两套主题，一个模块负责一件事。半年后回来改，还认得出自己写的什么。