Sections / Gems / Cursor and pointer effects
Loupe
A magnifying glass that shows the layer under your picture: the plan under the building, the x-ray under the product, the sketch under the painting. The lens magnifies the hidden layer, bends it at the thick glass edge and splits colour at the rim in the direction it moves. It drifts on its own until someone takes it; one button opens the whole layer.
- Kind
- Cursor and pointer effects
- Interaction
- pointer lens · two layers · autopilot · keyboard · chromatic rim · canvas
- Dependencies
- None
- Licence
- Licensed with Full Access, for the sites you build; do not resell the gem itself
Formats
- Webflow (native)
- Figma (layers)
- Framer component
- HTML
- Prompts for Claude Code, Cursor, Lovable, v0, Bolt
Copy to Webflow pastes a native section with the gem in an Embed inside it. Copy to Figma pastes a frame of its best moment, text and controls as layers. Copy to Framer pastes a component with its options as controls. HTML is one self-contained snippet. Each prompt (Claude Code, Cursor, Lovable, v0, Bolt) carries the exact files, so your agent installs this gem, not a lookalike. With the MCP server, ask your agent for get_section("loupe").
Behaviour and accessibility
- The lens drifts slowly on its own, follows the pointer when it is over the picture, and goes back to drifting when it leaves; a tap places it on touch screens, and dragging still scrolls the page.
- The picture is a focusable group named with both layers' descriptions; arrow keys move the lens (Shift for bigger steps), + and - resize it, Home centres it.
- The reveal button (aria-pressed) opens the whole hidden layer and back; scene changes and reveals are announced politely.
- Drawing stops entirely off screen, in a background tab, and whenever the lens is still and nobody is steering.
- With prefers-reduced-motion: no drift, no spring or crossfade; the lens jumps to where it is sent and the reveal cuts.
Options
| Option | Type | Default | What |
|---|---|---|---|
scenes | LoupeScene[] | 2 built in | The scenes, each a picture and the layer under it. One or more. |
radius | number | 0 | Lens radius in px; 0 sizes it from the box (20 % of the shorter side, 70 to 200 px). |
zoom | number | 1.6 | Magnification inside the lens. |
rim | number | 3 | Strength of the colour split at the rim, in px. 0 turns it off. |
autopilot | boolean | true | Let the lens drift on its own while nobody is steering it. |
controls | boolean | true | Show the caption, the reveal button and (with two or more scenes) the arrows. |
label | string | "Loupe" | Accessible name of the gem. |
startIndex | number | 0 | Scene shown first. |
onReveal | (revealed: boolean) => void | Called when the whole hidden layer is opened or closed. | |
onChange | (index: number) => void | Called after every scene change with the new index. |
Free