←
Tactile Neumorphic Dual-Dome Switch

Tactile Neumorphic Dual-Dome Switch

Photon Channel

Photorealistic 3D neumorphic toggle switch with an outer recessed bevel cavity, deep carved shadow trench, illuminated emerald photon channel, and dual-dome sculpted tactile thumb.

Interactive Playground & Studio

Live Controls
tactile-neumorphic-switch.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Off StatestateMode="off"

Resting neutral clay trench with dual-dome sculpted knob.

On StatestateMode="on"

Glowing emerald photon illumination channel with right dock.

Interactive Springtheme="emerald-photon"

Interactive 60fps spring toggle with dynamic channel fill.

Cyber Laser Cyantheme="cyber-cyan"

High-voltage laser cyan glowing optical underlayer.

UI Pirate Magmatheme="magma-orange"

Signature magma orange molten photon illumination.

Dark Obsidian Stealththeme="dark-obsidian"

Midnight dark clay chassis with glowing sapphire channel.

Features & Physics

✓Pixel-accurate OFF and ON state rendering
✓Dual-dome sculpted tactile thumb with spherical light highlights
✓Deep recessed shadow trench with illuminated emerald fill
✓Outer recessed bevel cavity with 3D inset lighting
✓60fps responsive spring motion physics

Code & Integration

Customized live with your active playground prop settings:

import { TactileNeumorphicSwitch } from "@/components/TactileNeumorphicSwitch";

export default function Example() {
  return (
    <TactileNeumorphicSwitch
      theme=""
      size="md"
      defaultChecked={true}
      onChange={(checked) => console.log("Switch state:", checked)}
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
checkedbooleanfalseControlled boolean state.
stateMode"interactive" | "off" | "on""interactive"Force a static OFF, static ON, or live toggle.
theme"emerald-photon" | "cyber-cyan" | "magma-orange" | "dark-obsidian" | "hyper-violet" | "amber-crt""emerald-photon"Illumination theme palette.
size"sm" | "md" | "lg" | "xl""md"Proportional scale size preset.
showGridbooleantrueShows fine mesh canvas grid.