Floating Dock

Overview

Core Concept

The FloatingDock component provides a macOS-style dock with magnetic hover effects, spring physics animations, and full keyboard accessibility. Built on Framer Motion, it delivers fluid scaling animations based on mouse proximity.

Key Features

• Magnetic hover effect — Icons smoothly scale based on mouse proximity
• Spring animations — Natural feeling physics-based transitions
• Keyboard navigation — Full arrow key support with focus management
• Link obfuscation — Optional base64-encoded hrefs for spam protection
• Variant system — Full support for intent, styling, shape, and elevation

Anatomy

• FloatingDock — Root component (context provider, mouse/keyboard handling)
• FloatingDock.Item — Interactive dock item with animated scaling
• FloatingDock.Separator — Visual divider between item groups
• useDock() — Hook for custom integrations

Installation

Usage

Basic

import {
  FloatingDock,
  type DockItemData,
} from '@/components/azemmur/components/floating-dock';

const items: DockItemData[] = [
  {
    title: 'GitHub',
    icon: <IconBrandGithub className="size-full" />,
    href: 'https://github.com',
  },
  {
    title: 'LinkedIn',
    icon: <IconBrandLinkedin className="size-full" />,
    href: 'https://linkedin.com',
  },
];

export default function Example() {
  return (
    <FloatingDock intent="primary" size="md">
      {items.map((item, i) => (
        <FloatingDock.Item
          key={item.title}
          item={item}
          tabIndex={i === 0 ? 0 : -1}
        />
      ))}
    </FloatingDock>
  );
}

With Separator

<FloatingDock orientation="horizontal" styling="ghost">
  {mainItems.map((item, i) => (
    <FloatingDock.Item
      key={item.title}
      item={item}
      tabIndex={i === 0 ? 0 : -1}
    />
  ))}
  <FloatingDock.Separator />
  {secondaryItems.map((item) => (
    <FloatingDock.Item key={item.title} item={item} tabIndex={-1} />
  ))}
</FloatingDock>

Using useDock() for custom items

import { useDock } from '@/components/azemmur/components/floating-dock/dock-context';

function CustomDockItem() {
  const { mousePosition, orientation, intent, styling } = useDock();
  // Build custom dock item with context values
  return <div>Custom content</div>;
}

API Reference

FloatingDock (root)

FloatingDock.Item

FloatingDock.Separator

DockItemData

useDock()

Hook to access dock context values for building custom dock items.

Keyboard Navigation

Keyboard navigation adapts to the dock orientation:

Vertical orientation:

Horizontal orientation:

Common keys:

Accessibility

• ARIA labels — Proper aria-label attributes from item titles
• Focus indicators — Visible focus rings for keyboard navigation
• Role semantics — Links maintain proper anchor semantics

Features

• Magnetic hover effect — Icons smoothly scale based on mouse proximity
• Spring animations — Natural feeling physics-based transitions
• Keyboard navigation — Full arrow key support with focus management
• Link obfuscation — Optional base64-encoded hrefs for spam protection
• Variant system — Full support for intent, styling, shape, and elevation

Credits

• Inspired by macOS dock interactions
• Built with Motion for animations