# Navigation and scroll

A macOS-style dock, animated tabs, a command palette, shape-shifting menus, an iPhone-style status pill, modals, lists, a timeline, a reading progress bar, horizontal scrolling, scrollytelling and scroll-triggered text reveals. Components that guide people through a page and turn scrolling into a story.

Requests that lead to this category:

- “a menu with icons that grow on hover”
- “a Ctrl K shortcut to search the site”
- “content that moves sideways as I scroll down”
- “a section that tells a story as you scroll”

- [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.
- [Baliza](https://vibecode.thmtecnologia.com/en/components/baliza/): Tooltips and menus pinned to the button that opens them, switching sides on their own when they hit an edge.
- [Balsa](https://vibecode.thmtecnologia.com/en/components/balsa/): Scroll down and panels with photos and large headlines slide sideways, with a progress bar along the bottom.
- [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.
- [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.
- [Cadência](https://vibecode.thmtecnologia.com/en/components/cadencia/): A large block of text where each word comes out of a blur and turns sharp as you scroll, at reading pace.
- [Maquete](https://vibecode.thmtecnologia.com/en/components/maquete/): A product drawn in real time that spins, splits into parts and snaps back together as you scroll.
- [Roteiro](https://vibecode.thmtecnologia.com/en/components/roteiro/): A pinned image beside the text that swaps, zooms or crops as each part of the story comes into focus.
- [Translado](https://vibecode.thmtecnologia.com/en/components/translado/): Click a gallery card and its photo and title grow smoothly until they become the detail page.
- [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.
- [Almanaque](https://vibecode.thmtecnologia.com/en/components/almanaque/): A vertical line with pinned milestones that a colored beam fills in as the page scrolls.
- [Arquipélago](https://vibecode.thmtecnologia.com/en/components/arquipelago/): A row of tabs stuck together like liquid, where the chosen tab breaks away like a droplet.
- [Cavalete](https://vibecode.thmtecnologia.com/en/components/cavalete/): A product screen that starts tilted back and turns to face you as the page scrolls, with the headline rising.
- [Comboio](https://vibecode.thmtecnologia.com/en/components/comboio/): A row of logos, testimonials or tags that slides in a seamless loop, horizontally or vertically.
- [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.
- [Embarque](https://vibecode.thmtecnologia.com/en/components/embarque/): A waiting screen that lists the steps of a process and checks each one off as it moves along.
- [Farol](https://vibecode.thmtecnologia.com/en/components/farol/): A thin line beside the text gains a colorful beam that travels down as people read and scroll.
- [Fichário](https://vibecode.thmtecnologia.com/en/components/fichario/): Tabs where a rounded highlight slides to the chosen option, with the content in a stack of cards.
- [Légua](https://vibecode.thmtecnologia.com/en/components/legua/): A floating pill at the top of the screen shows how much of the page has been read and opens into a menu on click.
- [Montanha-russa](https://vibecode.thmtecnologia.com/en/components/montanha-russa/): Photos, logos or words gliding nonstop along a curved path, which people can also drag.
- [Passarela](https://vibecode.thmtecnologia.com/en/components/passarela/): A translucent icon bar where each icon grows as the mouse gets closer, like on a Mac.
- [Postal](https://vibecode.thmtecnologia.com/en/components/postal/): A window that tilts up from the page in 3D with a slight bounce, over a dimmed and blurred backdrop.
- [Recado](https://vibecode.thmtecnologia.com/en/components/recado/): Notices that pop in one at a time at the top of the list and push the older ones down, like a live feed.