自動で動く・WebGL

• 
  A2流体（自動で絵の具を落とす）飲料ブランドの最初の画面
• 
  A10浮遊するガラスの物体（背後が屈折）化粧品の最初の画面。浮遊するガラスの瓶

重さ →重さ ↓ ↑ 驚き驚き → ほぼ0軽中重 ★★★★★★

A8A17A18A22A23A28 6

A4 1

A1 1

A19A20A21A29 4

A3A7A9A24A25 5

A11A13A15A26 4

A16 1

A27 1

A5 1

A12 1

A6 1

A2A10A14 3

作例あり このサイトで動作中 見立てに幅がある（幅の真ん中に置いています） 数字はその升の件数です。押すと、その升の表現だけを下の一覧に出します。

1. A1
   粒子入りのメッシュグラデーション

   シェーダー1枚（Stripe 方式）／CSS

   重さ 軽〜中 驚き ★1〜2

   参考：shaders.paper.design/mesh-gradient

2. A2
   流体（自動で絵の具を落とす）

   WebGL の流体計算（MIT）

   重さ 重 驚き ★3

   作例を動かす
3. A3
   絹・大理石・墨流しのように流れる模様

   domain warping

   重さ 軽〜中 驚き ★2

   参考：iquilezles.org/articles/warp

4. A4
   オーロラ

   重さ 軽〜中 驚き ★1 このサイトで動作中質感の見本市 T047

   参考：reactbits.dev/backgrounds/aurora

5. A5
   霧・雲・光の筋

   2D シェーダー／レイマーチング

   重さ 中〜重 驚き ★2〜3

   参考：threejs.org

6. A6
   水面・コースティクス（光の網目）

   簡易版は2D シェーダー

   重さ 中〜重 驚き ★3

   参考：madebyevan.com/webgl-water

7. A7
   等高線がうねる背景

   シェーダー／marching squares

   重さ 軽〜中 驚き ★2

   参考：motion.dev

8. A8
   光が周回する枠

   @property＋conic-gradient

   重さ 軽 驚き ★1

   参考：shaders.paper.design/pulsing-border

9. A9
   星空・銀河

   重さ 軽〜中 驚き ★2

   参考：threejs.org

10. A10
    浮遊するガラスの物体（背後が屈折）

    Three.js の transmission

    重さ 重 驚き ★3

    参考：threejs.org

    作例を動かす
11. A11
    Liquid Glass（UI の下が歪む）

    SVG の feDisplacementMap。Chromium のみ確実

    重さ 中 驚き ★2

    参考：kube.io/blog/liquid-glass-css-svg

12. A12
    リキッドメタル・メタボール

    2D シェーダー

    重さ 軽〜中 驚き ★3

    参考：shaders.paper.design/liquid-metal

13. A13
    製品の自動回転

    model-viewer

    重さ 中 驚き ★2

    参考：modelviewer.dev

14. A14
    ガウシアンスプラット（実写の3D空間）

    Three.js＋Spark。データが重い

    重さ 重 驚き ★3

    参考：antimatter15.com/splatsparkjs.dev

15. A15
    地球儀（拠点を光の線で結ぶ）

    COBE は5KB

    重さ 中 驚き ★2

    参考：cobe.vercel.app

16. A16
    粒子の群れ・アトラクタ

    GPGPU

    重さ 中〜重 驚き ★2

    参考：threejs.org

17. A17
    流れる帯（マーキー）

    CSS。止める手段が要る

    重さ 軽 驚き ★1

18. A18
    タイプライター

    重さ 軽 驚き ★1

19. A19
    解読されて現れる文字

    重さ 軽 驚き ★2

20. A20
    文字の分解・再構成

    SplitText（2025年に読み上げ対応）

    重さ 軽 驚き ★2

21. A21
    可変フォントの呼吸

    font-variation-settings

    重さ 軽 驚き ★2 このサイトで動作中文字の見本市 Y033

    参考：v-fonts.com

22. A22
    文字の上を光が走る

    background-clip:text

    重さ 軽 驚き ★1

    参考：magicui.design

23. A23
    ゆっくりズームする写真（ケン・バーンズ）

    CSS

    重さ 軽 驚き ★1

24. A24
    シネマグラフ（写真の一部だけ動く）

    短いループ動画

    重さ 軽〜中 驚き ★2

    参考：webdesignerdepot.com

25. A25
    写真の格子が時間差で入れ替わる

    FLIP／View Transitions

    重さ 軽〜中 驚き ★2

26. A26
    縦溝ガラス・グリッチ・ピクセル化

    シェーダー1枚

    重さ 中 驚き ★2

    参考：shaders.paper.design/fluted-glass

27. A27
    生成：ボロノイ・反応拡散（模様が育つ）・ASCII・ディザ

    シェーダー／ping-pong

    重さ 軽〜中 驚き ★2〜3

    参考：karlsims.com/rdshaders.paper.design/dithering

28. A28
    リアルタイムに流れるグラフ

    Canvas2D。架空のデータと明記

    重さ 軽 驚き ★1

29. A29
    時間帯で変わる画面（朝・昼・夕・夜）

    CSS 変数＋現地時刻。作例は時刻を切り替えるつまみ付き

    重さ 軽 驚き ★2

    参考：localghost.dev

重さ・驚きは当社の見立てです。調査は2026年10月時点で、参考にした実例は公開後に作り替えられている場合があります。