Alive
Your picture, exactly as it is, brought to life: depth, glow, haze and light.
<piix-image-fx>WebGL<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="alive" alt="A lake at sunset" height="440px"></piix-image-fx>
Effect
Glow
Keeps the image untouched and adds motion on the GPU: brighter parts sit nearer and shift with the pointer, glowing areas breathe and bloom, heat haze ripples over hot parts, the camera breathes and a light sweeps across. Made for hero images.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just alive (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="alive" alt="A lake at sunset" height="440px"></piix-image-fx>
);
}
Usage
<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="alive" 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.