←
Arc Corner Slider Toggle

Arc Corner Slider Toggle

Arc Slider Switch

Interactive corner arc slider toggle with light and dark mode states, rotating capsule knob along a 90° circular track, sunken sunburst dial, and glowing magenta laser beam.

Interactive Playground & Studio

Live Controls
arc-corner-toggle.tsx
STANDERD
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Sunburst Dial Modescale={0.88}
STANDERD

90° circular corner arc track with rotating capsule knob and laser beam flare.

Features & Physics

✓90° circular arc track calculation
✓Dual state toggle with angle physics
✓Sunken sunburst dial background
✓Glowing magenta laser channel glow

Code & Integration

Customized live with your active playground prop settings:

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

export default function Example() {
  return <ArcCornerToggle scale={0.88} />;
}

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
scalenumber1CSS transform scale multiplier for responsive fitting.
onToggle(state: boolean) => voidundefinedState change listener.