Reveal Image
A photo that resolves out of a dither field the first time it scrolls into view, then assembles tile by tile into colour. In a group of photos, pointing at one pulls it into focus while the others soften. Built from Image Generation and Pixel Reveal.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | — | The photo. |
| alt | string | — | What it shows. |
| ratio | number | — | Width over height. Unset, the frame takes its height from className. |
| fit | "cover" | "contain" | "cover" | contain shows the whole image, for screens and diagrams. |
| sizes | string | — | The image's sizes attribute. |
| className | string | — | Classes for the root element. |