液体と有機 · 水のように
流体の球流体球
- 質感
- ガラス
- 反応
ガラスの球の中で何層もの色が交差して流れ続け、表面のハイライトがポインタを追います。ポインタを動かすと球が少し回ったように見えますが、動いているのはハイライトで、球そのものではありません。
使いどころ
実体のないものを主役にしたい場所に使います。AI アシスタント、読み込み中、音声認識中などです。立体感はハイライトがポインタを追うことで成立するので、ポインタのないタッチ画面では既定のハイライト位置を決めてください。また、小さくしないでください。120px を下回ると色の付いた点にしか見えず、中で流れているものが分からなくなります。
パラメータ
orb Ø164px · 4 colour bands · sine-warped edges · sine-eased, per-frame loop · additive (lighter) · specular follows pointer, 140ms lag
レシピ
流体の球 → 140ms流体の球 → orb Ø164px · 4 colour bands · sine-warped edges · sine-eased, per-frame loop · additive (lighter) · specular follows pointer, 140ms lag
AI に渡す一文
流体の球を作ってください。直径 164px の円の中に 4 層の色帯を置き、各層の上下の境界を周波数の異なる 2 つの正弦で揺らして、交差しながら流れ続けるようにします。4 層は暗い下地の上に lighter（加算）で重ねます。ライトモードでも球の中の下地は暗いままにしてください。加算で重ねると明るい下地は純白に飽和し、色帯が見えなくなります。ハイライトは 2 つに分けます。1 つはポインタを追うもの（140ms の一次遅れで、直接貼り付けない）、もう 1 つは下縁を締める固定の内側の影です。最後に円のすぐ外側へ 1px の縁の反射を足すと、円盤ではなくガラスに見えます。