动效

我用自己写的动画库 noah-motion 做的原创动效。每一帧都是代码实时算出来的,没有一帧视频素材,可以暂停,也可以拖到任意一帧。

OPEN SOURCE · MIT 开源协议

noah-motion

基于纯函数时间轴与闭式解物理弹簧的代码级动效引擎,网页与 60 帧视频同源渲染

零外部依赖闭式解物理弹簧任意时刻精准 seek(t)60fps 视频直出

用我的内容做的

我的作品、签名和推特数据。

01

提示词变图片

首页开场。一个黑点长成名字,变成输入框打出提示词,点击发送后变成我的作品,再收回成黑点。

tracktimelinespring
02

去噪生成

模仿扩散模型出图:从一片彩色噪点开始,分 30 步算清楚。旁边是步数和噪声强度曲线。

timelinecanvaseaseInOut
03

Token 概率采样流

可视化大模型自回归逐词生成:每一步实时弹出 Top-3 候选词与 Softmax 概率条,最高概率词高亮锁定并弹入上方提示词流。

trackspringsoftmax
04

潜空间插值漫游

探针在二维潜空间 (z₁, z₂) 的四个风格簇之间平滑游走,实时计算高斯距离并插值混色球体与风格权重。

springmixColormanifold
05

闪光点

我的签名。逐字落下,一道光扫过,“闪光点”三个字变色、冒出星光,最后整句散开。

trackspringstagger
06

磁吸程序坞

虚拟光标滑过创意工具栏,图标按高斯距离曲线与物理弹簧联动放大抬升,点击时触发果冻回弹反馈。

springgaussiantrack
07

作品叠卡

五张作品叠成一摞,最前面那张划走、回到最底下,其他依次上前。转完一圈正好回到原样。

trackspring
08

热度榜

用我推特的真实浏览量,前 6 条内容的柱子依次长出来,数字跟着柱子一起涨。

springtrack真实数据
09

我几点发推

用我推特真实的发帖时间(北京时间):指针扫过 24 小时表盘,经过哪个小时那根柱子就弹出来,最后最活跃的时段亮起来。

springtrack真实数据
10

物理弹簧 vs 贝塞尔

同屏对比闭式解物理弹簧(带瞬时速度矢量与动量超调回落)与传统 CSS 三次贝塞尔曲线的运动质感差异。

springvelocityeaseInOut
11

弹簧手感

四种回弹程度同时出发。浅色的线是每条弹簧的位置曲线,停稳后显示用了多久。

springsettlevelocity
12

noah-motion 片头

动画库自己的片头。同一段代码在仓库里可以直接导出成 1080×1080、60 帧的视频。

trackmixColorrender

动画实验

noah-motion 作品廊里的 41 个场景,在动画库的演示站也能看到。

13

极光标题

几团彩色光晕沿各自的轨迹缓慢流动,标题逐字从模糊里升起,再逐字沉下去。

trackstaggercanvas
14

主图卖点

电商主图:精华从展台升起,卖点沿引线依次弹出指向瓶身各处,价格滚动降下来,印章砸下,最后按下“立即购买”。

springtrackvelocitystagger路径描线
15

扩散出图

提示词逐字打进输入框,点下生成,画面从纯噪点一步步去噪,30 步后定格成一张黄昏海边的照片。

springtrackcanvas确定性随机
16

水墨晕染

墨滴落在宣纸上晕开,浓淡分明、毛边顺着纸纤维渗出;晕开的墨再收拢进笔画,沿字形流成一行书法标题,最后盖上一方小印。

canvas距离场trackspring
17

烟花

江边夜景:烟花拖着火星升空,炸成菊花、牡丹、土星环、交叉双环、闪光和金色垂柳。星点按三维球面发射,带阻力、重力和风,炸开时照亮天空、烟雾和楼顶,余烬闪着落下,水面倒映整片夜景。

canvas闭式物理wrap确定性随机
18

线框变成品

灰色线框页面被光标一块块点选,选中框在元素之间弹性变形,填上颜色、文字和图片,最后整张页面浮起展示。

trackspringstaggerclip-path
19

图层爆炸

一张做好的海报斜着倒下,背景、装饰、主体、文案、按钮五层沿 Z 轴浮起并标出层名,选中框逐层扫过,最后合回成品。

springtrackstaggerCSS 3D
20

取色板

放大镜取色器在画面上扫过、一处处落下,颜色粒沿弧线飞进色板展开成色条,色值逐位滚出;取齐后按明暗排序,再用这五色把画面套色一遍。

trackspringstaggercanvas
21

毛玻璃卡片

天气、电台、日程、亮度四张磨砂玻璃组件浮在流动的光球上,散开、换位、叠起、错开;边缘高光随位置转向光源。

track × 18springvelocitybackdrop-filter
22

窗外一天

窗外从午夜走到正午再回到夜里:天色、日月、星星、云和远处的灯光一起变化,屋里入夜后亮起落地灯。

timelineloopSVG
23

节点工作流

出图用的节点依次弹出、贝塞尔连线画出来,运行后节点逐个亮起打勾,光点沿连线流动,预览从噪点慢慢变清晰。

trackspringstagger贝塞尔弧长
24

胶囊变形

锁屏顶部的黑色胶囊在待机、计时、正在播放、新消息之间变形,尺寸由弹簧驱动,内容在形状到位时淡入。

trackspring形变
25

提交图

Git 提交图从最早的提交往上长:主干逐个亮起,分支长出、并行、再合并回来,提交信息和短 hash 逐条出现,分支标签跟着最新提交走。

trackspringstaggerSVG mask
26

琥珀融球

六颗琥珀色的液态玻璃滴依次黏成一大团,晃一晃再被拉开,中间扯出细丝、断开缩回。透过液滴能看到被放大的底纹和它自己的影子。

springtrack距离场marching squares折射canvas
27

相机对焦

手机相机的取景界面:点一下花瓶,对焦框落下、缩小、变黄,焦点从窗外拉到花瓶,背景散成光斑;按下快门一闪,照片缩进左下角的相册。

trackspring景深模糊canvas
28

风过吊牌

一阵风从左边吹过一排纸吊牌,牌子依次被推开、在风里抖、带着跟随甩回来;长绳的两张被拧得翻了面,回头风再把它们翻回来。

springtrack叠加冲击跟随周期折回CSS 3D
29

粒子成字

上千个粒子按从左到右的波浪聚成文字,再按黄金角炸成一个旋转的螺旋盘,最后散回原处。

trackspring每个粒子一条轨道
30

纸飞机

一架有折面明暗的纸飞机在三层云之间滑翔、横滚、翻筋斗、俯冲,镜头跟着飞,翼尖拖出一条会跟着翻滚拧转的尾迹带。

springtrackcubicBezier透视投影视差canvas
31

翻页站牌

像机场的翻页牌:上半片带着旧字翻下来,背面就是新字的下半截;3D 翻转带明暗和投影,按列错峰,先快速翻过几张再用弹簧落定、轻轻回弹。

springstagger3D 翻转确定性随机
32

形状变形

一块软糖在圆、圆角方、心、星、云之间变形:轮廓按弧长等点重采样、起点对齐后插值,蓄力、弹起、落地都带着果冻般的回弹。

springtrack等弧长重采样canvas
33

节拍

黑胶在转,外圈一环频谱跟着四小节的鼓点跳:柱子带着重力回落、峰值帽停一下再掉;右边的鼓机逐步点亮,第四小节滚奏推回开头的重拍。

spring 脉冲track周期折回canvas
34

拨弦字

一行字坐在一根弦上。拨片用弹簧把弦拉成三角形再松开,弦按达朗贝尔解振动:折角往两头跑、碰到琴码翻面折回;字随弦起伏倾斜,跑得快的字被染红。

达朗贝尔解trackspringmixColorcanvas
35

涟漪点阵

斜看过去的点阵水面上落下十滴彩色的雨:光痕、闪光、光晕、溅起的水珠,再按距离延迟扩散成椭圆涟漪,几圈相遇时颜色相加、波峰重叠处亮成白色。

spring 脉冲按距离延迟透视投影wrapcanvas
36

AI 对话

发一句话,对方显示“正在输入”,回答逐字出现,最后弹出“复制”按钮。气泡从发出的那一角弹出来。

springtrack逐字显示
37

翻牌拼图

40 块方砖沿对角线依次 3D 翻转,背面拼成一张完整的图,停留后再反方向翻回来。

track × 403Dstagger
38

排行赛跑

六个标签的热度逐月增长,柱子按数值实时排序,名次一变就带着弹簧换位,坐标轴跟着最大值缩放。

trackspring实时排序
39

万花筒

只画一片 30° 的楔形,旋转复制、隔片镜像成 12 瓣:冷色的光纱叠出底色,金色波浪环、透镜薄片和扇形细线一代代从中心长出来,随呼吸般的节奏向外绽开,滑过镜线时分开又合拢。

timelineloop镜像对称周期折回canvas
40

布局变换

12 张卡片在一摞、网格、圆环、波浪线之间变换,每张按序号错开出发,像一群有先后的小东西在走位。

track × 48staggerspring
41

乘法弦图

圆周上 180 个点,第 i 个连到第 i × k 个。k 从 2 走到 7,依次停在心脏线、肾形线和各种外摆线上。

timelinecanvas数学
42

印章

宣纸上竖排的字从上往下写出来,一方红印从空中落下,盖下去时压扁一下,留下带纸纹的印迹。

spring挤压与回弹SVG 滤镜
43

解码文字

每个字先在乱码里跳动,再从左到右依次锁定成正确的字,锁定时亮一下;停留后重新打乱,换下一句。

timelinestagger确定性随机
44

控件手感

开关、勾选、滑块、分段、点赞、步进器依次被点一下,每个都有自己的弹簧手感,点击处泛起波纹,之后再依次复原。

springtrack微交互
45

星轨

几颗星体沿倾斜的椭圆轨道运行,拖着渐隐的尾迹。每条轨道的周期都能整除总时长,整段无缝循环。

timelineloopcanvas
46

滚轮数字

每一位都是一条滚轮,数值由弹簧驱动。滚得越快越模糊,模糊程度直接来自弹簧的速度。

springvelocitytrack
47

呼吸

一朵半透明的光花跟着“吸气 · 屏息 · 呼气”开合:三层花瓣反向旋转、由内向外依次舒展,弹簧跟随让外层慢半拍并轻轻回弹,光点随呼吸被吸入、吹散。

spring 跟随trackstaggermixColorcanvas
48

三折页

一张折起来的卡片,左右两页沿折痕带透视依次展开,内容逐个弹出,再原样折回去。

track3D 透视spring
49

活跃热力图

30 周的每日格子沿对角线依次弹出上色,总数跟着涨;一道高亮走过最长的连续天数,最活跃的那天弹出提示。

springstaggertrack
50

数据生长

一周浏览量的折线图自己画出来:线头经过的点依次弹出,提示框跳到最高点,总数跟着线一起涨。

springtrackSVG
51

几何构成

包豪斯风格:圆、半圆、三角、色条从画面外带着旋转飞进来拼成一幅构图,停留时轻轻呼吸,再各自退场。

trackspring构图
52

樱花雨

花瓣带着摆动和翻转缓缓飘落,近处大而快、远处小而慢。每片的轨迹都是周期的,永远在下,却能无缝循环。

timelineloop景深
53

路线

简笔地图上四个地点依次落下图钉,路线沿街道画出来,小圆点走过去,距离一起累加,到终点泛起波纹。

spring路径长度SVG

输入关键词开始搜索