macOS Interactive Dock

effects

Smooth magnetic magnification dock with spatial scaling interpolation.

#dock#macos#magnification#menu#spatial

Live Interactive Preview

Component Source Code

Select language in the dropdown

MacOSDock.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Home, Compass, Search, Bell, Settings, MessageSquare } from 'lucide-react';
5
6export default function MacOSDock() {
7  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
8
9  const icons = [
10    { icon: Home, label: 'Home' },
11    { icon: Compass, label: 'Explore' },
12    { icon: Search, label: 'Search' },
13    { icon: MessageSquare, label: 'Chat' },
14    { icon: Bell, label: 'Notifications' },
15    { icon: Settings, label: 'Settings' }
16  ];
17
18  return (
19    <div className="flex items-center justify-center p-6 select-none">
20      <div className="flex items-end gap-2 sm:gap-3 rounded-3xl border border-slate-200/80 dark:border-white/10 bg-white/70 dark:bg-slate-900/80 p-2.5 sm:p-3 backdrop-blur-2xl shadow-xl">
21        {icons.map((item, idx) => {
22          const Icon = item.icon;
23          const isHovered = hoveredIdx === idx;
24          const isNeighbor = hoveredIdx !== null && Math.abs(hoveredIdx - idx) === 1;
25
26          return (
27            <button
28              key={item.label}
29              onMouseEnter={() => setHoveredIdx(idx)}
30              onMouseLeave={() => setHoveredIdx(null)}
31              style={{
32                transform: isHovered ? 'scale(1.35) translateY(-8px)' : isNeighbor ? 'scale(1.15) translateY(-4px)' : 'scale(1)',
33                transition: 'transform 0.2s cubic-bezier(0.2, 0, 0, 1)'
34              }}
35              className="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-100 shadow-sm transition hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 cursor-pointer"
36            >
37              <Icon className="h-5 w-5" />
38            </button>
39          );
40        })}
41      </div>
42    </div>
43  );
44}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/MacOSDock.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import macOSInteractiveDock from '@/components/effects/MacOSDock';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <macOSInteractiveDock />
7    </main>
8  );
9}