Glass Reveal
A pointer-following glass lens that refracts one image through another, with square, circle, blob and rippling portal outlines
Customize
Props
23| Name | Type | Default | Description |
|---|---|---|---|
image | string | Unsplash URL | Photo shown in full colour inside the lens. |
backgroundImage | string | image | Optional different photo for the outside. Defaults to the same image. |
shape | "square" | "circle" | "blob" | "portal" | "circle" | Outline of the lens. Portal is an organic blob whose edge dissolves into the outside. |
size | number | 0.6 | Lens size as a fraction of the shorter container edge. |
softness | number | 0 | Edge feather in lens units. 0 keeps a crisp cut. Portal adds its own wide falloff. |
distortion | number | 1 | Radial lens warp inside the outline. Positive magnifies like glass, negative pinches. |
aberration | number | 0.01 | Colour fringing that grows towards the lens edge. |
wobble | number | 0.5 | How far the blob and portal outlines wobble, 0 to 1. |
wobbleSpeed | number | 2 | Speed of the outline wobble. |
waveFrequency | number | 6 | Frequency of the sine wave rolling through the outside image. |
waveStrength | number | 0.01 | Displacement of the outside wave. |
waveSpeed | number | 1 | Speed of the outside wave. |
grain | number | 0.02 | Displacement of the animated grain outside the lens. |
grainSpeed | number | 10 | How fast the grain flickers. |
grayscale | number | 1 | How far the outside is drained of colour, 0 to 1. |
dim | number | 0 | How far the outside is darkened, 0 to 1. |
follow | number | 0.85 | Pointer damping. 0 snaps to the pointer, 1 trails far behind. |
returnToCenter | boolean | true | Drift the lens back to the centre when the pointer leaves. |
fallbackColor | string | "#171717" | Colour shown while the image loads or if it fails to load. |
paused | boolean | false | Freeze the wave, grain and outline animation. |
dpr | number | 1.5 | Upper device pixel ratio bound for the canvas. |
className | string | — | Classes applied to the root element. |
children | ReactNode | — | Content layered above the effect. |
imagestringPhoto shown in full colour inside the lens.
Unsplash URLbackgroundImagestringOptional different photo for the outside. Defaults to the same image.
imageshape"square" | "circle" | "blob" | "portal"Outline of the lens. Portal is an organic blob whose edge dissolves into the outside.
"circle"sizenumberLens size as a fraction of the shorter container edge.
0.6softnessnumberEdge feather in lens units. 0 keeps a crisp cut. Portal adds its own wide falloff.
0distortionnumberRadial lens warp inside the outline. Positive magnifies like glass, negative pinches.
1aberrationnumberColour fringing that grows towards the lens edge.
0.01wobblenumberHow far the blob and portal outlines wobble, 0 to 1.
0.5wobbleSpeednumberSpeed of the outline wobble.
2waveFrequencynumberFrequency of the sine wave rolling through the outside image.
6waveStrengthnumberDisplacement of the outside wave.
0.01waveSpeednumberSpeed of the outside wave.
1grainnumberDisplacement of the animated grain outside the lens.
0.02grainSpeednumberHow fast the grain flickers.
10grayscalenumberHow far the outside is drained of colour, 0 to 1.
1dimnumberHow far the outside is darkened, 0 to 1.
0follownumberPointer damping. 0 snaps to the pointer, 1 trails far behind.
0.85returnToCenterbooleanDrift the lens back to the centre when the pointer leaves.
truefallbackColorstringColour shown while the image loads or if it fails to load.
"#171717"pausedbooleanFreeze the wave, grain and outline animation.
falsedprnumberUpper device pixel ratio bound for the canvas.
1.5classNamestringClasses applied to the root element.
—childrenReactNodeContent layered above the effect.
—