Tactile Toggle

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { TactileToggle, TactileFlip, TactilePush, TactileDial } from '@/components/effects/tactile-toggle/tactile-toggle'

export function Panel() {
  const [armed, setArmed] = useState(false)
  return (
    <>
      {/* Slide toggle: uncontrolled, or controlled with checked + onCheckedChange */}
      <TactileToggle preset="Graphite" label="Monitor" defaultChecked onCheckedChange={v => setMonitor(v)} />

      {/* Flip switch under its guard */}
      <TactileFlip preset="Signal" label="Arm" checked={armed} onCheckedChange={setArmed} />

      {/* Latching push button with travel and an LED ring */}
      <TactilePush preset="Porcelain" label="Power" sound haptics />

      {/* Rotary dial with 3 to 5 detents: drag, tap or arrow keys */}
      <TactileDial preset="Walnut" label="Mode" steps={4} stepLabels={['A', 'B', 'C', 'D']} defaultValue={1} />
    </>
  )
}

// Every piece takes the same look props (preset, body, knob, trim, accent, finish, glow, brushed, depth, stiffness,
// bounce, size, sound, haptics, labels, tone), plus ordinary button or div props (ref, aria-*, id, onClick).
// The stage above is <TactileToggleShowcase />, also exported, if you want the same panel.

<TactileToggle preset="Graphite" body={"#c3c8d0"} />

• Aluminium
• Graphite
• Porcelain
• Walnut
• Signal

What the command adds to your project, and where.

• components/effects/tactile-toggle/tactile-toggle.tsx

  The component.

• components/effects/tactile-toggle/toggle.tsx

  The component.

• components/effects/tactile-toggle/flip.tsx

  The component.

• components/effects/tactile-toggle/push.tsx

  The component.

• components/effects/tactile-toggle/dial.tsx

  The component.

• components/effects/tactile-toggle/showcase.tsx

  The component.

• components/effects/tactile-toggle/core.tsx

  The component.

• components/effects/tactile-toggle/hooks.ts

  The component.

• components/effects/tactile-toggle/look.ts

  The component.

• components/effects/tactile-toggle/feel.ts

  The component.

• components/effects/tactile-toggle/styles.ts

  The component.

• components/effects/tactile-toggle/stage-styles.ts

  The component.

• components/effects/tactile-toggle/textures.ts

  The component.

• lib/effect-runtime.ts

  Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

• Each piece is a real control. The slide, flip and push are a <button role="switch" aria-checked>; the dial is a role="slider" with aria-valuenow and aria-valuetext. Space and Enter flip a switch; Arrow keys, Home and End step the dial. A visible focus ring, disabled, controlled (checked / value) and uncontrolled (defaultChecked / defaultValue) all work, and refs are forwarded.
• Motion is a small damped spring written straight to CSS custom properties each frame, so nothing re-renders while it moves. Stiffness and bounce are props. The slide knob can be dragged and settles into the nearer end; the dial resists between detents and clicks over each one.
• Everything is DOM, CSS and inline SVG: layered gradients, inset and outset shadows, specular highlights and a brushed, grain or wood texture from a tiny SVG filter. It stays sharp at any size and needs no canvas, WebGL or image files.
• Under prefers-reduced-motion every state change is instant: no spring, no easing, no overshoot.
• Sound is off by default. With sound on, a click is synthesised with WebAudio (no files) and only ever plays from a click, key press or drag, never before the first gesture. With haptics on, navigator.vibrate(8) buzzes where supported.
• Tone is 'auto' by default: it follows a dark or light class on <html> (or the OS setting) and lightens or deepens shadows and engraving to suit. Pieces are sized in em, so size or a parent font-size scales the whole piece.

See all effects