整份目录 — 76 个实时演示

适合放哪里：首屏标题、活动口号。

适合放哪里：品牌故事、生产叙述、案例研究。

适合放哪里：强调技术与创新的地方、章节标题。

适合放哪里：宣言文字、价值主张。

滚动试试看——各层以不同速度流动。用在哪里：系列与合集的标题。

把指针移上去——它会加速。用在哪里：公告条、活动。

实时生成的颗粒让平涂的颜色看起来像刚从印厂出来。用在哪里：高端与复古品牌。

它有什么用：让页面像一台活着的仪器或一间实验室的装饰性数据。Mammut 用的是登山者的 GPS 和心率——读者以为自己就在山上。我们用的是釜温：访客以为自己就在车间里。其中一部分数字是真的（时钟、您的滚动、您的指针），另一部分是气氛。用在哪里：以生产或实验室为主题的页面。

用在哪里：数据区块、"数字里的我们"。

把指针移上去——字母会一个接一个翻筋斗。用在哪里：菜单、重要链接。

把指针移上去。用在哪里：产品与系列的网格——这本该是每家店的标配。

滚动——一行行朝相反方向流动，并随滚动速度倾斜。用在哪里：章节分隔、宣言。

用在哪里：404 页、儿童与兴趣类品牌、"游乐场"板块。

抓住并拖动。用在哪里：情绪板与色卡的玩耍区、发布页。

用在哪里：章节开场、情绪强调的时刻。

同一段动画，两种节奏。有台阶感的那一种让人觉得是"手绘的"——这就是 2021 年度网站的秘诀。

用在哪里：换色或换系列的时刻、主题切换。

用酒单般的优雅来呈现技术内容。用在哪里：产品内容与参数细节。

填表不再是苦差事，而是在造一个句子。用在哪里：联系与申请页。

把指针移上去——它会加速。用在哪里：角标、"认证印章"区域。

用在哪里：高端与沉浸式体验。用得克制，会让站点变得"可触摸"。

一个 3D 模型，无穷种颜色。想想这在一个 234 色的目录里意味着什么。用在哪里：产品页头图。

那行字作为一张纹理，在显卡上被弯折。用在哪里：宣言段落、品牌口号。

液滴一碰到就像真液体那样融合——全都是数学。用在哪里：FarbeLab 式的高端开场。

滚动 = 胶片。场景贴在屏幕上，您往前走，镜头就跟着往前推。用在哪里：品牌历程的叙述。

一张看不见的风场把粒子拖着走；它们的轨迹变成颜料。用在哪里：会动的背景、404 页。

一颗内部漂着彩色液滴、真的会折射光的玻璃球。用在哪里：高端产品展示（FarbeLab）。

一个表面持续起伏、一碰就变形的 3D 生物体。用在哪里：首屏的中心物件、吉祥物。

442 个质点的真实布料模拟：重力、风和触碰。用在哪里：吊牌与旗帜场景、新品发布。

两张图像通过一张噪声图相互流入。用在哪里：画廊悬停、系列切换。

不是模仿而是物理：流体方程在每一帧都被求解（扩散、压力、涡量）。用在哪里：首屏开场——这是我们的签名。

粒子的位置存在纹理里，由显卡负责更新。E23 里是 9,000 个——这里是 262,144 个。

为每一个像素追踪一条光线：反射、折射、柔和阴影。用在哪里：高端产品场景。

辉光、镜头色散、暗角、胶片颗粒。这一层把目录里的每一个场景都往上抬一档。

两个独立的 3D 场景，一个在另一个里面。E27 是它的仿制品；这一个是真的（模板缓冲）。

一张照片 + 一张深度图 = 立体的错觉。用在哪里：工作室照片、产品拍摄。

72 帧提前备好并绑到滚动上——像视频，但控制权完全在您这边。

它会请求麦克风权限，不录音。用在哪里：展会展台屏幕、活动墙面。

那行字化成上千个立方体，被物理甩得四散，然后又自己聚拢回来。用在哪里：发布时刻、404。

同一个物体的一万份副本在一次绘制中完成。用在哪里：产能与规模的叙述，"巨型工厂"的感觉。

不是面而是体：光线穿过云团时一步一步收集光。最昂贵、也最具电影感的技法。

真正的土耳其大理石纹数学：每一滴都把底下的整幅纹样一圈圈推开；梳子按正弦波扫过。全世界没有第二家有——一个从我们自己的文化里长出来的签名效果。

肥皂泡上那些颜色的物理（薄膜干涉）。Metakrlyic 珠光漆的数字对应物。

报纸与丝网印刷的质感。用在哪里：带复古印刷气质的品牌、海报页。

用 Voronoi 单元生成的干涸颜料与做旧质感。用在哪里：复古系列、修复主题的叙述。

柔和、低对比的流动。用在哪里：长文段落、联系页、首屏下方。

两种化学物质扩散并发生反应（Gray-Scott）。斑马纹、珊瑚、一块颜料污渍——全都出自同一个方程。

在屏幕上蓝 + 黄 = 灰。在调色盘上蓝 + 黄 = 绿。差别来自光在颜料颗粒内部被吸收和散射；涂料工业从 1931 年起就用 Kubelka-Munk 方程计算它。右半边跑的正是那个方程。 对一个涂料品牌来说，没有比这更对的签名效果了。

水彩的标志性特征，那道 边缘的深色环 在这里不是画出来的——水分蒸发时颜料被拖到边缘并停在那里，它自己就形成了。纸的纹理也被算了进去：颜料会积在凹处（颗粒沉积）。

从每一个像素向场景里射出一条光线，光线在表面之间反弹，试图抵达光源。红墙旁边的白球 自己就偏向了红色 ——这不是画上去的，是光真的从那里弹过来才出现的。电影特效里用的那套方法，在浏览器里跑的版本。

笔触不是一个"印章"。420 根鬃毛每一根都像一根独立的弹簧：按下去会散开，转动时会落在后面，抬起来又收拢。痕迹出自鬃毛触到纸面的位置——所以没有哪一笔和另一笔一样。

一罐水在地面上投下的那张颤动的亮网。光在液面折射，在某些点上聚集；亮度就从这种聚集中产生。每一帧都会计算一次液面的斜率。

到流体模拟 障碍 被定义了：那些字母。颜料撞上它们、绕过它们的边缘，在它们身后留下涡流。您的品牌名不是场景的布景，而是物理的一部分。

日光下的两种涂料 完全一致 （ΔE = 0.0）。换到白炽灯下它们分开了，在荧光灯下差别 ΔE = 19——也就是说，一眼就看得出。行业里有专门的名字： 同色异谱失配 ——这正是"在店里看着对，回家就不对"这句抱怨的原因。这里用的是真实的 CIE 配色函数和真实的光源光谱；两种颜料的反射曲线被 求解成 被产生出来。

这里颜料不是颜色，而是 体积。每一笔都留下一个高度；光按那个面的斜率折射，刮刀边缘形成一道脊。油画从侧面看才看得见的那种浮凸。

不是在网格上，而是 780 个独立粒子 上求解的流体。每个粒子测量邻居的密度并推开或吸引；表面张力就此产生。液滴是真的在融合、在断裂——不是画出来的。

玻璃上的霜花、铜结晶和闪电共同的数学。随机游走的粒子在第一次碰到团块的地方冻住——所以尖端越长越大，内部却一直挨饿。 没有人画这个纹样，它自己就出现了。

光线进入玻璃，从背面射出——而每一种颜色 换一个角度 被折射。边缘那道彩虹镶边就是这么来的；和棱镜分光是同一回事。瓶子的形状也被定义成一个单一的数学曲面，没有模型文件。

给定一个颜色，要用哪些颜料 按什么比例 来调配。您在屏幕上看到的，正是涂料实验室里配色仪所做的事：Kubelka-Munk 算出混合色，比例被一步步修正，直到 ΔE 变小。 数字在实时滚动——答案是当场算出来的，不是从现成的表里读的。

涂料行业测量遮盖力的方法：在黑白卡上刮出一层由薄到厚的漆膜，再看黑底和白底读数之间的比值。 对比度超过 98% 时的那个厚度 就是"完全遮盖"的那个点。这里那个方程（带底色的 Kubelka-Munk）是逐像素求解的。

人眼能看到的全部颜色都落在这块马蹄形区域里。三角形才是您的屏幕能显示的那一部分。 三角形之外的每一种颜色，在您屏幕上都在说谎 ——有些真实颜料就正好落在那儿。这是告诉客户"您在屏幕上看到的颜色并不是它本身"最诚实的方式。

"干了以后颜色变浅了"是最常见的抱怨，而这并不是涂料的毛病：湿的时候水和媒介填满颜料颗粒之间的空隙，光散射得少，颜色 深而饱和 显现出来。水一走，空气补上来，散射增强，颜色 变浅并变哑。这里散射系数随时间上升，剩下的就是方程的事了。

织物不是一种纹样，而是一份 一份指令：哪一根经线压在哪一根纬线上面。这里跑的是真实的织物组织循环——平纹、斜纹、缎纹、人字。循环一变布就变；纱线颜色一变纹样就变。这正是纺织 CAD 软件的内核。

影子不是"为了好看"才放的：针对所选的 纬度、日期与时刻 计算太阳的高度角和方位角，再把光放到那里。这和建筑事务所为相邻地块做遮挡与日照分析时所做的计算一模一样。

无论荷载落在哪里，每一根杆件里的力 当场解出：红色是受拉，蓝色是受压，粗细代表力的大小。背后是真正组装起来的刚度矩阵和被求解的方程组——静力学课程的直接应用。透明的轮廓显示的是被放大过的变形。

这不是动画：一个小小的人工神经网络 此刻正在您的浏览器里训练。有颜色的区域是模型的判断；每一帧都在跑反向传播，误差下降，边界弯折，直到学会把两团点分开。对软件或科技品牌来说，这是说出"这活我们真的在做"最短的一条路。

散落在空中的数百个物体， 只有从一个视点 对齐并组成那行字。这是文艺复兴时期发现的错视画法；每个物体都被放在穿过那一台相机的光线上不同的深度处。给艺术、画廊和体验空间的项目量身定制。

60 个站点、一辆车、最短的一趟。可能性多到计算机无法用蛮力逐一尝试（60 个站点的排列比宇宙中的原子还多），所以 正在改进：找到两段交叉的路径并把它翻转过来，一趟路线就越走越短。每一家做配送的企业，油费账单都在这个计算里。

一年的轮盘：每种产品的采收窗口，外圈是真实的 昼长曲线 一起。昼长是按纬度算出来的——不是装饰性的波浪，而是农业自己的日历。它一眼就回答了"现在什么最新鲜？"这个问题。

食品科学里的 Q10 法则：温度升高 10 °C，变质速度就成倍增加。这个方程就在这里运行——改变温度，看保质期怎样融化。下面是"冷链断一天会损失什么"的计算。这是向客户讲清储存条件最有说服力的方式。

橄榄油、蜂蜜、葡萄糖浆——每一种流动的样子都不同，而客户想在视频里看到。液滴在什么时候断开、 按照 Tate 定律 被算出来：液滴在自身重量胜过表面张力的那一刻断开。稠的液体会在身后拖出一根丝，稀的不会。

用于橄榄油、咖啡、蜂蜜和葡萄酒 感官评审 的呈现。当两个产品的轮廓叠在一起，就看得出哪里相同、哪里分开。用展示代替"我们的更有果香"这句话——只有这个能解释价差。

木纹不是一个纹理文件， 原木的几何。这里年轮是按三维定义的，再和木板锯开的那个平面求交：顺着髓心锯得到直线，切向锯就出现大教堂拱——每个木匠都知道的真实差别。树种一换，年轮间距、颜色和管孔质感也跟着变。

同一块木头，三种不同的清漆。差别不在颜色， 在反射的分布上：哑光表面把光散得很开，亮光表面则把光聚得又窄又锐。"哑光还是亮光"这个问题，客户只有把两者并排看到才答得上来。

家具电商里最常听到的一句话："我没想到会这么大"。把产品 和一个身高 1.75 米的人在同一个画面里 并用正确的透视呈现出来，这个问题就结束了。它随距离变小，尺寸实时标注出来。

盒装家具的退货和售后压力，大部分来自安装。把零件如何拼合 立体地、一步一步地 展示出来，既直接影响购买前的信任，也影响售后的支持。机械和备件行业用的也是同一套做法。