# Rotary Dial
URL: https://remocn.dev/docs/ui-blocks/rotary-dial

A knurled dial is grabbed and turned, the value counts up with it, and it clicks into its final detent.

- Install: `npx shadcn@latest add @remocn/rotary-dial`
- Vibe: premium
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rotary-dial
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RotaryDial } from "@/components/remocn/rotary-dial";

const RotaryDialScene = () => (
  <RotaryDial
    from={1}
    to={10}
    unit="×"
    label="Render speed"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="RotaryDial"
    component={RotaryDialScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A label and value write in, a cursor grabs a metal dial and turns it, and the value counts from `from` to `to` as an arc heats up. The dial clicks into its final detent with a bloom of light. Pass your own `from`, `to`, `unit` and `label`; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `1` | Starting value on the dial. |
| `to` | `number` | `10` | Final value the dial lands on. |
| `unit` | `string` | `"×"` | Unit shown after the number, such as a multiplication sign. |
| `label` | `string` | `"Render speed"` | Caption describing the value. |
| `accent` | `string` | `"#3B5BFD"` | Color of the heated arc. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A performance or intensity claim such as render speed going from 1 to 10.
- A feature beat where turning something up should feel physical and satisfying.
- A hardware-flavored product moment with a big number and a unit.

## Don't use when
- The number should just roll up without a control — use `rolling-number`.
- You want a flat UI slider rather than a physical knob — use `slider`.
- A boolean on and off is the point — use `toggle-on`.