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