Loupe Lens

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Loupe

Loupe Lens: a glass ball you drag across a table of tiny printed things, and it bends the light like real glass. A fragment shader magnifies what is under it, refracts the rim with a separate bend for red, green and blue so white light splits into a spectrum, lays a thin film of colour along the edge, and adds a highlight, a window reflection, a soft shadow and a caustic. Under it sit eight printed objects drawn on a canvas, each with micro-print you can only read through the glass: a stamp, a ticket, a working watch dial, a map of the Amsterdam canals, a type specimen, a film strip, a facts label and a badge. Drag the glass and it follows on a spring, then coasts on release; tap the table and it glides there; drag an object and it lifts and tilts to the front. Scroll over it or pinch with two fingers to resize; arrow keys nudge it from the focused stage. A Lens panel sets size, magnification, refraction, dispersion and iridescence. It drifts by itself until first touch, pauses when off screen, shows a note when WebGL is missing, and with reduced motion it stays still.

Drift by itself

Magnification1.65

Colour split0.035

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
height	number \| "fill"	"fill"	Height of the scene in px, or "fill" to fill a positioned parent.
autoplay	boolean	true	Let the glass drift across the table on its own until the first touch. Stays still with reduced motion.
size	number	1	Size of the glass as a multiple of its natural size, from 0.55 to 1.8.
magnification	number	1.65	How much the middle of the glass magnifies, from 1 to 3.2.
refraction	number	1.52	Index of refraction: how hard the rim bends the light, from 1.05 to 2.2.
dispersion	number	0.035	How far the rim splits white light into a spectrum, from 0 to 0.12.
iridescence	number	0.35	How strongly a thin film of colour plays along the rim, from 0 to 1.
className	string	""	Extra classes for the outer element.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Loupe Lens is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Pro
New
Murmur
Pro
New
Glass Recorder
Pro
New
Effort Slider
Pro
New
Aquarium Prompt

Loupe Lens, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Loupe Lens, animated React component

Play with it

Look closer.

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More motion effects