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
Mikiko Niwa
