モーション

自作のアニメーションライブラリ noah-motion で制作したオリジナルモーションです。動画ファイルを一切使用せず、全フレームをコードでリアルタイム描画。一時停止や自由なフレームシークが可能です。

OPEN SOURCE · MIT LICENSE

noah-motion

純粋関数タイムラインと解析的物理スプリングによるコードレベル動効エンジン

依存ゼロ (Zero-dep)解析的物理スプリング任意時点の精密シーク seek(t)60fps動画直接出力

オリジナルコンテンツ

作品、シグネチャ、Xの統計データを活用したモーション。

01

プロンプトから画像へ

ホームページオープニング。小さな点が名前に広がり、プロンプト入力ボックスに変化して送信後、作品画像へと展開され再び点に戻ります。

tracktimelinespring
02

デノイズ生成

拡散モデルの描画シミュレーション:カラーノイズから始まり、ステップ数とノイズ曲線を伴いながら30ステップで鮮明な画像へ収束します。

timelinecanvaseaseInOut
03

LLMトークン確率ストリーム

自己回帰型言語モデルのサンプリング可視化:各ステップで上位3候補のSoftmax確率バーがリアルタイムに表示され、選択されたトークンが文章へと紡がれます。

trackspringsoftmax
04

潜在空間の探索

2D潜在多様体(z₁, z₂)上をプローブが移動し、4つのスタイルクラスター間をリアルタイム補間しながら色彩やスタイル比率を変化させます。

springmixColormanifold
05

閃光(スパーク)

アイデンティティ演出。一文字ずつテキストが落下し、光のビームが横切り、「閃き」が星屑とともに輝いたのち静かに拡散します。

trackspringstagger
06

マグネティックDock

バーチャルカーソルがDock上を滑らかに移動。アイコンがガウス近接曲線に沿って拡大し、スプリング物理演算による自然な弾性を描きます。

springgaussiantrack
07

カードスタック

5枚の作品が立体的に重なり、前面のカードがスワイプで最背面に回り込み次の作品が前面へ。完全に一周して元の位置へと戻ります。

trackspring
08

人気ポスト

公式Xアカウントの実際のインプレッション数。上位6件のバーが順次伸び上がり、数字がリアルタイムにカウントアップします。

springtrackリアルデータ
09

投稿タイムライン

Xでの実際の投稿時間帯(日本・韓国時間/北京時間対応):24時間盤上を針がスイープし、通過した時間のバーが弾み、最もアクティブな時間が発光します。

springtrackリアルデータ
10

スプリング vs ベジェ

解析的物理スプリング(速度ベクトルと自然なオーバーシュート)と、CSSの固定キュービックベジェ曲線を並べて比較できる物理検証ツール。

springvelocityeaseInOut
11

バウンス弾性比較

反発係数の異なる4種類のスプリングが同時にスタート。時間の経過に伴う軌跡を描き、静止するまでの減衰時間を可視化します。

springsettlevelocity
12

noah-motion イントロ

ライブラリ公式イントロ。リポジトリから1080×1080、60fps動画へと直接書き出せるコードと同一の構成です。

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

キーワードを入力して検索を開始