UIIntermediate

Transition Wipe

An iris closing on the hero, a beat of black, an iris opening on the new scene — transitions with a personality.

uitransitionsceneiris

Examples

Captured from this page's own interactive demo below.

Overview

A fade is a shrug; a wipe is a sentence. The iris that closes on the hero's face, the shutter that slams sideways, the checkerboard that dissolves the level away — every classic wipe carries attitude the plain crossfade doesn't have, and it costs one animated mask instead of a loading-screen's worth of UI. Zelda has opened and closed on an iris for forty years because it works.

The anatomy is close → hold → open: the old scene is wiped away (200–400 ms), a beat of solid color hides the scene swap and any loading hitch (even 100 ms reads as intentional), and the new scene is revealed — traditionally with the opening centered on the player's new position, which lands the eye exactly where play resumes. The hold is the load-bearing part: it converts a technical stutter into rhythm.

Match the shape to the fiction — iris for adventure, hard diagonal for action, pixel dissolve for retro — and then keep it consistent; the wipe is part of the game's voice. Ease the leading edge (the mask should decelerate into fully-closed, then accelerate out), and let players who die often skip or shorten it: a 700 ms flourish is charming once and a tax on retry loops.

Interactive Demo

close on the old position · beat of black · open on the new one

Wipe Time350ms

Black Hold150ms

Use Cases

Scene and level changesDeath and respawn loopsFast travel and area doorsChapter cards and time skips

Best Practices

Do

✓Hold on solid color for a beat between close and open — the hold converts loading hitches into rhythm.
✓Open the wipe centered on the player's NEW position so the eye lands where play resumes.
✓Pick one wipe shape as the game's signature and use it consistently — the transition is part of the voice.

Don't

✕Don't crossfade two live scenes when you can hide the swap behind a hold — half-mixed frames read as a glitch.
✕Don't lock input for the full flourish on frequent transitions; let retry loops shorten or skip it.
✕Don't animate the mask linearly — decelerate into closed, accelerate out of it, like a blink.

Common Mistakes

⚠A wipe that runs while the next scene is still loading, freezing half-closed and advertising the hitch it should hide.
⚠The iris opening on the screen center while the player spawns in a corner, making the eye hunt for the character.
⚠A different transition style on every screen — menu slides, deaths fade, doors iris — adding up to no identity at all.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Transition Wipe" game-feel effect to my project: An iris closing on the hero, a beat of black, an iris opening on the new scene — transitions with a personality.

How it works: A fade is a shrug; a wipe is a sentence. The iris that closes on the hero's face, the shutter that slams sideways, the checkerboard that dissolves the level away — every classic wipe carries attitude the plain crossfade doesn't have, and it costs one animated mask instead of a loading-screen's worth of UI. Zelda has opened and closed on an iris for forty years because it works.

Guidelines:
- Hold on solid color for a beat between close and open — the hold converts loading hitches into rhythm.
- Open the wipe centered on the player's NEW position so the eye lands where play resumes.
- Pick one wipe shape as the game's signature and use it consistently — the transition is part of the voice.

Avoid:
- Don't crossfade two live scenes when you can hide the swap behind a hold — half-mixed frames read as a glitch.
- Don't lock input for the full flourish on frequent transitions; let retry loops shorten or skip it.
- Don't animate the mask linearly — decelerate into closed, accelerate out of it, like a blink.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.