Dreamodus
54189ad07a
Docs/playground accuracy (from a full docs-vs-source audit): - Playground: drag-feel select covers pickup/relative rotary modes, is disabled for faders, and generated code no longer emits props the target component does not accept - API/README claims corrected: Shift-fine wheel scope, wheelStep and decimals defaults, trackInset row, data-part and ref-forwarding scope, VintageKnob readout exception, Meter peakHold tag, stale component lists, aria-valuetext wording, also-exported list API consistency fixes surfaced by the audit and the tutorial: - Keyboard gestures now fire onChangeStart (bracket parity with drag/ wheel - fixes gesture-scoped undo patterns) - name (hidden form input) added to Fader, LEDFader, ImageKnob - PushButton gets a themed keyboard-only focus ring + data-focus-visible New docs content: - Getting Started: 7-step guide with live examples and a gotchas list - Advanced guide: 8-step channel-strip tutorial ending in a live, themed, gesture-undoable strip with meter (plus headless demo) - Synth section: playable Web Audio synth - osc/filter/env/LFO/master all dreamknob controls, momentary-pad keyboard, analyser-driven Meter
74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
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 & 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>+scroll for fine control ·
|
|
double-click to reset · arrow keys work too
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|