Glass Loupe
The iOS text magnifier: press and hold, and a glass capsule floats above the pointer showing the line beneath it, enlarged. Drag straight away and you get an ordinary selection instead.
Each pixel of the element beneath is displaced by the red and green channels of a generated bitmap, red carrying the horizontal shift and green the vertical, so that the rendered output bends as though seen through a dome of glass.
The map is neutral grey everywhere outside the lens, which encodes zero displacement, and the content there passes through untouched and remains selectable, scrollable and clickable in the ordinary way.
Magnification is not obtainable by displacement alone. It requires a second rendering of the source at a larger scale, and where that rendering is retained as document content rather than as a raster, the letterforms are rasterized at their final size.
Installation
Remember to load the glass chrome CSS once
Import the component where you use it, then load the shared stylesheet a single time (e.g. in your root layout or app entry):
import "@liquidglassjs/core/css"