shadcn.io is not affiliated with official shadcn/ui
Gaming Overlay Chat Block for React Aria
A chat laid over a drawn game scene that folds to the last three lines after 3 seconds at rest and returns on hover, focus or Enter, with older lines faded by a mask, a borderless one-line field and an All and Team switch.
Installation
Overview
Keep a game chat out of the way, with this gaming overlay chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Voidharbor, a co-op space game: a drawn greyscale harbour scene with a drawn heads-up display (the round, the score and the hull), and at the bottom start corner a translucent plate of compact chat lines, where older lines fade out at the top with a mask, a borderless one-line Input and an All and Team Segment Group. The plate gets out of the way: after 3 seconds without hover or focus it folds to the last three lines, and hovering it, focusing the field, focusing the stage or pressing Enter on the stage brings it back. The timer is armed only after your first interaction, so the plate is open when the page loads, and under reduced motion it never folds. Enter in the field sends, and the teammates answer from a script after a typing line. It's built from Input, Segment Group, Typing Indicator Text and Guides, with CSS transitions only and no colored control. For games, live events and any screen where chat must not cover the action.
FAQ
What stays in the page, and how do I make it real?
Everything. The scene is drawn in this file, the chat lines and replies are typed, and nothing is sent. To wire it for real, send the line from the form handler to your match channel (all or team), append incoming lines to the same list as they arrive, and keep the fold behaviour as it is.
How does the plate fold and come back?
A single timeout of 3 seconds starts once you have interacted and the plate is at rest, with no hover and no focus inside. When it fires the plate folds to the last three lines and the field row collapses and becomes inert. Hovering the plate, focusing the stage or pressing Enter on the stage opens it again and puts focus in the field. It is one timeout per rest, not a loop.
What happens with reduced motion?
The plate never folds on its own, because nothing should move or hide without a request. The height change is a transition that is switched off too. The chat stays open and you can read and type as normal.
How do All and Team work?
Each line is either for everyone or for the team. All shows both, with a "Team" word beside team lines; Team shows only the team's. What you send goes to the channel that is chosen, and the reply follows it. A sr-only status line says which one you are in.
Is it usable with a keyboard and a screen reader?
The stage is focusable and named "Voidharbor game view. Press Enter to open the chat.", the chat is a log region, and each line starts with a hidden name. The scene and the heads-up display shapes are hidden from assistive technology; the round and the score are real text.