Tilted Dock

Camera

Favorites

Music

Stars

Installation

Usage

import TiltedDock from "@/components/ruixen/tilted-dock";
import { Home, Search, Bell, User, Settings } from "lucide-react";
 
const dockItems = [
  { id: 1, icon: <Home size={28} />, label: "Home" },
  { id: 2, icon: <Search size={28} />, label: "Search" },
  { id: 3, icon: <Bell size={28} />, label: "Alerts" },
  { id: 4, icon: <User size={28} />, label: "Profile" },
  { id: 5, icon: <Settings size={28} />, label: "Settings" },
];
 
export default function App() {
  return (
    <TiltedDock
      items={dockItems}
      tilt={{ baseX: 18, maxY: 10 }}
      hoverScale={1.4}
    />
  );
}

Props

Prop	Type	Default	Description
`items`	`DockItem[]`	Default items	Array of dock items
`tilt`	`{baseX?: number, maxY?: number}`	`{baseX: 18, maxY: 10}`	Tilt configuration
`hoverScale`	`number`	`1.4`	Scale factor for hovered item

Features

3D Perspective: Uses CSS transforms for depth
Mouse Parallax: Dock tilts based on mouse position
Hover Effects: Icons scale and lift on hover
Depth Stacking: Non-hovered icons move back in Z-space
Labels: Animated labels appear on hover

3D Effects

Base Tilt: rotateX(18deg) gives forward tilt
Mouse Tracking: rotateY follows horizontal mouse movement
Z-Translation: Hovered icons move forward, others move back
Transform Style: preserve-3d maintains 3D context

Types

interface DockItem {
  id: number;
  icon: React.ReactNode;
  label: string;
}