"use client"; import { type MotionValue, motion, useMotionValue, useSpring, useTransform, } from "framer-motion"; import { useRef } from "react"; const initialValues = [ { name: "finder", url: "https://cdn.jim-nielsen.com/macos/256/finder-2021-09-10.png?rf=1024", }, { name: "siri", url: "https://cdn.jim-nielsen.com/macos/256/siri-2021-09-10.png?rf=1024", }, { name: "raycast", url: "https://cdn.jim-nielsen.com/macos/256/raycast-2023-02-14.png?rf=1024", }, { name: "telegram", url: "https://cdn.jim-nielsen.com/macos/256/telegram-2021-07-12.png?rf=1024", }, { name: "github-desktop", url: "https://cdn.jim-nielsen.com/macos/256/github-desktop-2021-05-20.png?rf=1024", }, { name: "figma", url: "https://cdn.jim-nielsen.com/macos/256/figma-2021-05-05.png?rf=1024", }, ]; export default function DockDemo() { const mouseX = useMotionValue(Number.POSITIVE_INFINITY); return ( <>

Dock

mouseX.set(e.pageX)} onMouseLeave={() => mouseX.set(Number.POSITIVE_INFINITY)} className="-translate-x-1/2 absolute left-1/2 flex h-[65px] items-end gap-2 rounded-3xl border border-white/20 bg-black/20 px-2 pb-[8px] backdrop-blur" > {initialValues.map((value, index) => ( ))}

); } function EachIcon({ mouseX, value, }: { mouseX: MotionValue; value: { name: string; url: string }; }) { const ref = useRef(null); const distance = useTransform(mouseX, (val) => { const obj = ref.current?.getBoundingClientRect() || { x: 0, width: 0 }; return val - obj.x - obj.width / 2; }); const widthSync = useTransform(distance, [-200, 0, 200], [48, 80, 48]); const width = useSpring(widthSync, { mass: 0.1, stiffness: 300, damping: 15, }); return (

{value.name.replaceAll("-", " ")}

); }

Dock

On this page