Vision OS Glass Dock

Installation

npx kinetic-ui-cli@latest add vision-glass-dock

How It Works

The VisionGlassDock uses framer-motion's useMotionValue to track the mouse's X coordinate across the entire dock container. For each individual icon, a useTransform hook calculates its exact distance to the mouse cursor. Based on this distance, the width and height of the icon are smoothly interpolated, creating that iconic magnification effect without any jitter.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { VisionGlassDock } from "@/components/creative/vision-glass-dock";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { VisionGlassDock } from "@/components/creative/vision-glass-dock";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <VisionGlassDock
        items{/* value */}
        magnification{10}
        distance{10}
      />
    </div>
  );
}