Specimen 07Zoom 2.5×
Move to magnifyPinch to zoom
<LiquidMagnifier variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Only the Minimal world, with motion, plus the Ovio theme, world, motion items.
npx shadcn add JanaSundar/ovio/liquid-magnifier-minimal↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { LiquidMagnifier } from "@/components/ovio/liquid-magnifier/liquid-magnifier"
<LiquidMagnifier
variant="minimal"
label="Poster"
children={<img src="/poster.png" alt="" />}
/>Built with: CSS transforms · Motion for React (spring, velocity squash; Retro: stepped)
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | What the lens magnifies. It is drawn twice, under the lens and inside it, so keep it free of ids. Images fill the view. |
| variantdefault minimal | minimalcraftretrotoy | Which world to render. Uses the nearest OvioProvider when there is one. |
| zoom / defaultZoomdefault 2.5 | number | How much the lens magnifies. Controlled, or the starting zoom. |
| onZoomChange | (zoom: number) => void | Fires when a pinch, Ctrl or Cmd with the wheel, or the + and - keys change the zoom. |
| minZoom / maxZoomdefault 1.5 / 4 | number | The zoom range. |
| sizedefault 128 | number | Lens diameter in px. It never takes more than 40% of the view's width. |
| restdefault { x: 0.62, y: 0.4 } | { x: number; y: number } | Where the lens waits while the pointer is elsewhere, as fractions of the view. |
| labeldefault "Magnifier" | string | Accessible name for the view, printed by the worlds. |
| aspectRatiodefault "4 / 3" | string | CSS aspect ratio of the view. |
| className | string | Merged onto the root. |