Announcement Ribbon

What it does

The announcement ribbon is the slim strip along the edge of your site that carries the news: free returns, a holiday closing, a fresh drop. It can hold one message or quietly cycle through two or three, each with its own little link.

• The rotation pauses the moment someone hovers to read.
• The page never jiggles when messages swap, appear, or get dismissed.
• The X tucks it away for the rest of the visit.
• Messages live in one list; empty entries never render, and an empty list means no ribbon.
• Less-motion visitors get a plain swap; screen readers hear changes politely.

How it works

1. 01

   Choose one static message or a cycle that swaps every 5 seconds with a soft crossfade.

2. 02

   Pick where it lives, at the very top above your header or pinned to the bottom of the screen.

3. 03

   Copy the prompt, the whole build spelled out for your AI, into whichever AI you use.

4. 04

   Type your real announcements into the list, each with an optional link label and address; anything left empty simply never shows.

5. 05

   Hover the ribbon to test that the cycle pauses while you read, then picks back up when your cursor leaves.

6. 06

   Dismiss it with the X and scroll around: it should collapse smoothly, shift nothing, and stay gone for the visit.

What you can customize

• One message or a cycle: static shows just your first message, no timers; rotate swaps every 5 seconds with a soft crossfade, pausing on hover.
• Where it sits: top places it above your header and lets it scroll away; bottom pins it to the screen edge so it's always in view.
• Colors, text size, and links all adapt to your site automatically, because your AI builds the ribbon right inside your own design.

News that needs a title, a line of text and a button gets more room in a floating announcement card.

For news that keeps sliding inside your page, with no close button, use a scrolling announcement bar between your sections.