Magnifier
A loupe that really magnifies: live text scaled by the browser, so it is crisp at 4x rather than four times as blurry.
Walkthrough
1. Basic
Move the pointer over the fine print — or, on a touch screen, press and hold it. The glass holds a live copy of the text scaled by the browser, so the letters are as sharp at 2.4× as they are at 1×.
Clause 7.2 — The subscriber grants the operator a non-exclusive licence to cache, transcode and redistribute the submitted material for the sole purpose of delivery, for the term of the agreement and for ninety days thereafter, in any territory in which the operator maintains a point of presence.
<script lang="ts"> import { Magnifier, Text } from 'omaris';</script><div class="w-full max-w-md rounded-shape-lg border border-border p-4"> <Magnifier zoom={2.4}> <Text variant="body-sm" tone="muted"> Clause 7.2 — The subscriber grants the operator a non-exclusive licence to cache, transcode and redistribute the submitted material for the sole purpose of delivery, for the term of the agreement and for ninety days thereafter, in any territory in which the operator maintains a point of presence. </Text> </Magnifier></div>2. Picture
The other half of the job: a picture at 3×. Hover it, or press and hold on a phone. Vector art stays vector inside the lens, and pixelated is there for when enlarged pixels are the point.
<script lang="ts"> import { Magnifier } from 'omaris';</script><div class="w-full max-w-sm"> <Magnifier src="/docs/photos/erbil.svg" alt="Erbil citadel" zoom={3} width={160} /></div>3. Text loupe
The system loupe, as a component: press and hold, and a wide rounded glass comes up above the finger and follows it. trigger="press" asks for that behaviour on a mouse as well, which is how you can try it here.
Press and hold anywhere in this paragraph. The glass rides above the pointer rather than under it, so nothing you are trying to read is covered by the thing reading it — and it is real text under there, not an enlarged screenshot.
<script lang="ts"> import { Magnifier, Text } from 'omaris';</script><div class="w-full max-w-md rounded-shape-lg bg-surface-container-low p-4"> <Magnifier shape="rounded" zoom={1.9} width={220} height={72} trigger="press" hold={220}> <Text variant="body-md"> Press and hold anywhere in this paragraph. The glass rides above the pointer rather than under it, so nothing you are trying to read is covered by the thing reading it — and it is real text under there, not an enlarged screenshot. </Text> </Magnifier></div>4. Fluid
fluid turns the disc into a drop of glass: it eases after the pointer, stretches along its own motion and rounds out as it slows, and the picture bends at the rim with a fine colour fringe — the way a real loupe does. Sweep the pointer across quickly and watch it lag and lengthen.
Clause 7.2 — The subscriber grants the operator a non-exclusive licence to cache, transcode and redistribute the submitted material for the sole purpose of delivery, for the term of the agreement and for ninety days thereafter, in any territory in which the operator maintains a point of presence.
<script lang="ts"> import { Magnifier, Text } from 'omaris';</script><div class="w-full max-w-md rounded-shape-lg border border-border p-4"> <Magnifier zoom={2.4} fluid width={150}> <Text variant="body-sm" tone="muted"> Clause 7.2 — The subscriber grants the operator a non-exclusive licence to cache, transcode and redistribute the submitted material for the sole purpose of delivery, for the term of the agreement and for ninety days thereafter, in any territory in which the operator maintains a point of presence. </Text> </Magnifier></div>5. Overridden
The overridden case: a square glass sized from classes, its rim and sheen replaced, and pixelated so the enlargement shows the grid rather than smoothing it away.
<script lang="ts"> import { Magnifier } from 'omaris';</script><div class="w-full max-w-md"> <Magnifier zoom={4} shape="square" pixelated width="14rem" height="7rem" classes={{ lens: 'rounded-shape-sm ring-2 ring-primary shadow-3', sheen: 'bg-none ring-inset ring-primary/30' }} > <div class="grid grid-cols-8 gap-px rounded-shape-sm bg-border p-px"> {#each Array.from({ length: 32 }, (_, i) => i) as cell (cell)} <div class="aspect-square" class:bg-primary={cell % 3 === 0} class:bg-surface-container-high={cell % 3 !== 0} ></div> {/each} </div> </Magnifier></div>