Skip to content

New301 animated icons, 75 free. See the icons ›

Nexus UI

Highlight Popover, animated React component

Highlight Popover: select text in an article and a toolbar rises out of the selection like a drop of ink. The dark pill and a bead of liquid start at the selection; the pill lifts and widens while the bead stretches a neck behind it and snaps away. Point at a colour to see it on the words, then pick it and a marker nib draws the highlight line by line: a chisel-tip band with uneven edges and ink pooled where the tip stopped, multiplied onto the page so the words stay crisp. Tap a highlight to change its colour, add a note (the pill widens into a field and a marker appears in the margin), copy it, or remove it, which wipes the ink back off. Keyboard: select with Shift and the arrows, then press Enter to reach the toolbar. Highlights are buttons; Escape closes.

  • Pro
  • Inputs & Controls

Play with it

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

Notes on interface motion, 6 min read

The quiet power of springs

Most interface motion is timed. A panel slides for three hundred milliseconds and stops, whether you flicked it or barely touched it. Springs work differently: they have no duration, only stiffness, damping and the velocity you hand them.

That last part matters most. When an animation starts from the speed of your finger, the screen stops feeling like a recording and starts feeling like a material. Throw a sheet and it travels further. Nudge it and it barely moves.

Good spring motion is mostly invisible. People rarely notice the overshoot or the settle; they just say the app feels fast, calm or expensive. The craft is in choosing one or two moments to let the physics show.

Props

PropTypeDefaultWhat it does
titlestring"The quiet power of springs"The title shown in the component.
bylinestring"Notes on interface motionThe byline shown in the component.
paragraphsstring[]DEMO_TEXTThe paragraphs shown in the component.
highlightsHighlight[]—The highlights shown in the component.
notesRecord<string, string>—notes by highlight group
onChange(highlights: Highlight[], notes: Record<string, string>) => void—Called with the new value whenever the visitor changes it.
autoplaybooleanfalseDemo it on its own until someone touches it. Off by default.
classNamestring""Extra classes for the outer element.

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

    Highlight Popover 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 inputs & controls