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

Nexus UI

Pluck Frame, animated React component

A rounded frame drawn as one elastic string. Bring the pointer to an edge and the string catches on it; keep going and it stretches out with you, widening as it goes, until it slips off and rings. The ring is drawn the way a camera sees a vibrating string: a translucent veil between rest and the furthest swing, brightest at both ends of the swing, spreading along the frame, wrapping the corners and fading. Click, or press Enter, and the whole frame rings.

  • 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.

Pull an edge, then let go

Props

PropTypeDefaultWhat it does
autoplaybooleanfalsePlucks the frame by itself, out through the right edge, the top, the lower-left corner and the bottom, until the pointer arrives. Never runs under reduced motion (a still frame is shown) and pauses while the card is off screen.
theme"dark" | "light""dark"Dark (white string on near-black) or light (graphite string on pale grey).
childrenReactNode—Content centred inside the frame. Defaults to a small hint; the frame ignores the pointer over it.

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

    Pluck Frame 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