18 个动效案例，全部用原生重写过。

文字按到视口聚焦线的距离决定明暗，越远越退后。

• 滚动扫描渐隐
• 视差
• 色温随滚动

刊头字距从 .46em 收到 .2em，像镜头在慢慢对焦。

• 字距收敛
• 影像推近
• 反向词带

两层星云各吃一套系数，滚动与鼠标同时驱动，方向相反。

• 双层星云反向视差
• 巨字升起

每行一个裁切窗口，内部从 104% 归位，逐行加延迟。

• 逐行裁切揭开
• 自转茶碗
• clip-path

conic-gradient 旋转加遮罩挖掉中心，做成一圈扫过的雷达。

• 雷达扫描
• 波纹
• 玻璃面板

一个滚动比例同时驱动 scale 与 blur，像镜头被推近。

• 滚动推镜
• 涡轮叶片
• 巨字被裁

右侧一条竖轨跟着滚动长出来，影像按区块做轻微位移。

• 斜射光
• 滚动进度轨
• 影像微视差

六层不同振幅与波长的正弦叠加，0.6 倍降采样，滚出首屏就停帧。

• canvas 六层水波
• 地平线
• 玻璃预订条

feTurbulence 加 feDisplacementMap，把丝带推进一团会呼吸的噪声里。

• 湍流位移
• SVG 滤镜
• 丝带球

十二列刻意错位，跑马灯位移取滚动值，复制一份内容实现无缝循环。

• 错位栅格
• 漂移影像
• 跑马灯

夜空渐变上浮着一枚会呼吸的月亮，登录卡片压在星点之上。

• 毛玻璃
• 呼吸光晕
• 滚动逐行渐显

米纸底配墨绿，价格全部走等宽字体，像账本而不是营销页。

• 等宽计价
• 实时估算
• 周期切换

三层波浪反向漂移，航标灯在底部缓慢起伏，巨型 404 悬在水面之上。

• 层叠波浪
• 航标灯
• 上浮气泡

原本的双张团队照换成 CSS 生成的几何面板，错位压在下缘。

• 错位面板
• 几何替代摄影
• 逐块滚入

整座城市用 40 个 SVG 矩形叠出来，远中近三层吃不同视差系数。

• SVG 天际线
• 三层视差
• 暮色湖面

夕阳是一层模糊的径向光斑，楼群带一道暖色逆光边，沉进暗场里。

• 暮色光晕
• 逆光轮廓
• 片头字幕

燕麦纸底配墨绿，山峦是三道多边形，田垄由旋转过的平铺纹样铺出来。

• 浅色山峦
• SVG 温室
• 田垄纹理

深墨底配电青，圆环描边走 42%，数字从 0 滚到目标值。

• SVG 进度环
• 数字滚动
• 可点测速