Fisheye FX

Interactive WebGL fisheye for images

How to use Drop the component onto your canvas Add your image in the panel Tune Distortion, Lens size, and the effects to taste Image & framing Image — the photo you want to warp Fit — Cover (fill the circle) or Contain (show the whole image) Lens & Distortion Distortion — strength of the fisheye bulge, from subtle wide-angle to extreme Zoom — how far in or out the image sits inside the lens Chromatic — amount of RGB color split along the edges Lens mask — Circle (round lens) or Full (warp the entire frame) Lens size — diameter of the circle Edge soft — feather/softness of the circle's edge Focal X / Focal Y — shift the image to frame your subject Corner — corner radius (Full mode only) Style Background — color behind the circle (transparent by default) Glass ring — show or hide the rim around the lens Ring color / width — style the rim Ring glow — add a soft glow to the rim Effects Grain / Grain amt — film-grain texture and its intensity Scanlines / Scan amt — retro scanline / VHS overlay and its intensity Motion Cursor follow / Follow amt — image drifts with the pointer Bulge follows / Bulge amt — the distortion center tracks the cursor Auto float / Float speed — gentle idle movement and its speed Tips Looks best with a square-ish image and a centered subject Transparent by default — add a Frame behind for any color, gradient, image, or video Compatibility Runs on WebGL — works across all modern browsers Falls back to a small message (never a broken layout) where WebGL isn't supported On touch devices, cursor effects pause; Auto float still runs Performance GPU fragment shader — light and smooth at any size Pauses animation off screen and in background tabs

Interactive WebGL fisheye for images