Add Toggle Control for Animation Modes

[Nitya-003]

Description

Currently, the TimeMachine component is strictly controlled by scroll and arrow keys. To improve accessibility and user customization, I propose adding a Toggle Switch component.

This toggle could be used to switch between "Performance Mode" (disabling blurs/heavy spring physics) or an "Auto-play" mode that cycles through the cards automatically.

Proposed Changes

1. New Component: Create a ModeToggle.tsx using Framer Motion for the sliding knob animation.
2. State Management: Implement a boolean state in time-machine.tsx to handle the toggle's effect on the stack.
3. Styling: Use Tailwind V4's new container queries or CSS variables to position the toggle in the bottom-right or top-right corner of the hero section.
4. Physics Adjustment: If "Performance Mode" is toggled, reduce the spring stiffness or set filter: blur(0) to save on GPU cycles.

Technical Implementation Ideas

Tip

Since we are using Motion, we can animate the toggle switch itself using layout props to ensure it feels as premium as the card stack.

// Example Toggle Logic
const [isSimplified, setIsSimplified] = useState(false);

// In the card mapping:
<motion.div 
  animate={{ 
    filter: isSimplified ? "blur(0px)" : `blur(${calculatedBlur}px)` 
  }}
/>

User Interface Tasks

• Design a minimalist toggle consistent with the Apple-inspired aesthetic.
• Add a keyboard shortcut (e.g., press P) to trigger the toggle.
• Ensure the toggle is bypassed by the use-shortcuts.ts logic when focus is on other inputs.