LiquidGlass

The ChromaticLensEffect is a high-performance React component that creates a stunning "liquid glass" effect over its content. Using WebGL shaders, it renders a dynamic lens that follows the user's cursor, applying realistic distortion, magnification, and chromatic aberration to a rich scene composed of background images, text, and overlays.

This component is highly interactive, featuring fluid motion effects like swirl, wobble, a drag smear, and a beautiful ripple effect that triggers on click. With deep customization for the lens shape (ellipse, pill), distortion type (pinch, fisheye), and advanced styling for per-side inner shadows and borders, ChromaticLensEffect is a powerful tool for creating captivating and visually engaging user experiences.

Props include:

Content & Appearance

• image

• overlayImages

• text

• textWrapperWidth

• typography

• textColor

• textAlignment

• backgroundColor/image

Interaction

• mouseFollow

• followSmoothness

• enableDrag

• dragStrength

• dragDecay

• cursorStyle

Lens Shape & Size

• usePixelSize

• lensShape

• radius

• lensWidthPixels

• lensHeightPixels

Distortion Effects

• distortionMode

• lensStrength

• fisheyeStrength

• enableSwirl

• swirlStrength

• enableWobble

• wobbleStrength

• wobbleSpeed

• wobbleFrequency

Click Ripple Effect

• enableRipple

• rippleAmplitude

• rippleFrequency

• rippleSpeed

Color & Style

• aberrationStrength

• aberrationMode

• aberrationBlur

• enableTint

• tintColor

• tintIntensity

Lens Border / Glow

• enableBorder

• borderSettings

Lens Inner Shadow

• enableInnerShadow

• shadowSettings