Effort Slider, animated React component

An effort setting for an AI answer, from Faster to Smarter. Below the top level the track is a calm glowing fill with a few stars in it and a shimmer running through, coloured from cool teal up to violet, and the thumb is a spiral galaxy seen at an angle, like a telescope photograph: thousands of stars, dust lanes, pink star-forming knots, a warm core and diffraction spikes, maturing from a faint loose spiral into a bright grand-design one as you go. Reach the top and the slider transforms: a flash, a burst of sparks, and the fill breaks into a dense mosaic of violet, pink, cyan and white star pixels that cascade back from the thumb and then stream smoothly out of it from right to left in three depth layers, while dotted rays stream out of the thumb like a starburst and the level's name turns iridescent. Drag it and the thumb squashes with speed, throws a comet trail only when you really fling it, rings each level it passes and clicks into the nearest one with a little bounce. Keyboard: it's a slider, so the arrow keys move a level at a time and Home and End jump to the ends.

Pro
AI Components
Spring

Play with it

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

EffortMedium

FasterSmarter

Weighs a couple of approaches before it answers.

20 s3 credits

Effort Slider

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
levels	EffortLevel[]	LEVELS	The levels shown in the component.
value	string	—	the selected level id (controlled)
defaultValue	string	—	Starting value of value when you leave it uncontrolled.
onChange	(id: string, level: EffortLevel) => void	—	Called with the new value whenever the visitor changes it.
title	string	"Effort"	The title shown in the component.
recommended	string	—	the id of the level to mark as recommended
startLabel	string	"Faster"	The start label shown in the component.
endLabel	string	"Smarter"	The end label shown in the component.
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
Effort Slider 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}"
    }
  }
}
```

Pro
New
Aquarium Prompt
Pro
New
Oracle Orb
Pro
New
Piano Text
Pro
New
Liquid Smoke

Effort Slider, 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

Effort Slider, 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 ai components