R_K
< BACK_TO_SANDBOX

[ NAVIGATION_FAB ]

> Exploration of FAB trigger mechanics & interaction states

1. Hover Reveal

Standard hover trigger. Good for desktop, bad for mobile.

const [isOpen, setIsOpen] = useState(false);

<MainFab 
  onMouseEnter={() => setIsOpen(true)}
  onMouseLeave={() => setIsOpen(false)} 
/>

2. Proximity Reveal

Expands hit area for anticipated intent.

<div className="w-48 h-48 absolute"
  onMouseEnter={() => setIsOpen(true)}
  onMouseLeave={() => setIsOpen(false)} 
/>

3. Long Press

Hold 500ms to unlock. Prevents accidental clicks.

const timer = setTimeout(() => {
  setIsOpen(true);
}, 500);
// Clear on mouseUp/mouseLeave

4. Scroll Reveal

Shows during activity, hides after 2s stillness.

Scroll inside this container...

Keep scrolling...

Buttons appear while active...

And hide after 2s of stillness.

More content...

End of content.

onScroll={() => {
  setVisible(true);
  clearTimeout(timer);
  timer = setTimeout(() => {
    setVisible(false);
  }, 2000);
}}

5. Current (Click)

Explicit toggle state. Safest for touch. CURRENT IMPLEMENTATION.

onClick={() => setIsOpen(!isOpen)}

// In BlogActions.tsx:
// - Menu/X icon toggle
// - Square buttons, not circular
// - Border-2 with white borders

6. Always Visible

Zero friction, high visual noise.

// Always render actions
<ActionButtons visible={true} />

[ DESIGN_NOTES ]

  • > Shape: Square buttons with border-2 border-white (no rounded corners)
  • > Toggle Icon: Menu → X (not rotating Plus icon)
  • > Hover Shadow: `hover:shadow-[4px_4px_0px_0px_#ffffff]`
  • > Active State: `active:translate-x-1 active:translate-y-1`
  • > Animation: `transition-all duration-300` for reveals
  • > Colors: ToC button uses `bg-brutalist-cyan`, others `bg-black` with cyan hover
  • > Mobile Consideration: Click toggle works on all devices (Proximity/Hover fail on touch)