'use client'; import { MotionValue, motion, useMotionValue, useSpring, useTransform, } from 'motion/react'; import { useRef } from 'react'; import React from 'react'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import classNames from 'classnames'; export type DockItem = { title: string; source: string; }; export default function Dock() { let mouseX = useMotionValue(Infinity); const gradients = [ { title: 'Warm Flame', source: 'https://webgradients.com/public/webgradients_png/001%20Warm%20Flame.png', }, { title: 'Frozen Dreams', source: 'https://webgradients.com/public/webgradients_png/009%20Frozen%20Dreams.png', }, { title: 'Amy Crisp', source: 'https://webgradients.com/public/webgradients_png/014%20Amy%20Crisp.png', }, { title: 'Deep Blue', source: 'https://webgradients.com/public/webgradients_png/016%20Deep%20Blue.png', }, { title: 'Wild Apple', source: 'https://webgradients.com/public/webgradients_png/025%20Wild%20Apple.png', }, ]; return (

mouseX.set(e.pageX)} onMouseLeave={() => mouseX.set(Infinity)} className={classNames( 'mx-auto flex h-16 items-end gap-2 rounded-full bg-white px-4 pb-3 shadow-base ' )} > {gradients.slice(0, 3).map((item, index) => ( ))}

{gradients.slice(-2).map((item, index) => ( ))}

); } function AppIcon({ mouseX, item }: { mouseX: MotionValue; item: DockItem }) { let ref = useRef(null); let distance = useTransform(mouseX, (val) => { let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 }; return val - bounds.x - bounds.width / 2; }); let widthSync = useTransform(distance, [-150, 0, 150], [40, 100, 40]); let width = useSpring(widthSync, { mass: 0.1, stiffness: 150, damping: 12 }); let scale = useTransform(width, [40, 100], [1, 2.5]); return (

{item.title}

); }

macOS Magnified Dock

Resources