Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Glass Compare, animated React component

A before-and-after slider whose divider is a bar of glass. It bends the picture behind it like a lens, with a bright rim, a streak of light and a faint rainbow fringe. Flick it and the bar bends like a ribbon and springs straight, the side it sweeps toward smears with motion blur, and droplets of glass spray off and fall. Drag the bar or anywhere on the picture, or focus it and use the arrow keys. Without your own images it paints a harbour street by day and by night.

  • Pro
  • Cards
  • Spring

A soft glassy slide that follows the bar, and little ticks as the droplets fall. Sound is off on this site until you switch it on.

Play with it

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

Harbour Street, day and night
50%
Drag the glass, or anywhere on the picture. Flick it to see it bend.

Props

PropTypeDefaultWhat it does
beforestring—The left image (it must allow cross-origin use). Leave both out for the painted demo.
afterstring—The right image.
beforeLabelstring"2 PM"Label on the left image.
afterLabelstring"10 PM"Label on the right image.
titlestring"Harbour Street, day and night"The card's heading.
defaultValuenumber0.5Where the divider starts, 0 to 1.
onChange(value: number) => void—Called with the divider's position as it moves.
enableSoundbooleantrueThe glass sliding and droplets falling. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseSweeps the glass across by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 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. 2

    Connect the registry with your API key

    Glass Compare 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}"
    }
  }
}

How Glass Compare works

A before-and-after slider whose divider is a bar of glass. Drag the bar, or anywhere on the picture, and the view behind the glass is bent through it like a lens: thick in the middle, with a bright edge, a streak of reflected light and a faint rainbow fringe where the colours split. Move it it's sweeping toward smears with motion blur and a colour split, and droplets of glass spray off the bar and fall. the arrow keys move it.

The source, the install command and the build prompt come with Pro.

Glass Compare questions

Does it make sound, and how do I turn it off?

A soft glassy slide that follows the bar, and little ticks as the droplets fall. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More cards