Image
A WebGL image-generation loader built on a churning pixel-mosaic shader that dissolves in real images.
npm install img-fx three
import { ImageGeneration } from 'img-fx';
<ImageGeneration
preset="pixels-organic"
images={['/img/a.jpg', '/img/b.jpg']}
autoReveal
>
<div className="card" style={{ width: 320, height: 320, borderRadius: 20 }} />
</ImageGeneration>
Add the Image generation effect from Libraries.dev to my React app.
Install:
npm install img-fx three
Usage:
import { ImageGeneration } from 'img-fx';
<ImageGeneration
preset="pixels-organic"
images={['/img/a.jpg', '/img/b.jpg']}
autoReveal
>
<div className="card" style={{ width: 320, height: 320, borderRadius: 20 }} />
</ImageGeneration>
Props:
- preset: "pixels-organic" | "pixels-mechanic" | "sweep-gradient"
- images: array of image URLs the loader dissolves into
- autoReveal: boolean, runs the reveal cycle on its own
Image generation is a WebGL loader: a churning pixel-mosaic shader that resolves
into the real image. `three` is a peer dependency; needs React 18 or newer.
Docs: https://libraries.dev/image.html