← Studio へ戻る

作業台

ここはハブの展示室ではなく、まだ削っている最中の試作を置く棚。気に入った断片は、後日 Works のどれかに混ざる。

#001 — 揺らぎ

同じ「ゆっくり流れる背景」を、3 つの技術で作り比べる。スライダーを動かして好きな速さと振幅に。

Drift / CSS

CSS の gradient と transform だけで流す。軽い、素直、ごまかしが効かない。

技術
技術
CSS
重さ
~1 KB
モーション量
low
ライセンス
MIT
0.35
0.35

Grain / SVG

SVG の feTurbulence で粒を立てる。色の境目が砂で曇る質感。

技術
技術
SVG + SMIL
重さ
~2 KB
モーション量
mid
ライセンス
MIT
0.40
0.65

Flux / WebGL

フラグメントシェーダーで連続体を描く。一番重く、一番遠くまで伸びる。

技術
技術
WebGL2
重さ
~6 KB
モーション量
high
ライセンス
MIT
0.30
0.40

#002 — 発酵中

タンクの中で麦の色が入れ替わる。淡い黄、濁った白、深い琥珀 — どれを注ぐかは自分で決める。Tipsy Tap の名のとおり、一杯が手元に来る前の景色を覗き込む実験。巡らせ続ける長尺版はスタジオの裏でずっと発酵している。

Brew / WebGL

3 種のビールを並べ、注ぎ口の手前にある色と温度の差を手で切り替えて見比べる。フラグメントシェーダー 1 枚の素振り。自動で巡る版はスタジオの背景で煮込んでいる。

技術
技術
WebGL2
重さ
~6 KB
モーション量
high
ライセンス
MIT
いま注いでいる

矢印キーで銘柄を切替

0.30
0.40

ここの試作が育ったら、Works の棚へ移します。気に入ったものがあれば、その断片を持っていって構いません(MIT)。