Skip to content

ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Glass Drop, animated React component

A logo intro made of liquid glass. A droplet lands as a bubble that magnifies your logo, swells into a rounded glass tile whose thick edges bend the logo and split the light into colour, then clears to your logo at full size. Pick the ending: the logo alone, or the logo with your name, where a second drop lands and opens into a rippling lens that sweeps out over the name until the lockup is crisp. Three looks: dark, light and blue. Drop in any SVG or PNG and it uses that instead of the default mark. Plays when it comes into view and click to replay.

  • Pro
  • Motion Effects
  • Hover
  • Spring

Play with it

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

Props

PropTypeDefaultWhat it does
logoSrcstring—An SVG or PNG to use instead of the default Nexus UI mark. It keeps its own colours unless tint is set. Visitors can also drop a file onto the stage when controls are on.
namestring"Nexus UI"The name revealed beside the logo by the "logo-text" ending.
ending"logo" | "logo-text""logo""logo" ends on your logo alone. "logo-text" goes on to drop a clear ball on the logo that opens out over your name until the whole lockup is crisp. The built-in picker changes it afterwards; changing the prop resets it.
theme"dark" | "light" | "blue""dark"The stage and the glass. Dark is black with cool glass, light is pale grey with frosted glass and dark ink, blue is a deep navy gradient with navy glass.
tintbooleanfalseCasts your logo in the theme's ink (white on dark and blue, near-black on light) instead of its own colours, and gives it the soft rounded relief. The built-in mark always takes the theme's ink.
depthnumber2.9How thick the glass is, 0 to 6. Deeper glass bends the logo more and throws more colour at the edges.
tuningPartial<LiquidGlassLogoTuning>—Any other setting of the glass, passed straight through: dispersion, relief, caustics, highlights, bloom, dropSize, dropStrength, speed, loopDelay, logoSize, font settings for the name and more. See the renderer file for the full list.
heightnumber460Height of the stage in pixels. The width is the width of its container, up to 1000px.
loopbooleanfalseReplays forever, holding on the finished logo for a moment between runs (the tuning prop's loopDelay sets how long). Otherwise it plays once when it first comes into view. Under reduced motion it shows the finished logo straight away.
autoplaybooleantruePlays when the stage first comes into view. Turn it off and it rests on the finished logo until a click or the Replay button.
controlsbooleantrueShows the ending and theme pickers, the upload button and Replay along the bottom of the stage.
classNamestring—Extra classes for the outer wrapper.

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 Drop 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}"
    }
  }
}

More motion effects