Overview
Introduction
This tool renders a single frame of a "slowly reveal" wipe animation from a PNG, computed entirely client-side.
It's a building block for reveal effects: pick a direction and a reveal percentage, and everything past the cutoff becomes transparent.
What Is PNG Revealer?
A wipe-reveal frame generator that hides (makes fully transparent) whichever portion of the image lies past a chosen percentage along a chosen direction, while leaving the revealed portion's pixels completely unchanged.
It renders one honest static frame at a time rather than fabricating an animated file format, since this site has no video/GIF frame-sequence encoder wired up for this specific effect.
How PNG Revealer Works
Given a percentage and direction, the tool computes how many rows or columns count as "revealed" (for example, at 50% left-to-right on a 200px-wide image, the left 100 columns stay visible).
Every pixel past that cutoff is set to fully transparent (alpha 0); pixels before it keep their exact original RGBA values.
When To Use PNG Revealer
Use it to preview what a specific point in a wipe-reveal animation will look like before building the full sequence elsewhere.
It's also useful for generating individual frames to assemble into a GIF, video, or CSS animation externally.
Often used alongside PNG Pixels Randomizer and PNG Pixels Sorter.
Features
Advantages
- Runs entirely client-side; your image never leaves the browser.
- Four wipe directions supported for different reveal styles.
- Produces an honest static frame rather than claiming to export a fake animated file.
Limitations
- This tool does not itself export an animated GIF, APNG, or video; it renders one frame per request, which you'd need to sequence together externally for a full animation.
- The reveal edge is hard-cut, with no soft feathering or gradient transition across the wipe line.
Examples
Best Practices & Notes
Best Practices
- Step through several percentages (like 0, 25, 50, 75, 100) and download each to build a smooth external reveal sequence.
- Choose the wipe direction that matches the motion you want your final animation to have.
Developer Notes
The pure reveal math lives in a lib function operating on a plain Uint8ClampedArray pixel buffer with no DOM dependency, computing a hard row/column cutoff from the percentage and direction and clearing alpha past it; no compression or animation encoding happens here.
PNG Revealer Use Cases
- Generating individual frames for an external wipe-reveal GIF or video
- Previewing a specific point in a planned reveal animation
- Creating a simple "half-visible" teaser image
Common Mistakes
- Expecting this tool to directly download an animated file — it renders one static frame per request.
- Assuming the hidden portion is covered by a solid color rather than made transparent.
Tips
- Use consistent percentage steps (e.g. every 10%) if you're assembling frames into a smooth external animation.
- Combine with an image editor's onion-skinning feature to line up successive downloaded frames.