Bevel

Motorized fader

A console fader with a motor: when someone else sets it, the cap travels there on its own and says who moved it. Grab it and it's yours. For settings an agent, a teammate or an automation can change too.

Part of Mixer strip, and works on its own anywhere else.

Temperature the agent tunes

The agent adjusts its own temperature; grab the fader to take over, then hand it back.

0.70Agent

Installation

Add with the CLI

  1. Once per project, add the Bevel registry to components.json.

    components.json
    {
  "registries": {
    "@bevel": "https://bevel-ui.vercel.app/r/{name}.json"
  }
}

  2. Add Motorized fader. This brings in the Bevel foundation, installs cn, and merges the styles into your global CSS.

    Terminal
    npx shadcn@latest add @bevel/motorized-fader
Install manually

  1. Install the dependencies.

    Terminal
    pnpm add cn

  2. Add the Bevel foundation, if you haven't already. Light, depth, materials, motion and shape tokens, plus the utilities components use to apply them.

    styles/bevel.css
    /*
 * Bevel foundation. Every component builds on these tokens and utilities;
 * component stylesheets only add their own palettes and shapes.
 *
 * Layers:
 *   1. Light     one source, above and slightly in front of the screen.
 *   2. Depth     named elevations built from the light: recessed, flush,
 *                raised, pressed, object.
 *   3. Material  a surface recipe (leather, plastic, metal) that reads
 *                --bevel-material and --bevel-material-edge.
 *   4. Motion    two curves, a spring, and durations named by purpose.
 *   5. Shape     radii, stitching, and the type scale for amounts.
 */

:root {
  /* 1. Light */
  --bevel-highlight: oklch(1 0 0 / 0.22);
  --bevel-highlight-strong: oklch(1 0 0 / 0.35);
  --bevel-shade: oklch(0 0 0 / 0.32);
  --bevel-shade-strong: oklch(0 0 0 / 0.5);
  --bevel-cast: oklch(0.25 0.03 50 / 0.22);
  /* Stamped into a surface: shaded on the upper inner edge, lit below. */
  --bevel-deboss: 0 -1px 0 oklch(0 0 0 / 0.45), 0 1px 0 oklch(1 0 0 / 0.12);

  /* 3. Material defaults; components and variants override these. */
  --bevel-material: oklch(0.47 0.085 52);
  --bevel-material-edge: oklch(0.3 0.06 44);
  --bevel-material-recess: oklch(0.2 0.008 260); /* neutral dark; materials set their own */
  --bevel-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --bevel-grain-size: 180px;

  /* 2. Depth */
  --bevel-depth-recessed:
    inset 0 1px 2px var(--bevel-shade-strong),
    0 1px 0 var(--bevel-highlight);
  --bevel-depth-flush:
    inset 0 1px 0 var(--bevel-highlight),
    inset 0 -1px 0 var(--bevel-shade);
  --bevel-depth-raised:
    inset 0 1px 0 var(--bevel-highlight),
    0 1px 0 var(--bevel-material-edge),
    0 2px 0 var(--bevel-material-edge),
    0 3px 5px var(--bevel-shade);
  --bevel-depth-pressed:
    inset 0 1px 2px var(--bevel-shade),
    0 1px 0 var(--bevel-highlight);
  /* A whole object resting on the page. */
  --bevel-depth-object:
    inset 0 1px 0 var(--bevel-highlight),
    inset 0 -1px 0 var(--bevel-shade),
    0 0 0 1px var(--bevel-material-edge),
    0 1px 1px var(--bevel-cast),
    0 6px 12px -2px var(--bevel-cast),
    0 18px 32px -8px var(--bevel-cast);
  /* The shadow under a loose object, for filter: drop-shadow(). */
  --bevel-depth-cast-sm: 0 4px 6px var(--bevel-cast);
  /* A thin object (a card) lying on another surface. */
  --bevel-depth-sheet:
    inset 0 1px 0 var(--bevel-highlight-strong),
    inset 0 0 0 1px oklch(0 0 0 / 0.12),
    0 -1px 2px oklch(0 0 0 / 0.18);

  /* 4. Motion */
  --bevel-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bevel-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Underdamped spring, ~8% overshoot. Pure CSS; pair with --bevel-duration-move or longer. */
  --bevel-ease-spring: linear(0, 0.06, 0.202, 0.38, 0.561, 0.723, 0.856, 0.955, 1.023, 1.062, 1.081, 1.083, 1.075, 1.062, 1.047, 1.032, 1.019, 1.009, 1.002, 0.997, 0.994, 0.993, 0.993, 0.994, 1);
  --bevel-duration-press: 100ms; /* a control giving under a finger */
  --bevel-duration-small: 200ms; /* hover lifts, tabs, small state changes */
  --bevel-duration-move: 300ms; /* objects moving: cards, drawers */
  --bevel-duration-ambient: 520ms; /* whole-scene changes: lighting */
  --bevel-stagger: 30ms;
  --bevel-lift: 3px; /* how far an object rises on hover */
  --bevel-perspective: 30rem; /* viewing distance for parts that turn in 3D (covers, flaps) */
  /* Unchosen items in a group sit back in shadow. */
  --bevel-dim: 0.82;

  /* 5. Shape */
  --bevel-radius-xs: 0.25rem;
  --bevel-radius-sm: 0.5rem;
  --bevel-radius-md: 0.625rem;
  --bevel-radius-lg: 1rem;
  --bevel-radius-xl: 1.5rem;
  --bevel-stitch-width: 1.5px;
  --bevel-stitch-inset: 0.375rem;
  /* Amounts: the figure, its secondary parts (currency, cents), labels, fine print. */
  --bevel-amount: 2.25rem;
  --bevel-amount-minor: 1.25rem;
  --bevel-label: 0.75rem;
  --bevel-fine: 0.6875rem;
  --bevel-tracking-label: 0.08em; /* stamped labels */
  --bevel-tracking-print: 0.06em; /* printed marks on cards */

  /* Paper and ink */
  --bevel-paper: oklch(0.975 0.008 85);
  --bevel-paper-foreground: oklch(0.28 0.02 260);
  --bevel-paper-muted: oklch(0.48 0.015 260);
  --bevel-paper-rule: oklch(0.78 0.04 240 / 0.45);
  --bevel-paper-margin: oklch(0.68 0.14 25 / 0.45);
  --bevel-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Ink soaks unevenly: mostly solid with pale specks. Used as a mask. */
  --bevel-ink-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  --bevel-ink-red: oklch(0.52 0.19 27);
  --bevel-ink-blue: oklch(0.44 0.14 262);
  --bevel-ink-green: oklch(0.5 0.12 155);
  --bevel-ink-black: oklch(0.3 0.01 260);
  --bevel-ink-amber: oklch(0.55 0.13 65);

  /* Brass and ivory: instrument hardware and dial faces */
  --bevel-brass: oklch(0.76 0.11 82);
  --bevel-brass-edge: oklch(0.52 0.08 70);
  --bevel-ivory: oklch(0.95 0.025 90);
  --bevel-ivory-foreground: oklch(0.25 0.015 60);
  --bevel-needle: oklch(0.55 0.2 27);

  /* Desk stationery: legal pads, pens, pencils, exhibit stickers */
  --bevel-pad: oklch(0.95 0.075 98); /* yellow legal pad */
  --bevel-pad-foreground: oklch(0.27 0.03 255);
  --bevel-pad-rule: oklch(0.72 0.06 235 / 0.45);
  --bevel-pad-margin: oklch(0.62 0.16 25 / 0.55);
  --bevel-pen-red: oklch(0.52 0.2 27); /* correcting pen */
  --bevel-pen-blue: oklch(0.42 0.15 262); /* writing pen */
  --bevel-pencil: oklch(0.55 0.01 260); /* not written in ink yet */
  --bevel-sticker: oklch(0.9 0.12 95); /* exhibit sticker */
  --bevel-sticker-foreground: oklch(0.26 0.03 70);
  /* Handwriting. Bring a marker font (e.g. Permanent Marker) for the full effect; these are fallbacks. */
  --bevel-font-marker: "Permanent Marker", "Marker Felt", "Chalkboard SE", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

.dark {
  --bevel-highlight: oklch(1 0 0 / 0.14);
  /* Paper under dim light, not inverted: it's still paper. */
  --bevel-paper: oklch(0.88 0.008 85);
  --bevel-ivory: oklch(0.86 0.022 90);
  --bevel-pad: oklch(0.86 0.07 98);
  --bevel-cast: oklch(0 0 0 / 0.55);
}

/* Depth */
@utility bevel-recessed {
  background-color: var(--bevel-material-recess);
  box-shadow: var(--bevel-depth-recessed);
}
@utility bevel-flush {
  box-shadow: var(--bevel-depth-flush);
}
@utility bevel-raised {
  background-color: color-mix(in oklch, var(--bevel-material), white 7%);
  background-image: linear-gradient(to bottom, var(--bevel-highlight), transparent 60%);
  box-shadow: var(--bevel-depth-raised);
}
@utility bevel-pressed {
  background-color: color-mix(in oklch, var(--bevel-material), black 4%);
  background-image: none;
  box-shadow: var(--bevel-depth-pressed);
}
@utility bevel-object {
  box-shadow: var(--bevel-depth-object);
}

/* Materials */
@utility bevel-leather {
  background-color: var(--bevel-material);
  background-image:
    var(--bevel-grain),
    linear-gradient(to bottom, var(--bevel-highlight), transparent 28%, transparent 72%, var(--bevel-shade));
  background-size: var(--bevel-grain-size) var(--bevel-grain-size), 100% 100%;
  background-blend-mode: soft-light, normal;
}
@utility bevel-plastic {
  background-color: var(--bevel-material);
  background-image:
    linear-gradient(115deg, var(--bevel-highlight-strong), transparent 40%),
    linear-gradient(to bottom, transparent 25%, oklch(0 0 0 / 0.45));
  box-shadow: var(--bevel-depth-sheet);
}
@utility bevel-metal {
  background-color: var(--bevel-material);
  background-image:
    linear-gradient(to bottom, var(--bevel-highlight-strong), transparent 45%, var(--bevel-shade) 100%),
    repeating-linear-gradient(90deg, oklch(1 0 0 / 0.06) 0 1px, transparent 1px 3px);
  box-shadow:
    inset 0 0 0 1px oklch(0 0 0 / 0.25),
    inset 0 1px 0 var(--bevel-highlight-strong);
}

/* Details */
@utility bevel-deboss {
  text-shadow: var(--bevel-deboss);
}
@utility bevel-stitch {
  border-color: var(--bevel-stitch, oklch(0.88 0.05 82 / 0.8));
  border-style: dashed;
  border-width: var(--bevel-stitch-width);
  filter: drop-shadow(0 1px 0 var(--bevel-shade));
}
/* A lit fill sitting in a recess (meters, progress). Colour from --bevel-fill. */
@utility bevel-fill {
  background-color: var(--bevel-fill);
  background-image: linear-gradient(to bottom, oklch(1 0 0 / 0.55), transparent 55%, oklch(0 0 0 / 0.18));
  box-shadow: 0 0 6px -1px var(--bevel-fill);
}
/* A small indicator light. Colour from --bevel-led. */
@utility bevel-led {
  background-color: var(--bevel-led);
  background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / 0.85), transparent 45%);
  box-shadow:
    0 0 6px var(--bevel-led),
    inset 0 -1px 1px oklch(0 0 0 / 0.35),
    0 1px 0 var(--bevel-highlight);
}

/* Paper: a sheet resting on the surface, with fibre in it. */
@utility bevel-paper {
  background-color: var(--bevel-paper);
  background-image: var(--bevel-fibre);
  background-size: 240px 240px;
  color: var(--bevel-paper-foreground);
  box-shadow:
    0 1px 1px var(--bevel-cast),
    0 6px 14px -4px var(--bevel-cast);
}
/* Ink on paper: multiplies into the surface and soaks unevenly. Colour from --bevel-ink. */
@utility bevel-ink {
  color: var(--bevel-ink, var(--bevel-ink-red));
  border-color: currentColor;
  mix-blend-mode: multiply;
  mask-image: var(--bevel-ink-texture);
  mask-size: 160px 160px;
}
/* Glass over an instrument window: one reflection from the light above. Put on an overlay element. */
@utility bevel-glass {
  pointer-events: none;
  background-image: linear-gradient(165deg, var(--bevel-highlight-strong) 0%, transparent 38%, transparent 70%, var(--bevel-shade) 100%);
}

/* Material families: one per screen. Set on the screen's container. */
[data-bevel-family="leather"] {
  --bevel-cast: oklch(0.25 0.03 50 / 0.22);
}
[data-bevel-family="paper"] {
  --bevel-cast: oklch(0.3 0.01 250 / 0.16);
}
.dark :is([data-bevel-family="leather"], [data-bevel-family="paper"]) {
  --bevel-cast: oklch(0 0 0 / 0.55);
}

/*
 * Ruled paper: rules every --bevel-rule-height and a margin line at
 * --bevel-rule-margin. Set --bevel-sheet for the paper colour. The ruling
 * scrolls with the content.
 */
@utility bevel-ruled {
  background-color: var(--bevel-sheet, var(--bevel-paper));
  background-image:
    linear-gradient(
      to right,
      transparent calc(var(--bevel-rule-margin) - 1px),
      var(--bevel-sheet-margin, var(--bevel-paper-margin)) calc(var(--bevel-rule-margin) - 1px) calc(var(--bevel-rule-margin) + 1px),
      transparent calc(var(--bevel-rule-margin) + 1px)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--bevel-rule-height) - 1px),
      var(--bevel-sheet-rule, var(--bevel-paper-rule)) calc(var(--bevel-rule-height) - 1px) var(--bevel-rule-height)
    ),
    var(--bevel-fibre);
  background-size: 100% 100%, 100% 100%, 240px 240px;
  background-attachment: local;
  color: var(--bevel-paper-foreground);
  box-shadow:
    0 1px 1px var(--bevel-cast),
    0 6px 14px -4px var(--bevel-cast);
}

  3. Copy motorized-fader.tsx into components/ui.

    components/motorized-fader.tsx
    "use client"

import * as React from "react"
import { cn } from "cn"

type MotorizedFaderProps = Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> & {
  value: number
  /** Called when you move it. Set changedBy to you when you take it. */
  onValueChange?: (value: number) => void
  min?: number
  max?: number
  step?: number
  /** Who set the current value. Anyone but you, and the motor drives the cap there. */
  changedBy?: string
  /** Your name as changedBy shows it. Default "You". */
  you?: string
  /** How the value reads aloud and on the scribble strip. */
  format?: (value: number) => string
  disabled?: boolean
}

/**
 * A motorized console fader. When someone else (an agent, a teammate, an
 * automation) sets it, the cap travels there on its own and says who moved
 * it. Grab it, or use the arrow keys, and it's yours. Vertical.
 */
function MotorizedFader({
  className,
  value,
  onValueChange,
  min = 0,
  max = 100,
  step = 1,
  changedBy,
  you = "You",
  format = String,
  disabled,
  ...props
}: MotorizedFaderProps) {
  const track = React.useRef<HTMLDivElement>(null)
  const [dragging, setDragging] = React.useState(false)
  const t = max === min ? 0 : (Math.min(Math.max(value, min), max) - min) / (max - min)
  const remote = changedBy !== undefined && changedBy !== you

  const set = (next: number) => {
    const snapped = Math.min(max, Math.max(min, Math.round((next - min) / step) * step + min))
    if (snapped !== value) onValueChange?.(snapped)
  }
  const fromPointer = (event: React.PointerEvent) => {
    const box = track.current?.getBoundingClientRect()
    if (!box) return
    set(min + (1 - (event.clientY - box.top) / box.height) * (max - min))
  }
  const onKeyDown = (event: React.KeyboardEvent) => {
    const big = Math.max(step, (max - min) / 10)
    const moves: Record<string, number> = {
      ArrowUp: value + step,
      ArrowRight: value + step,
      ArrowDown: value - step,
      ArrowLeft: value - step,
      PageUp: value + big,
      PageDown: value - big,
      Home: min,
      End: max,
    }
    if (!(event.key in moves)) return
    event.preventDefault()
    set(moves[event.key]!)
  }

  return (
    <div
      role="slider"
      tabIndex={disabled ? -1 : 0}
      aria-orientation="vertical"
      aria-valuemin={min}
      aria-valuemax={max}
      aria-valuenow={value}
      aria-valuetext={`${format(value)}${changedBy ? `, set by ${changedBy}` : ""}`}
      aria-disabled={disabled || undefined}
      data-slot="motorized-fader"
      data-remote={remote ? "" : undefined}
      data-dragging={dragging ? "" : undefined}
      data-disabled={disabled ? "" : undefined}
      onKeyDown={disabled ? undefined : onKeyDown}
      onPointerDown={(event) => {
        if (disabled || event.button !== 0) return
        event.currentTarget.setPointerCapture(event.pointerId)
        setDragging(true)
        fromPointer(event)
      }}
      onPointerMove={(event) => {
        if (event.currentTarget.hasPointerCapture(event.pointerId)) fromPointer(event)
      }}
      onPointerUp={() => setDragging(false)}
      onLostPointerCapture={() => setDragging(false)}
      className={cn(
        "group relative flex h-[calc(var(--motorized-fader-travel)+var(--motorized-fader-cap))] w-14 touch-none justify-center outline-none select-none data-disabled:opacity-50",
        className
      )}
      {...props}
    >
      {/* Scale lines either side of the slot. */}
      <span aria-hidden className="absolute inset-y-[calc(var(--motorized-fader-cap)/2)] inset-x-1 flex flex-col justify-between">
        {Array.from({ length: 11 }, (_, i) => (
          <span key={i} className={cn("h-px bg-(--bevel-shade-strong)", i % 5 === 0 ? "w-full" : "mx-2")} />
        ))}
      </span>
      <span
        ref={track}
        aria-hidden
        className="absolute inset-y-[calc(var(--motorized-fader-cap)/2)] w-1.5 rounded-full bg-(--bevel-material-recess) shadow-(--bevel-depth-recessed)"
      />
      {/* The cap: moved with translate. The motor is slow; your hand isn't. */}
      <span
        aria-hidden
        data-slot="motorized-fader-cap"
        className={cn(
          "bevel-metal absolute bottom-0 flex h-(--motorized-fader-cap) w-11 items-center justify-center rounded-(--bevel-radius-xs) shadow-(--bevel-depth-object)",
          "transition-[translate] duration-(--bevel-duration-press) ease-(--bevel-ease-out)",
          "group-data-remote:duration-(--bevel-duration-ambient) group-data-remote:ease-(--bevel-ease-in-out)",
          "group-data-dragging:duration-0 motion-reduce:transition-none",
          "group-focus-visible:ring-3 group-focus-visible:ring-ring/60"
        )}
        style={{ translate: `0 calc(var(--motorized-fader-travel) * ${-t})` }}
      >
        <span className="h-0.5 w-full bg-(--motorized-fader-line)" />
      </span>
    </div>
  )
}

type MotorizedFaderReadoutProps = React.ComponentProps<"p"> & {
  value: string
  changedBy?: string
  you?: string
}

/** A scribble strip: the value, and who set it. A lamp lights when it wasn't you. */
function MotorizedFaderReadout({ className, value, changedBy, you = "You", ...props }: MotorizedFaderReadoutProps) {
  const remote = changedBy !== undefined && changedBy !== you
  return (
    <p
      data-slot="motorized-fader-readout"
      data-remote={remote ? "" : undefined}
      className={cn("flex flex-col items-center gap-0.5 text-center text-xs", className)}
      {...props}
    >
      <span className="font-mono text-sm font-semibold tabular-nums">{value}</span>
      {changedBy && (
        <span className="flex items-center gap-1 text-muted-foreground">
          <span
            aria-hidden
            className={cn("size-1.5 rounded-full", remote ? "bevel-led [--bevel-led:var(--motorized-fader-remote)]" : "bg-(--bevel-shade-strong)")}
          />
          {changedBy}
        </span>
      )}
    </p>
  )
}

export { MotorizedFader, MotorizedFaderReadout }
export type { MotorizedFaderProps, MotorizedFaderReadoutProps }

  4. Copy motorized-fader.css into your styles.

    styles/motorized-fader.css
    /*
 * Motorized fader: a console fader with a motor. When someone else sets
 * it, the cap travels there on its own; grab it and you have control.
 * Builds on bevel.css (metal, recessed, motion).
 */

:root {
  --motorized-fader-travel: 9rem; /* how far the cap moves, end to end */
  --motorized-fader-cap: 1.75rem; /* cap height */
  --motorized-fader-panel: oklch(0.3 0.01 260);
  --motorized-fader-panel-edge: oklch(0.2 0.01 260);
  --motorized-fader-cap-colour: oklch(0.86 0.01 260); /* brushed aluminium */
  --motorized-fader-cap-edge: oklch(0.6 0.01 260);
  --motorized-fader-line: oklch(0.3 0.01 260);
  --motorized-fader-remote: oklch(0.78 0.15 230); /* lit while the motor moves it */
}

[data-slot="motorized-fader"] {
  --bevel-material-recess: oklch(0.12 0.01 260);
  --bevel-led: var(--motorized-fader-remote);
}
[data-slot="motorized-fader-cap"] {
  --bevel-material: var(--motorized-fader-cap-colour);
  --bevel-material-edge: var(--motorized-fader-cap-edge);
}

  5. Import the stylesheets after Tailwind in your global CSS, foundation first.

    globals.css
    @import "./bevel.css";
@import "./motorized-fader.css";

Anatomy

Each part is its own component. Leave out the ones you don't need.

Anatomy
<MotorizedFader
  aria-label="Temperature"
  value={value}
  changedBy={changedBy}
  onValueChange={(v) => { setValue(v); setChangedBy("You") }}
/>
<MotorizedFaderReadout value={format(value)} changedBy={changedBy} />

Parts

PartRendersWhat it does
MotorizedFaderdiv (slider)value, onValueChange, min, max, step, changedBy, you, format, disabled. Arrow keys, Page Up and Down, Home and End, or drag. Reads as “0.70, set by Agent”. With reduced motion it jumps instead of travelling.
MotorizedFaderReadoutpA scribble strip: the value and who set it, lit when it wasn't you. Works on its own.