アニメーション

Web上でメタルを再現！液体金属が流れ続けるリキッドメタルボタン

投稿日 2026/01/14

更新日 2026/1/22

Web上で「金属らしさ」を表現しようとすると、どうしても静的なグラデーションや影表現に寄りがちです。
このコードでは、液体金属が内部で常に流れ続けているような質感をシェーダーで描画し、ボタンUIとして成立させています。

マウス操作に依存せず、時間経過だけで動き続けるため、「置いておくだけで存在感が出るUI表現」として使えるのが特徴です。

Preview プレビュー

Code コード

HTML

<div class="kumonosu-outer-frame">
    <div class="kumonosu-liquid-trench">
        <div id="kumonosu-shader-container"></div>
        <div class="kumonosu-inner-content">
            Liquid Metal
        </div>
    </div>
</div>

CSS

:root {
  --bg-color: #d8d8d8;
  --outer-frame: #c0c0c0;
  --inner-button: #ffffff;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* グレーのベース部分 */
.kumonosu-outer-frame {
  position: relative;
  width: 360px;
  height: 110px;
  background: var(--outer-frame);
  border-radius: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.13), inset 0 1px 2px rgba(255,255,255,0.5);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kumonosu-outer-frame:active {
  transform: scale(0.96);
}

/* 液体金属が流れる溝 */
.kumonosu-liquid-trench {
  position: relative;
  width: calc(100% - 7px);
  height: calc(100% - 7px);
  background: #000;
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* シェーダー描画エリア */
#kumonosu-shader-container {
  position: absolute;
  width: 150%;
  height: 150%;
  z-index: 1;
  filter: contrast(1.2) brightness(1.1);
}

/* メインボタン */
.kumonosu-inner-content {
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  background: linear-gradient(#f3f3f3, #c4c4ca);
  border-radius: 45px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: #000;
  pointer-events: none;
}

JavaScript

import {
  liquidMetalFragmentShader,
  ShaderMount
} from "https://esm.sh/@paper-design/shaders";

const container = document.getElementById("kumonosu-shader-container");

// 画像の設定値を反映したパラメータ
const params = {
  u_repetition: 5.0,    // 繰り返し (Repetition)
  u_softness: 0.46,     // 柔らかさ (Softness)
  u_shiftRed: 0.3,      // 赤ずれ (Red)
  u_shiftBlue: 0.3,     // 青ずれ (Blue)
  u_distortion: 0.2,    // 歪み量 (Distortion)
  u_contour: 0.1,       // 輪郭強度 (Contour)
  u_angle: 44.0,        // 角度 (Angle)
  u_scale: 5.3,         // スケール (Scale)
  u_shape: 1.0,         // 基本となる形状の形（画像にないため維持）
  u_offsetX: 0,         // 横方向の位置（維持）
  u_offsetY: 0.8        // 縦方向の位置（維持）
};

// ShaderMountのインスタンス作成
const shader = new ShaderMount(
  container,
  liquidMetalFragmentShader,
  params,
  undefined,
  0.6
);

const frame = document.querySelector('.kumonosu-outer-frame');

// アニメーション用の変数
let time = 0;
// 画像の「歪み量 0.2」に合わせて初期値を調整
let targetDistortion = 0.2;    
let currentDistortion = 0.2;

function animate() {
  time += 0.0005;

  const radius = 0.8;
  params.u_offsetX = Math.cos(time) * radius;
  params.u_offsetY = Math.sin(time * 0.8) * radius + 0.5;

  // 歪みのアニメーション補間
  currentDistortion += (targetDistortion - currentDistortion) * 0.02;
  params.u_distortion = currentDistortion;

  requestAnimationFrame(animate);
}
animate();