Liquid image
The picture turns to liquid and bulges toward the pointer.
<piix-image-fx>WebGL<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="liquid" alt="A lake at sunset" height="440px"></piix-image-fx>
Effect
Glow
The image ripples gently all the time; hover and it swells toward your pointer like a drop of water on glass.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just liquid image (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/image-fx.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="liquid" alt="A lake at sunset" height="440px"></piix-image-fx>
);
}
Usage
<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="liquid" alt="A lake at sunset" height="440px"></piix-image-fx>
API reference
| Attribute | What it does | Default |
|---|---|---|
src | the image (on your site, or served with CORS) | – |
src2 | the second image, for morph | – |
alt | what it shows | – |
effect | dots alive liquid rgb morph ripple streak zoom frosted code | liquid |
auto | morph on its own instead of on hover | – |
palette | the glow colours | sunset |
height | any CSS length | the image's own shape |
Accessibility
- Announced as an image with your
alttext. - With reduced motion the image holds still.