Liquid Hover

Liquid Hover Animation

This page displays the live demo of the Liquid Hover animation and lets you view the HTML, CSS, and JavaScript source code used to create it.

HTML


<div id="app">
  <canvas id="canvas"></canvas>
  <a target="_blank"
  </a>
</div>

CSS


html, body, #app {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  touch-action: none;
  overflow: hidden;
}

#app {
  height: 100%;
  font-family: "Montserrat", serif;
}

#canvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

a {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 2px black;
}

JavaScript


import LiquidBackground
  from "https://cdn.jsdelivr.net/npm/threejs-components@0.0.22/build/backgrounds/liquid1.min.js";

const app =
  LiquidBackground(
    document.getElementById("canvas")
  );

app
.
loadImage
(
"https://raw.githubusercontent.com/devAMBoyose/amboyose/main/pages/img/projectsUI/LiquidHover.png"
);


app.liquidPlane.material.metalness
  = 0.75;

app.liquidPlane.material.roughness
  = 0.25;

app.liquidPlane.uniforms.displacementScale.value
  = 5;

app.setRain(false);