Media / effect

Image Morph

An irregular image mask and engraved grid dissolve into a sharp, full-width photograph.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

The original irregular ghost polygons, two-color engraved grid, blur, contrast, scale and four overlapping timelines are preserved.
The image loads before animation begins. Failed media keeps its reserved proportions and a readable fallback. Supply an accurate alt description and intrinsic dimensions.
The source was a one-shot scroll entrance. This version also replays in an already-visible container; offscreen time is excluded.
Pause freezes all layers. Reduced motion shows the complete image. Finished instances stop requesting frames and release will-change hints.
The optional fadeColor blends the bottom edge into a surrounding section. It defaults to transparent so the component composes on any surface.
The included Demo.tsx and styles recreate the complete preview.

React 19CSS clip-pathFramer Motion 12.42.2

Chungus UI · Project-authorized component and adaptation. Public distribution terms pending release.

Prop	Type	Default	Description
`src` (required)	string	`required`	Image URL
`alt` (required)	string	`required`	Image description
`duration`	number	`1280`	Reveal duration
`showGrid`	boolean	`true`	Engraved grid
`width`	number	`1600`	Intrinsic image width; paired with height for reserved proportions.
`height`	number	`1000`	Intrinsic image height.
`fadeColor`	string	`transparent`	Optional bottom fade into a surrounding section, preserving the original parchment handoff when supplied.
`className`	string	`''`	Additional root classes.
`paused`	boolean	`false`	Freeze the reveal and exclude hidden time.
`replayToken`	number	`0`	Change to repeat the reveal.
`onComplete`	() => void	`undefined`	Called once when the full reveal settles. Reduced motion and failed images skip the decorative sequence and this callback.