Smear Carousel, animated React component

A carousel whose neighbours smear. The card in the middle is a colour-graded photograph with its own long-exposure streak; the cards either side are turned away from you, and from their outer edge the picture is pulled out to the edge of the stage in long flowing streaks that flare open like the bell of a trumpet, edged with a thin iridescent rim. Drag or fling it (or scroll sideways) and the cards turn and slide through the smear, then settle on the nearest one with a spring. Click a side card to bring it in. Keyboard: Arrow Left and Right move, Home and End jump to the ends, Enter selects the middle card.

Pro
Cards
3D
Scroll

Play with it

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

Drag, scroll or use

Smear Carousel

Demo it by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
cards	SmearCard[]	CARDS	The cards shown in the component.
onSelect	(card: SmearCard) => void	—	called when someone clicks the middle card, presses Enter, or presses the action button
actionLabel	string	"Open"	label of the action button under the middle card (only shown when you pass onSelect)
autoplay	boolean	false	Plays a demo by itself until the first touch. Held still under reduced motion.
className	string	""	Extra classes for the outer element.

Add it to your project

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
Connect the registry with your API key
Smear Carousel 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}"
    }
  }
}
```

Smear Carousel, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Smear Carousel, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More cards