Floating Bottom Pill Banner Block for React

The pill renders in flow so the preview, a stack of blocks and your own layout can all see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto to the pill (the section named "What's new in Stoatlab") and remove the block's wrapper padding (py-8 md:py-12) if the pill lives on its own. On phones it then fills the width between the insets; from sm it is centred and as wide as its content. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))], and make sure it never covers a cookie prompt or a chat button.

The block's rows shrink from their full height to nothing while the pill fades, in 300 ms, and it ends at its top rule, so the next section's rule takes its place. Once folded it is inert and hidden from screen readers, and focus moves to a short visually hidden line, "Release banner dismissed.", so the next Tab carries on from the same spot. With reduced motion it closes at once.

Write a key named after the release (stoatlab:4.2-search) to a cookie in the dismiss handler and read it on the server, so the pill is never rendered for someone who closed it. Reading it in an effect would show the pill for a frame and then move the page as it folds. A new release gets a new key, so the next one shows again.

It can, but keep the button: start a timer in an effect that sets hidden after eight to ten seconds, clear it when the component unmounts, and pause it while the pointer or focus is inside the pill. Auto-dismissal alone takes the message away from people who read slowly or use a screen reader.

Try it is a link (href="#"): point it at the feature or the release notes. It renders the link it's given with render, with nativeButton={false}.

Below sm the pill is a rounded card: the badge and sentence share the first row with the dismiss button at the end, and the link takes the full width under them. From sm it is one row and a full capsule. At 320 pixels nothing scrolls sideways, and in a right-to-left layout it mirrors.