The action holds still. The reason rotates.
A button whose whole label changes is a button nobody trusts — you cannot tell what the click does. So the small line always reads GET THE APP, and the big line underneath carries the reason. The eye lands on the reason, the hand knows what it is clicking, and the pill never changes width.
Opens on the camera, the one thing a web page cannot do at all.
Share a video, get ingredients, steps and nutrition back.
Voice search finds dinner from what is already in the fridge.
Motion
- 3.5s on each reason, then a 400ms crossfade with a 6px rise. Nothing slides sideways — horizontal motion in a header reads as a carousel and invites a swipe.
- Fixed 212px width. The longest reason sets it, and it never reflows the search field mid-rotation.
- Three full cycles, then it rests on "Scan any plate". A label that moves forever stops being read and starts being ignored.
- Pauses when the tab is hidden, so someone returning after lunch does not meet a half-finished fade.
So it stays usable
- The button's accessible name is always "Get the Grub Planit app". The rotating line is aria-hidden, so a screen reader hears one stable control.
- prefers-reduced-motion: no rotation at all — it shows "Scan any plate" and stays there.
- Hover or keyboard focus freezes it on whatever is showing, so nothing changes under the cursor as it is clicked.
- Every state points at the same place, so a click is safe whenever it lands.
Where it rotates
Desktop header only. The phone's Get app chip stays fixed — at 76px the label cannot change length without shoving the menu icon, and a moving target next to a scrolling thumb is a mis-tap waiting to happen.
The extension has its own outlined button to the left of this one, with its own explainer. Two products, two controls — but only one of them is filled, so they never compete.
Only shipped features rotate here. The tracker stays off this list until it is live — it earns its place on the /app page instead, clearly marked coming soon.
