Loupe Image

A loupe that glides over a photo and magnifies its finest details

loupe-image-tw

Customize

Rim Color

Background

Zoom

2.00×

Boost

2.00×

Lens Size

180px

Lens Aspect

1.00

Lens Radius

18px

Rim Width

3.0px

Shadow

0.60

Dim

0.25

Smoothing

0.35

Frame Radius

18px

Touch Offset

72px

Show ZoomOverhangHide Cursor

Props

Name	Type	Default	Description
`src`	string	`Where’s Waldo?`	Image shown in the frame.
`zoomSrc`	string	`src`	Higher-resolution copy used inside the loupe. It loads in the background and fades in to reveal more detail.
`alt`	string	`"Where’s Waldo? illustrated crowd scene"`	Accessible description of the image.
`aspectRatio`	number \| "auto"	`"auto"`	Width divided by height of the frame. Auto follows the image once it loads.
`fit`	"cover" \| "contain"	`"cover"`	How the image fills the frame. The magnified view always matches it exactly.
`focusX`	number	`50`	Horizontal crop anchor in percent when the image is cropped.
`focusY`	number	`50`	Vertical crop anchor in percent when the image is cropped.
`radius`	number	`18`	Corner radius of the frame in pixels.
`mode`	"lens" \| "inline"	`"lens"`	A loupe over the image, or the whole frame zooming in and panning with the pointer.
`zoom`	number	`2`	Magnification.
`minZoom`	number	`1.25`	Lowest magnification reachable with pinch, wheel or keys.
`maxZoom`	number	`4`	Highest magnification reachable with pinch, wheel or keys.
`boost`	number	`2`	Press and hold to bring the loupe closer: magnification multiplies by this while held. 1 turns it off.
`wheelZoom`	"pinch" \| "wheel" \| "off"	`"pinch"`	Change magnification with a trackpad pinch (or Ctrl and the wheel), with the plain wheel, or not at all. Pinch keeps page scrolling untouched.
`lensSize`	number	`180`	Height of the loupe in pixels. It shrinks to fit small frames.
`lensAspect`	number	`1`	Width divided by height of the loupe. Above 1 gives a wide reading lens.
`shape`	"circle" \| "rounded"	`"circle"`	A round loupe (a capsule when wide) or a rounded rectangle.
`lensRadius`	number	`18`	Corner radius of the rounded loupe in pixels.
`rim`	"none" \| "hairline" \| "glass" \| "solid"	`"glass"`	Edge of the loupe: none, a fine line, a lit glass rim, or a solid band.
`rimWidth`	number	`3`	Width of the glass or solid rim in pixels.
`rimColor`	string	`"#FFFFFF"`	Colour of the rim and the reticle.
`backgroundColor`	string	`"transparent"`	Fill behind the image, visible when it is contained.
`shadow`	number	`0.6`	Strength of the shadow under the loupe, from 0 to 1.
`dim`	number	`0.25`	How much the image around the loupe darkens while it is in use, from 0 to 1.
`reticle`	"none" \| "dot" \| "cross" \| "corners"	`"none"`	A fine mark in the loupe: a centre dot, a crosshair or viewfinder corners.
`showZoom`	boolean	`true`	Show the magnification beside the loupe for a moment whenever it changes.
`smoothing`	number	`0.35`	How much weight the loupe has as it follows the pointer, from 0 (none) to 1.
`overhang`	boolean	`false`	Let the loupe hang past the edge of the frame instead of stopping at it.
`hideCursor`	boolean	`true`	Hide the system cursor while the loupe is in use.
`touchOffset`	number	`72`	On touch, hold to bring up the loupe this many pixels above your finger so it never covers what you inspect. A quick tap peeks.
`onZoomChange`	(zoom) => void	`—`	Called when the reader changes the magnification.
`ref`	{ show, hide, setZoom }	`—`	show(x?, y?) opens the loupe at a point given in fractions of the frame, hide() closes it, setZoom(zoom) sets the magnification.
`className`	string	`—`	Classes for the frame. It is as wide as its parent and its height follows the aspect ratio.
`style`	CSSProperties	`—`	Inline styles for the frame.

srcstring

Image shown in the frame.

DefaultWhere’s Waldo?

zoomSrcstring

Higher-resolution copy used inside the loupe. It loads in the background and fades in to reveal more detail.

Defaultsrc

altstring

Accessible description of the image.

Default"Where’s Waldo? illustrated crowd scene"

aspectRationumber | "auto"

Width divided by height of the frame. Auto follows the image once it loads.

Default"auto"

fit"cover" | "contain"

How the image fills the frame. The magnified view always matches it exactly.

Default"cover"

focusXnumber

Horizontal crop anchor in percent when the image is cropped.

Default50

focusYnumber

Vertical crop anchor in percent when the image is cropped.

Default50

radiusnumber

Corner radius of the frame in pixels.

Default18

mode"lens" | "inline"

A loupe over the image, or the whole frame zooming in and panning with the pointer.

Default"lens"

zoomnumber

Magnification.

Default2

minZoomnumber

Lowest magnification reachable with pinch, wheel or keys.

Default1.25

maxZoomnumber

Highest magnification reachable with pinch, wheel or keys.

Default4

boostnumber

Press and hold to bring the loupe closer: magnification multiplies by this while held. 1 turns it off.

Default2

wheelZoom"pinch" | "wheel" | "off"

Change magnification with a trackpad pinch (or Ctrl and the wheel), with the plain wheel, or not at all. Pinch keeps page scrolling untouched.

Default"pinch"

lensSizenumber

Height of the loupe in pixels. It shrinks to fit small frames.

Default180

lensAspectnumber

Width divided by height of the loupe. Above 1 gives a wide reading lens.

Default1

shape"circle" | "rounded"

A round loupe (a capsule when wide) or a rounded rectangle.

Default"circle"

lensRadiusnumber

Corner radius of the rounded loupe in pixels.

Default18

rim"none" | "hairline" | "glass" | "solid"

Edge of the loupe: none, a fine line, a lit glass rim, or a solid band.

Default"glass"

rimWidthnumber

Width of the glass or solid rim in pixels.

Default3

rimColorstring

Colour of the rim and the reticle.

Default"#FFFFFF"

backgroundColorstring

Fill behind the image, visible when it is contained.

Default"transparent"

shadownumber

Strength of the shadow under the loupe, from 0 to 1.

Default0.6

dimnumber

How much the image around the loupe darkens while it is in use, from 0 to 1.

Default0.25

reticle"none" | "dot" | "cross" | "corners"

A fine mark in the loupe: a centre dot, a crosshair or viewfinder corners.

Default"none"

showZoomboolean

Show the magnification beside the loupe for a moment whenever it changes.

Defaulttrue

smoothingnumber

How much weight the loupe has as it follows the pointer, from 0 (none) to 1.

Default0.35

overhangboolean

Let the loupe hang past the edge of the frame instead of stopping at it.

Defaultfalse

hideCursorboolean

Hide the system cursor while the loupe is in use.

Defaulttrue

touchOffsetnumber

On touch, hold to bring up the loupe this many pixels above your finger so it never covers what you inspect. A quick tap peeks.

Default72

onZoomChange(zoom) => void

Called when the reader changes the magnification.

Default—

ref{ show, hide, setZoom }

show(x?, y?) opens the loupe at a point given in fractions of the frame, hide() closes it, setZoom(zoom) sets the magnification.

Default—

classNamestring

Classes for the frame. It is as wide as its parent and its height follows the aspect ratio.

Default—

styleCSSProperties

Inline styles for the frame.

Default—

Name

Type

Default

Description

src

string

Where’s Waldo?

Image shown in the frame.

zoomSrc

string

src

Higher-resolution copy used inside the loupe. It loads in the background and fades in to reveal more detail.

alt

string

"Where’s Waldo? illustrated crowd scene"

Accessible description of the image.

aspectRatio

number | "auto"

"auto"

Width divided by height of the frame. Auto follows the image once it loads.

fit

"cover" | "contain"

"cover"

How the image fills the frame. The magnified view always matches it exactly.

focusX

number

50

Horizontal crop anchor in percent when the image is cropped.

focusY

number

50

Vertical crop anchor in percent when the image is cropped.

radius

number

18

Corner radius of the frame in pixels.

mode

"lens" | "inline"

"lens"

A loupe over the image, or the whole frame zooming in and panning with the pointer.

zoom

number

2

Magnification.

minZoom

number

1.25

Lowest magnification reachable with pinch, wheel or keys.

maxZoom

number

4

Highest magnification reachable with pinch, wheel or keys.

boost

number

2

Press and hold to bring the loupe closer: magnification multiplies by this while held. 1 turns it off.

wheelZoom

"pinch" | "wheel" | "off"

"pinch"

Change magnification with a trackpad pinch (or Ctrl and the wheel), with the plain wheel, or not at all. Pinch keeps page scrolling untouched.

lensSize

number

180

Height of the loupe in pixels. It shrinks to fit small frames.

lensAspect

number

1

Width divided by height of the loupe. Above 1 gives a wide reading lens.

shape

"circle" | "rounded"

"circle"

A round loupe (a capsule when wide) or a rounded rectangle.

lensRadius

number

18

Corner radius of the rounded loupe in pixels.

rim

"none" | "hairline" | "glass" | "solid"

"glass"

Edge of the loupe: none, a fine line, a lit glass rim, or a solid band.

rimWidth

number

3

Width of the glass or solid rim in pixels.

rimColor

string

"#FFFFFF"

Colour of the rim and the reticle.

backgroundColor

string

"transparent"

Fill behind the image, visible when it is contained.

shadow

number

0.6

Strength of the shadow under the loupe, from 0 to 1.

dim

number

0.25

How much the image around the loupe darkens while it is in use, from 0 to 1.

reticle

"none" | "dot" | "cross" | "corners"

"none"

A fine mark in the loupe: a centre dot, a crosshair or viewfinder corners.

showZoom

boolean

true

Show the magnification beside the loupe for a moment whenever it changes.

smoothing

number

0.35

How much weight the loupe has as it follows the pointer, from 0 (none) to 1.

overhang

boolean

false

Let the loupe hang past the edge of the frame instead of stopping at it.

hideCursor

boolean

true

Hide the system cursor while the loupe is in use.

touchOffset

number

72

On touch, hold to bring up the loupe this many pixels above your finger so it never covers what you inspect. A quick tap peeks.

onZoomChange

(zoom) => void

—

Called when the reader changes the magnification.

ref

{ show, hide, setZoom }

—

show(x?, y?) opens the loupe at a point given in fractions of the frame, hide() closes it, setZoom(zoom) sets the magnification.

className

string

—

Classes for the frame. It is as wide as its parent and its height follows the aspect ratio.

style

CSSProperties

—

Inline styles for the frame.