Neo-Brutal Announcement Bar
A short announcement. pill is the hero's outlined card-white pill with a cobalt mono tag; with href it presses and its arrow nudges. bar is an ink strip above the navbar with a volt tag and a volt-underlined link.
Announcement Bar
A short announcement: a strip above the navbar (bar) or the hero's pill (pill).
Live, interactive React component · light themeResponsive
About the Soft Bento Announcement Bar
A short announcement: a strip above the navbar (bar) or the hero's pill (pill). With href the whole message is one link, so the link text makes sense on its own.
It is part of Soft Bento. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
See it on a full page
Noir Aurora Announcement Bar
A short announcement: a strip above the navbar (bar) or the hero's glass pill (pill: a glowing live dot, the badge as an aurora "New:" tag, an arrow that nudges, and one BorderBeam lap 1.5 s after load).
Swiss Tech Mono Announcement Bar
A short announcement: an ink strip above the navbar (bar) or the hero's mono pill (pill, with a lime tag or a lime square before the text).