Frosted window
The picture behind hammered glass, with a clear window that follows the pointer.
<piix-image-fx>WebGL<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="frosted" alt="A lake at sunset" height="440px"></piix-image-fx>
Effect
Glow
Heavily textured glass blurs and bends the image; hover and a sharp, clean square follows your pointer, like wiping a window. Great for portraits and fashion.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just frosted window (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="frosted" alt="A lake at sunset" height="440px"></piix-image-fx>
);
}
Usage
<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="frosted" 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.