# Atol A black pill at the top of the screen that grows and reshapes to show music, a call, an alert or a timer. > Atol is an exclusive THM Componentes component that recreates the status island of recent phones: a black pill that stretches with spring physics to show an alert, a playing track, a call or a timer, with buttons that actually work. It suits live status in apps, orders in progress, players and countdowns. - Category: Navigation and scroll - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/atol/ ## What it looks like Picture the black cutout at the top of a phone coming to life. At its smallest, the pill shows only the camera dot; when something happens, it grows sideways and downward and wobbles slightly before it settles, like a rubber band. In music mode it shows cover art, a title, pulsing sound bars and controls; during a call, the caller's initials with green and red buttons; in timer mode, orange digits counting down. Content swaps with a blurred crossfade and the shadow deepens as the island opens. By default it sits on a phone frame with a lock screen, clock and wallpaper. ## You may be looking for this if you asked for something like - “that black iPhone pill that expands to show what's playing” - “an alert at the top of the screen that stretches out and shrinks back” - “show a live order status like a phone notification” - “a compact music player that opens when I click it” - “a shape-shifting island with a springy feel, like Apple's” - “a little bar at the top of my app with a running timer” - “mock a phone screen getting an incoming call on my landing page” ## Also known as status island, live activity, status pill, morphing pill, animated notch, live status indicator ## When to use - Showing orders, deliveries or rides in progress inside an app - A mini player for music, podcasts or audio that opens on tap - A mobile app showcase page, with the phone frame turned on - Countdowns for an offer, a class or a live session ## When to avoid - Critical alerts that need more room and an explicit confirmation - Long messages: the expanded notification shows only two lines of text - Sites with no mobile identity, where the phone reference feels out of place ## How to ask your AI ```text Create a status pill like the iPhone's dynamic island at the top of my Vue app: it expands with a spring animation to show order status, a music player and a timer, in my brand colors, fully keyboard accessible and with a no-animation version for people who prefer reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Atol ### Can I change the texts, colors and frame of Atol? Yes. Atol takes props for the island color, two accent colors, the cover and track name, the caller, the notification text and the timer length. The frame prop turns the phone frame on or off, and the THM Componentes prompt tells your AI to use your project color tokens. ### Does Atol work with a keyboard and screen readers? Yes. The island is a button: click, Enter or Space expand and collapse it, and Escape collapses it. The state picker works as a radio group with arrow keys, Home and End. Every change is announced in a live region for screen readers, with a summary such as the playing track or the time left on Atol's timer. ### Does Atol respect reduced motion settings? Yes. When reduced motion is on, Atol stops the automatic cycle, shows the pill already expanded and resizes it instantly, without the spring. The sound bars stay still and content transitions no longer animate. The cycle also pauses when the island leaves the screen or when someone interacts with it. ## Related components - [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. - [Baralho](https://vibecode.thmtecnologia.com/en/components/baralho/): Notifications that pop up in a corner, stacked like cards, and go away on their own or with a sideways swipe. - [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. - [Estojo](https://vibecode.thmtecnologia.com/en/components/estojo/): An iPhone drawn in SVG, with the island at the top and your app screenshot filling the screen. - [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. --- 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).