Rotary Dial

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

Installation

$ pnpm dlx 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.

Props9

Prop	Type	Default
from	number1 Starting value on the dial.
to	number10 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	number1 Playback speed multiplier for the whole timeline.

fromnumber
Starting value on the dial.
Default1
tonumber
Final value the dial lands on.
Default10
unitstring
Unit shown after the number, such as a multiplication sign.
Default"×"
labelstring
Caption describing the value.
Default"Render speed"
accentstring
Color of the heated arc.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1