Glass Lens for React

Preview

A closer look at the details.

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Lens

pnpm dlx shadcn@4.14.1 add @glassyui/glass-lens

What this installs10 files, 1 package

Direct registry declarations

These values belong to @glassyui/glass-lens itself in registry.json.

Package dependencies

clsx

Registry dependencies

@glassyui/glass-surface

File targets

components/glassyui/glass-lens.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

clsx

Installed files

components/glassyui/glass-lens.tsx
components/glassyui/glass-surface.tsx
components/glassyui/lib/merge-refs.ts
components/glassyui/lib/refraction-map.ts
components/glassyui/lib/use-refraction-filter.tsx
components/glassyui/lib/scene-context.ts
components/glassyui/glass-provider.tsx
components/glassyui/liquid-filters.tsx
components/glassyui/lib/preferences.ts
components/glassyui/styles/liquid.css

Usage

Save this as lens-example.tsx. It is the complete example shown above, including its artwork.

Usage

'use client';

import { GlassLens } from '@/components/glassyui/glass-lens';

export function LensExample() {
  return (
    <GlassLens
      defaultPosition={{ x: 0.62, y: 0.5 }}
      size={116}
      style={{ width: '100%', maxWidth: 440, height: 240, borderRadius: 22 }}
      zoom={1.7}
    >
      <div
        style={{
          display: 'grid',
          placeItems: 'center',
          boxSizing: 'border-box',
          width: '100%',
          height: '100%',
          padding: 24,
          background:
            'linear-gradient(#ffffff20 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, #ffffff20 1px, transparent 1px) 0 0 / 20px 20px, radial-gradient(ellipse at 90% 100%, #9b341e, transparent 65%), linear-gradient(135deg, #482015, #792b1c 55%, #3c1e16)',
          color: '#fff',
          textAlign: 'center',
        }}
      >
        <p
          style={{
            maxWidth: '12ch',
            margin: 0,
            fontSize: 30,
            fontWeight: 700,
            lineHeight: 1.12,
            letterSpacing: '-0.025em',
          }}
        >
          A closer look at the details.
        </p>
      </div>
    </GlassLens>
  );
}

After configuring the registry, install every component this example uses:

Install example components

pnpm dlx shadcn@4.14.1 add @glassyui/glass-lens

Examples

Render the copied example

import { LensExample } from "./lens-example";

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

API

GlassLens

Stage that renders its children plus a draggable magnifier over them.

children

Content to magnify. It renders twice, so give it its own background and avoid ids.

size

Lens diameter in pixels. Defaults to 160.

zoom

Magnification inside the lens. Defaults to 1.6.

defaultPosition

Starting centre as fractions of the stage. Defaults to the middle.

label

Accessible name of the lens. Defaults to Magnifier.

Notes

Browsers

The rim bends through an SVG filter on the magnified copy, which every current engine draws. Reduced motion and reduced transparency keep a plain magnifier.

Keyboard

The lens is focusable. Arrow keys move it 10 pixels, or 50 with Shift.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.