VFXAdvanced

Shockwave Distortion

An expanding ring that visibly warps the scene behind it, like a blast wave through air.

vfxshaderexplosionimpact

Examples

Captured from this page's own interactive demo below.

Overview

Shockwave distortion sends a ring outward from an impact point and bends the already-rendered image along the wavefront — the screen itself ripples, the way hot air shimmers around a real explosion. Objects the wave passes get visually shoved and settle back.

Unlike most juice effects, this one lives in the rendering pipeline: a shader samples the rendered scene (URP's Opaque/Scene Color, a grab pass in Built-in) and offsets its UVs radially inside a thin ring around the wavefront. That's what makes it Advanced — you're post-processing the frame, not moving a transform.

It reads as raw physical force: a flash says 'something bright happened', a shockwave says 'the air itself moved'. It's the standard capstone of a big-explosion impact chain, layered on top of camera shake, flash, and particles.

Interactive Demo

Push Strength18px

Wave Duration600ms

Use Cases

Explosions/VFXBoss attacksUltimatesMagic

Best Practices

Do

✓Fade the distortion strength as the ring expands — a wave that stays strong at full radius reads as a rendering bug.
✓Keep the distorted band thin (a ring, not a filled circle) so the effect reads as a traveling front.
✓Layer it with the rest of the impact chain (shake, flash, particles) — the shockwave is the garnish, not the whole dish.

Don't

✕Don't distort UI or text layers — warping HUD elements reads as a glitch, so render the wave before the UI pass.
✕Don't fire full-screen shockwaves at high frequency — the technique earns its impact by being rare.
✕Don't forget the performance cost on mobile — sampling the opaque texture isn't free; budget it like any post effect.

Common Mistakes

⚠Distorting in all directions from the center (a filled blob) instead of within a ring around the wavefront.
⚠Forgetting to enable the Opaque Texture (URP) or the grab pass, so the shader silently samples nothing.
⚠Driving the radius linearly — real blast fronts decelerate; an ease-out expansion sells the physics.

Implementation

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

Prompt

Add the "Shockwave Distortion" game-feel effect to my project: An expanding ring that visibly warps the scene behind it, like a blast wave through air.

How it works: Shockwave distortion sends a ring outward from an impact point and bends the already-rendered image along the wavefront — the screen itself ripples, the way hot air shimmers around a real explosion. Objects the wave passes get visually shoved and settle back.

Guidelines:
- Fade the distortion strength as the ring expands — a wave that stays strong at full radius reads as a rendering bug.
- Keep the distorted band thin (a ring, not a filled circle) so the effect reads as a traveling front.
- Layer it with the rest of the impact chain (shake, flash, particles) — the shockwave is the garnish, not the whole dish.

Avoid:
- Don't distort UI or text layers — warping HUD elements reads as a glitch, so render the wave before the UI pass.
- Don't fire full-screen shockwaves at high frequency — the technique earns its impact by being rare.
- Don't forget the performance cost on mobile — sampling the opaque texture isn't free; budget it like any post effect.

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