About

A slideshow with poorly timed transitions or mismatched aspect ratios looks amateurish. This tool renders each slide onto a fixed-resolution canvas using a cover-fit algorithm that crops to w × h without distortion. Eight transition types are computed per-pixel using cubic easing interpolation over a configurable t_transition interval. The output is a sequence of PNG frames at full resolution. No server processing occurs. All compositing runs locally via the Canvas API.

The tool assumes input images are standard raster formats (PNG, JPEG, WebP, GIF first frame). Transition rendering approximates 60 fps playback but actual smoothness depends on browser compositing performance. Export produces individual PNG files per slide. For presentations requiring precise color fidelity, verify your source images use sRGB color space.

Formulas

Each image is fitted to the canvas using the cover algorithm. The scale factor is computed as:

s = max(w_canvasw_img, h_canvash_img)

The source crop offset centers the image:

x_offset = w_img − w_canvas ÷ s2

Transition progress uses cubic ease-in-out for smooth acceleration and deceleration:

p(t) =

{

4t³ if t < 0.51 − (−2t + 2)³ ÷ 2 otherwise

Where t = elapsed time ÷ transition duration, clamped to [0, 1]. s is the cover-fit scale factor. w_canvas, h_canvas are the output canvas dimensions. w_img, h_img are the source image dimensions.

Reference Data

Transition	Type	Direction	Easing	Description
Fade	Alpha Blend	None	Cubic In-Out	Cross-dissolve between slides via global alpha interpolation
Slide Left	Translation	←	Cubic In-Out	Current slide exits left, next enters from right
Slide Right	Translation	→	Cubic In-Out	Current slide exits right, next enters from left
Slide Up	Translation	↑	Cubic In-Out	Current slide exits upward, next enters from bottom
Slide Down	Translation	↓	Cubic In-Out	Current slide exits downward, next enters from top
Zoom In	Scale	Center	Cubic In-Out	Current slide scales up and fades, next fades in at normal scale
Zoom Out	Scale	Center	Cubic In-Out	Current slide shrinks to center, next appears beneath
Dissolve	Pixel Noise	Random	Linear	Random pixel blocks reveal next slide progressively
Wipe Left	Clip Mask	←	Cubic In-Out	Vertical edge sweeps left revealing next slide
Wipe Down	Clip Mask	↓	Cubic In-Out	Horizontal edge sweeps down revealing next slide
None	Cut	N/A	N/A	Instant switch with no transition effect

Frequently Asked Questions

The tool accepts any format the browser can decode natively: PNG, JPEG, WebP, GIF (first frame only), BMP, ICO, and AVIF (in supporting browsers). SVG files are rasterized at the canvas resolution upon import. All images are rendered to an internal canvas at the configured output resolution regardless of source format.

The cover algorithm scales the image so the shorter dimension fills the canvas completely, then crops the overflow symmetrically. A 4000×500 panorama on a 1920×1080 canvas will scale to height and crop approximately 77% of the width from each side. For such edge cases, consider cropping the source image manually before import to control the visible region.

PNG file size depends on canvas dimensions and image complexity. A 1920×1080 canvas with photographic content typically produces files between 2-6 MB per frame. Flat colors and gradients compress significantly better. The tool exports at maximum quality with no lossy compression. Reduce canvas resolution to decrease file sizes.

Yes. Each slide has independent duration and transition settings. The global defaults apply to newly added slides, but you can override per-slide duration (how long it displays) and per-slide transition type and speed. The transition occurs between the current slide and the next one in sequence.

Images above 4000×4000 pixels require significant GPU memory for canvas compositing. The browser may throttle requestAnimationFrame when texture memory is exhausted. For smooth 60 fps playback, keep source images under 8 megapixels or reduce the output canvas resolution. The export function is unaffected since it renders frames sequentially.

The dissolve effect uses a seeded pseudo-random block pattern generated once per transition. Blocks are 8×8 pixel squares that reveal progressively based on a pre-shuffled index array. This ensures the pattern is deterministic per playback but visually random. The seed resets each time the transition starts.