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
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.
