Initial release: dreamknob library + showcase

React + TypeScript knob/fader library with a headless interaction core
(rotary, relative-drag and track modes, wheel, keyboard, a11y), SVG
primitives, nine prebuilt skins, seven-segment display engine, and a
Vite showcase with gallery, live playground and API docs.

apps/docs/src/sections/Hero.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  Fader,
+  FlatKnob,
+  LEDFader,
+  LEDKnob,
+  MetalKnob,
+  NeonKnob,
+  RubberKnob,
+  SteppedKnob,
+  VintageKnob,
+} from 'dreamknob';
+
+export const Hero: React.FC = () => {
+  const [copied, setCopied] = React.useState(false);
+  return (
+    <header className="hero">
+      <div className="container">
+        <h1>
+          Knobs that feel like <span className="grad">hardware.</span>
+        </h1>
+        <p className="tagline">
+          <b>dreamknob</b> is a feature-full React + TypeScript knob &amp; fader library.
+          Rotary, linear, 2D, 3D, digital and analog — with a headless core, any number
+          range, any decimal precision, and colors you fully control.
+        </p>
+        <div className="install">
+          <span>pnpm add dreamknob</span>
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText('pnpm add dreamknob');
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1400);
+            }}
+          >
+            {copied ? '✓' : 'copy'}
+          </button>
+        </div>
+
+        <div className="rack">
+          <div className="rack-screws">
+            <span /><span /><span /><span />
+          </div>
+          <div className="rack-row">
+            <MetalKnob size={96} label="Gain" defaultValue={64} color="#4cc2ff" aria-label="Gain" />
+            <VintageKnob size={96} label="Drive" defaultValue={7} min={0} max={10} step={0.1} aria-label="Drive" />
+            <RubberKnob size={96} label="Cutoff" defaultValue={72} color="#ff9640" aria-label="Cutoff" />
+            <LEDKnob size={96} label="Rate" defaultValue={120} min={40} max={240} step={1} color="#3df2ad" aria-label="Rate" />
+            <NeonKnob size={96} label="Space" defaultValue={35} color="#e44cff" aria-label="Space" />
+            <SteppedKnob size={96} label="Mode" positions={['LP', 'BP', 'HP', 'NT']} defaultValue={0} aria-label="Mode" />
+            <FlatKnob size={96} label="Mix" defaultValue={50} unit="%" step={1} arcFrom="center" aria-label="Mix" />
+            <Fader length={128} breadth={40} label="Out" defaultValue={-6} min={-60} max={12} step={0.5} unit=" dB" aria-label="Output level" />
+            <LEDFader
+              length={128}
+              label="Level"
+              defaultValue={70}
+              step={1}
+              zones={[
+                { upTo: 0.6, color: '#3df2ad' },
+                { upTo: 0.85, color: '#ffd23e' },
+                { upTo: 1, color: '#ff4d6b' },
+              ]}
+              aria-label="Level meter"
+            />
+          </div>
+          <div className="rack-hint">
+            drag to rotate · scroll to nudge · <kbd>⇧</kbd> for fine control · double-click to
+            reset · arrow keys work too
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};