Ripl

Appearance

Image ​

An Image renders a CanvasImageSource (such as an HTMLImageElement, HTMLCanvasElement, or ImageBitmap) to any context. The standout feature is crossfade interpolation — when you transition between two image sources using interpolateImage, Ripl composites both images onto an offscreen canvas and smoothly blends between them. This makes image carousels, thumbnail previews, and data-driven image swaps trivially easy to animate.

Example ​

Click Next Image to crossfade between images using interpolateImage.

Usage ​

ts
import {
    createImage,
} from '@ripl/web';

const img = new Image();
img.src = '/photo.jpg';

img.onload = () => {
    const image = createImage({
        image: img,
        x: 50,
        y: 50,
        width: 200,
        height: 150,
    });
};

Properties ​

The image element is defined by image (a CanvasImageSource), x, y, and optional width/height (defaults to the source's intrinsic dimensions).

NOTE

For the full property list, see the Image API Reference.

Interpolation ​

The interpolateImage factory produces a crossfade between two image sources. It composites both images onto an offscreen canvas, blending from one to the other over the transition.

ts
import {
    interpolateImage,
} from '@ripl/web';

// Pass the interpolator directly as the state value
renderer.transition(imageElement, {
    duration: 800,
    state: { image: interpolateImage(currentImage, nextImage) },
});