Image FXcssimagelab.com
Motion · 51 / 60

Heat Haze

The lower third of the photo shimmers and rises like heat off summer asphalt.

Image
Green natural landscape

Runs continuously — adjust the sliders and watch.

Adjust
30%
0.85
5s
0.6px
Metadata
interaction
Always on
browser
Enhanced — SVG filter
reduced motion
included
touch fallback
Identical on touch
Edit the CSS above — the preview updates live.

About Heat Haze

Heat Haze duplicates the photo on a ::after, warps it with a static SVG displacement filter (feTurbulence + feDisplacementMap), masks it to a band at the bottom, and gently oscillates its transform so the band breathes like heat rising off asphalt. Only the transform animates (cheap on the compositor); the displacement is baked once — animating the turbulence itself would need JS/SMIL. Set --ifx-src on the figure to the SAME url() as the img (the generated HTML/React does this). Tune --ifx-haze-band (how tall the shimmering band is), --ifx-haze-op (blend strength), --ifx-haze-dur (shimmer speed) and --ifx-haze-blur (softness). IMPORTANT: include the accompanying inline <svg> <filter> block once per page. Identical on touch; the global reduced-motion block stops the shimmer.

Use cases

  • hero
  • travel
  • landscape
  • editorial

Browser support

Enhanced — SVG filter. This effect uses an enhanced feature — provide a graceful fallback for older browsers.

Accessibility

  • Essential content is never hidden behind hover.
  • Includes a prefers-reduced-motion fallback.
  • Touch fallback: identical on touch.