Pixel UI/Image effects/Image morph

Image morph

One picture melts into another through a glowing edge.

<piix-image-fx>WebGL

<piix-image-fx src="../site/pixelui-30-poster.jpg" src2="../site/pixelui-launch-poster.jpg" effect="morph" alt="A lake at sunset becoming a launch poster" height="440px"></piix-image-fx>

Effect

Glow

Give it two images. Hover and the first dissolves into the second along a flowing, glowing edge. With auto it morphs back and forth on its own.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just image morph (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" src2="../site/pixelui-launch-poster.jpg" effect="morph" alt="A lake at sunset becoming a launch poster" height="440px"></piix-image-fx>
  );
}

Usage

<piix-image-fx src="../site/pixelui-30-poster.jpg" src2="../site/pixelui-launch-poster.jpg" effect="morph" alt="A lake at sunset becoming a launch poster" height="440px"></piix-image-fx>

Examples

On its own

auto morphs back and forth without a pointer.

<piix-image-fx src="day.jpg" src2="night.jpg" effect="morph" auto alt="…"></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 alt text.
With reduced motion the image holds still.