Jelly Lens Interact

A fluid WebGL image effect that turns your cursor into a soft, glassy jelly lens. Move your cursor across the image to create a smooth magnifying effect with spring-based motion, subtle chromatic refraction, and a polished glass highlight.

Designed to add depth and tactile interaction to image-driven Framer websites without requiring complicated setup.

Preview: https://jellylensinteraction.framer.website/

Great for

• Creative portfolios

• Digital agencies

• Art direction websites

• Photography portfolios

• Fashion and editorial websites

• Product showcases

• Interactive landing pages

• Experimental and WebGL websites

• Hero sections

• Image galleries

• Award-style websites

Features

• Interactive cursor-following jelly lens

• Real-time WebGL rendering

• Smooth spring-based movement

• Adjustable magnification

• Adjustable lens radius

• Adjustable stiffness and damping

• Subtle chromatic refraction

• Glass highlight effect

• Image cover scaling

• Responsive canvas sizing

• Automatic device pixel ratio control

• Reduced-motion support

• Offscreen rendering optimization

• WebGL context recovery

• Static-renderer fallback

• Ready-made visual presets

• Fully customizable through Framer property controls

• No external image-processing setup required

Customize

Choose from four ready-made presets:

• Soft Jelly

• Glass Lens

• Strong Magnifier

• Liquid Bubble

Or switch to Custom and fine-tune the interaction yourself.

Customize the magnification strength, lens radius, spring stiffness, damping, rendering quality, interaction state, and reduced-motion behavior directly from Framer.

Support

Created and customized for Framer by Karim Saif.

If you need help using the component, have found a bug, or have an idea for an improvement, reach out:

Email: karimsaif010@gmail.com

X: @Karim Saif