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

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

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

{item.title}

); } `,__src__:"src/registry/core/ui/magnified-dock.tsx",__event__:"copy_usage_code",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'use client'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" classNames "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'classnames'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" motion,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" MotionValue,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useMotionValue,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useSpring,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useTransform,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'framer-motion'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { useRef } "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'react'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'react'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Tooltip,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" TooltipContent,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" TooltipProvider,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" TooltipTrigger,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" '@/components/ui/tooltip'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" DockItem"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" source"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" Dock"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" mouseX "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useMotionValue"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(Infinity);"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" gradients "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ["})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Warm Flame'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" source:"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://webgradients.com/public/webgradients_png/001%20Warm%20Flame.png'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Frozen Dreams'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" source:"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://webgradients.com/public/webgradients_png/009%20Frozen%20Dreams.png'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Amy Crisp'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" source:"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://webgradients.com/public/webgradients_png/014%20Amy%20Crisp.png'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Deep Blue'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" source:"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://webgradients.com/public/webgradients_png/016%20Deep%20Blue.png'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Wild Apple'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" source:"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'https://webgradients.com/public/webgradients_png/025%20Wild%20Apple.png'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ];"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"classNames"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'inset-x-0 z-50 mx-auto w-fit'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onMouseMove={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(e) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" mouseX."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"set"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(e.pageX)"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onMouseLeave={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" mouseX."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"set"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(Infinity)"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"classNames"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'mx-auto flex h-16 items-end gap-2 rounded-full dark:bg-black dark:border bg-white px-4 pb-3 shadow'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"gradients."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"slice"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"3"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"((item, index) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"AppIcon"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" mouseX={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"mouseX"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`icon-${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" item={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ))"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'mx-2 mt-3 h-8 w-px self-center bg-gray-100 dark:bg-gray-900'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"gradients."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"slice"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"2"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:")."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"((item, index) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"AppIcon"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" mouseX={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"mouseX"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`icon-${"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"3"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" +"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"}`"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" item={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ))"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" AppIcon"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"({ mouseX, item }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { mouseX"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" MotionValue"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"; item"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" DockItem"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }) {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ref "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:">(null);"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" distance "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(mouseX, (val) "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" bounds "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ref.current?."}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"getBoundingClientRect"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"??"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" { x: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", width: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" };"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" val "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" bounds.x "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" bounds.width "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"/"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" 2"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" });"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" widthSync "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(distance, ["}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"150"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"150"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"40"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"40"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"]);"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useSpring"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(widthSync, {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" mass: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"0.1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" stiffness: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"150"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" damping: "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"12"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" });"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" scale "}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"(width, ["}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"40"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"100"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"2.5"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"]);"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TooltipProvider"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" delayDuration={"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"200"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"Tooltip"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TooltipTrigger"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ref={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" style={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height: width,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex cursor-pointer items-center justify-center rounded-md bg-gray-100 dark:bg-zinc-900 dark:border dark:border-zinc-800'"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative overflow-hidden rounded-full'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" style={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'23px'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'23px'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" scale: scale,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-full w-full rounded-full'"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" style={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" background: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"`url(${"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"source"}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"})`"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" backgroundSize: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'cover'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" backgroundPosition: "}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'center'"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"TooltipContent"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,l.jsx)(n.span,{style:{color:"#99FFE4"},children:"'bg-white text-black shadow-sm dark:bg-black dark:text-white mb-1 h-8 border px-2 py-1.5'"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFC799"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:">{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"item.title"}),(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"}"})})]})})})}),` `]})}function C(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(d,e)})):d(e)}var w=C;function x(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(v);})(); ;return Component;

Magnified Dock

Resources