---
title: "MercuryOS Dock — Framer component · Best of Framer"
description: "$5.00 · Framer component · by ETHAN CARTER · Navigation. MercuryOS Dock uses a proprietary \"Math-Based Hitbox\" system."
canonical: "https://framer.elliotli.dev/component/mercuryos-dock"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/MercuryOS Dock

# MercuryOS Dock

60fps liquid metal navigation

[View on Framer](https://framer.com/marketplace/components/mercuryos-dock/?via=elliot-li)

![MercuryOS Dock preview image 1](https://framer.elliotli.dev/og/component/mercuryos-dock/277c6e2cdf94fc76/1600x1200.jpg)

## Summary

MercuryOS Dock uses a proprietary "Math-Based Hitbox" system.

## Description

[Preview](https://tactical-noodles-768333.framer.app/)

**Your navigation bar is the most interacted-with element on your website. So why does it look exactly like everyone else's?**

Standard pill menus and basic hover states are dead. If you are building a premium SaaS, an Awwwards-level design portfolio, or a high-end Web3 platform, your interface needs to feel _alive_. It needs to feel expensive.

Move your mouse slowly, and the liquid gracefully wraps around the next icon. Swipe your mouse quickly, and the **Inertial Velocity Engine** takes over—the liquid physically skews and wobbles backward, struggling against its own weight and momentum before snapping flawlessly into place.

**But we didn’t stop at physics. We perfected the UX.** Most "complex" Framer components lag. They drop frames, or their hitboxes glitch when you hover them. MercuryOS Dock uses a proprietary "Math-Based Hitbox" system. It doesn’t read the DOM. It calculates exact spatial coordinates at 60 frames per second. The result? Zero lag. Zero jitter. Just buttery-smooth Apple-grade magnification scaling.

✨ **Feature List:**

-   **True Liquid Physics:** Custom SVG Gooey filters combined with dual-spring tracking for a hyper-realistic melting effect.
    
-   **Velocity Wobble:** The liquid mathematically skews based on the speed of your cursor.
    
-   **Mac OS Magnification:** Icons seamlessly scale up toward your cursor, just like an Apple desktop.
    
-   **Flawless Routing:** It isn't just a toy. Plug in your Framer pages or external URLs, and the buttons act as perfect, SEO-friendly native links.
    
-   **100% No-Code Customization:** Change the liquid color, glass blur, magnification strength, and icon colors directly in the Framer properties panel.
    

**The difference between a $1,000 website and a $10,000 website is in the micro-interactions.** MercuryOS Dock instantly elevates your site's perceived value. It turns a simple menu into a tactile toy that users will play with for minutes on end.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1117

## Details

- **Author**: ETHAN CARTER
- **Price**: $5.00
- **Published**: 2026-07-21
- **Updated**: 2026-08-11
- **Added**: 2026-07-21
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation