# Passarela A translucent icon bar where each icon grows as the mouse gets closer, like on a Mac. > Passarela is a THM Componentes component that recreates the macOS app bar: round icons on a translucent, blurred strip grow as the mouse gets closer, and their neighbors grow a little less, forming a wave. It works horizontally or vertically and suits portfolio navigation and app shortcuts. - Category: Navigation and scroll - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/passarela/ ## What it looks like It recalls the Mac app bar, the one at the bottom of the screen. Icons sit on a strip with rounded corners, a thin border and a translucent background that blurs whatever is behind it. At rest each icon is 40 pixels; when the mouse passes, the closest icon grows up to 100 pixels and its neighbors grow less, by distance, up to 140 pixels from the center, creating a wave that follows the cursor. The size change takes 200 milliseconds with a soft ease-out. Thin separators split groups, and the bar can stand upright along the side. When the mouse leaves, everything returns to its starting size. ## You may be looking for this if you asked for something like - “a menu with icons that grow when I hover” - “an icon bar like the Mac one on my website” - “portfolio shortcuts that get bigger near the cursor” - “that macOS bar with the magnifying effect on icons” - “a floating icon menu at the bottom of the page” - “navigation with round icons that make a wave on hover” - “make my social media links more fun” ## Also known as icon zoom bar, macOS-style dock, dock menu, icon magnification, magnifying dock, app launcher bar ## When to use - Navigation for a personal or studio portfolio - Fixed shortcuts to the main areas of a web app - Social media and contact links in the footer - A toolbar for an editor or dashboard with few icons ## When to avoid - Menus with many items or no labels, where an icon alone does not say where it leads - Sites used mostly on phones, where there is no cursor to magnify the icons ## How to ask your AI ```text Create a macOS-style dock fixed at the bottom of my portfolio: round icons that grow as the mouse gets closer, an accessible label on each link, visible keyboard focus, normal size on phones and a version without magnification for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Passarela ### Does Passarela work on phones? It works as a regular bar. Passarela magnifies icons based on mouse movement, so on touch screens they stay at their 40-pixel resting size, and the links you place inside remain tappable. On phones, keep a comfortable touch area and clear labels. ### Can I use Passarela vertically, along the side of the page? Yes. With orientation set to vertical, Passarela stacks the icons in a 58-pixel-wide column and magnifies them by the vertical mouse position. One caveat: the math compares the mouse position on the page with the icon position on screen, so on a scrolled page the magnification drifts; ask your AI to use clientY instead of pageY. ### Is Passarela accessible by keyboard? Passarela itself does not handle it: each icon is a box without focus, and magnification only responds to the mouse. If you place links or buttons inside each DockIcon, they get focus normally; ask your AI for an aria-label on each one and a visible focus style, since the icon alone does not say where it leads. ## Related components - [Bússola](https://vibecode.thmtecnologia.com/en/components/bussola/): A floating icon bar where icons grow as the cursor comes close and get pulled toward it like magnets. - [Bonde](https://vibecode.thmtecnologia.com/en/components/bonde/): A header menu where a single panel slides and resizes as you move from one item to the next. - [Atol](https://vibecode.thmtecnologia.com/en/components/atol/): A black pill at the top of the screen that grows and reshapes to show music, a call, an alert or a timer. - [Trevo](https://vibecode.thmtecnologia.com/en/components/trevo/): A search box that opens with Ctrl K or ⌘K to find pages and run actions without leaving the keyboard. - [Crachá](https://vibecode.thmtecnologia.com/en/components/cracha/): A row of overlapping round photos; on hover, a tag with name and role pops up and tilts with the cursor. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).