Smart Light, animated React component

A light control with a real room behind it. Drag the pill to dim the glass pendant, slide from amber to cool white, or tap a scene: the bulb, the wall falloff and the shadows all respond, and the lamp sways. Canvas lighting with pointer and keyboard control.

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.

Living Room

Pendant Light

Brightness

Off

Warmth3000 K · Warm

Drag the pill or use the arrow keys. Tap a scene to set the mood.

Props

Prop	Type	Default	What it does
autoplay	boolean	false	Plays itself with a ghost pointer until the visitor touches it. Off by default, so a copied component reacts only to the visitor. Never runs under reduced motion.
className	string	—	Extra classes for the outer card.
enableSound	boolean	true	Plays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

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
Smart Light 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}"
    }
  }
}
```
3
Add the component
Run this from your project root. It adds the component, the helpers it imports and its npm packages.
```
npx shadcn@latest add @nexus-labs/smart-light
```
4
Check what was added
With a project made as in the Quick Start (a src/ folder), these files land in it:
components/
smart-light/
index.ts
smart-light.tsx
5
Copying by hand? Skip the registry
Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:
```
npm install framer-motion
```
Then show the source and create each file at the path it gives:

Use it in a page

Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

// src/app/page.tsx
import { SmartLight } from "@/components/smart-light";

export default function Page() {
  return (
    <main>
      <SmartLight />
    </main>
  );
}

Smart Light questions

Does it make sound, and how do I turn it off?

Clicks like a relay when the light goes on or off, taps glass as you dim, ticks like wood along the warmth slider, chimes when you pick a scene, and thuds softly at the end of the dimmer. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

Pro
NewSound
Card Reader Verify
Pro
NewSound
Range Calendar
New
Dart Rating
Pro
New
Tank Recorder