Motion Core

MacOS Dock

MacosDock recreates the iconic Apple-style navigation menu with smooth magnification. It uses a sine wave function to calculate icon scale based on cursor proximity, delivering a fluid and responsive user experience.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add macos-dock

Import the component

Import the component into your Svelte file: 
import { MacosDock } from "$lib/motion-core";
import { MacosDock } from "$lib/motion-core";

Usage

<script lang="ts">
	import { MacosDock } from "motion-core";

	const items = [
		{
			src: "/images/demos/logo-notion.png",
			alt: "Notion",
			label: "Notion",
			href: "#",
		},
		{
			src: "/images/demos/logo-asana.png",
			alt: "Asana",
			label: "Asana",
			href: "#",
		},
		{
			src: "/images/demos/logo-slack.png",
			alt: "Slack",
			label: "Slack",
			href: "#",
		},
		{
			src: "/images/demos/logo-loom.png",
			alt: "Loom",
			label: "Loom",
			href: "#",
		},
		{
			src: "/images/demos/logo-spotify.png",
			alt: "Spotify",
			label: "Spotify",
			href: "#",
		},
		{
			src: "/images/demos/logo-illustrator.png",
			alt: "Adobe Illustrator",
			label: "Adobe Illustrator",
			href: "#",
		},
		{
			src: "/images/demos/logo-figma.png",
			alt: "Figma",
			label: "Figma",
			href: "#",
		},
		{
			src: "/images/demos/logo-photoshop.png",
			alt: "Adobe Photoshop",
			label: "Adobe Photoshop",
			href: "#",
		},
		{
			src: "/images/demos/logo-premiere.png",
			alt: "Premiere Pro",
			label: "Premiere Pro",
			href: "#",
		},
	];
</script>

<div
	class="relative flex h-full min-h-96 w-full items-center justify-center overflow-hidden"
>
	<div class="absolute bottom-0">
		<MacosDock {items} />
	</div>
</div>

Props

MacosDock

PropTypeDefault
items
DockItem[] —
baseWidth
number 4
magnification
number 1.5
distance
number 3
class
string —