Glass Lens, animated React component

A glass puck you drag over content. It magnifies the centre and splits colour toward the rim, built from three offset copies of the content instead of a shader.

Pro
Motion Effects
Spring

Play with it

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

Field notes

Glass is not a filter you lay on top. It is a material that bends whatever sits behind it.

Drag the lens across the page. The edges split light into colour, the centre magnifies.

Props

Prop	Type	Default	What it does
size	number	150	Lens diameter in px.
zoom	number	1.45	Magnification at the centre of the lens.
width	number	520	Width of the content surface in px.
height	number	300	Height of the content surface in px.
children	ReactNode	Field notes text	Content under the glass. It is rendered four times (page plus three lens layers), so keep it static.
autoplay	boolean	false	Drifts across the content by itself until the user drags it.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/glass-lens
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
glass-lens/
glass-lens.tsx
index.ts
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { GlassLens } from "@/components/glass-lens";

export default function Page() {
  return (
    <main>
      <GlassLens />
    </main>
  );
}

GlassGlass Lens, animated React component

Play with it

Props

More motion effects

Glass Lens, animated React component