shadcn.io is not affiliated with official shadcn/ui
GIF Search Comments Block for Solid
A chat thread with a loop picker: a tray docked under the composer filters twelve drawn, animated loops by name or tag, moves with arrow keys, attaches one to the draft and shows it in the posted comment.
Installation
Overview
Add reaction loops to a chat thread without a GIF service, with this loop picker for Solid with Ark UI. The Friday release channel in Loopley has three comments, two of them with a loop, and a composer whose "Add a loop" button docks a tray under it (not a popover). In the tray a search Input filters twelve loops by name or tag ("Trending" while it is empty, an Empty state that names the query when nothing matches), and the tiles form a grid with roving focus: arrow keys move, Enter attaches, Escape closes. The attached loop shows above the box with Remove, and the posted comment draws it. There are no photos and no GIF files: every loop is built from a few shapes and CSS animation from typed data, and "Pause all" and reduced motion both stop them. Built from Input, Empty, Button, Textarea, Badge, Field, Avatar, Shine Button and Guides. For team chat, community threads and any place people answer with a feeling.
FAQ
How do I add my own loops?
Add an entry to LOOPS: an id, a label, a list of tags the search also matches, and a spec such as circle:bounce:0|bar:pulse:1. Each part is a shape (circle, square, ring or bar), a motion (bounce, ping, pulse or spin) and a delay step (0, 1 or 2). The array order is the Trending order. To use real GIFs, replace LoopArt with an image and keep the tile box.
What stays local, and how do I make it real?
Everything. Posting adds the comment and its loop id to a list in the page, and the status line says nothing was sent. To make it real, call your GIF provider's search from the tray (through your own server, so the key stays secret), debounce the query, and store the chosen item's id or URL with the comment. The honest line under the grid, "Sample loops drawn in CSS; no GIF service is used", should go when you do.
How do the loops stop?
Pause all (in the channel header, so it works with the tray closed) freezes every animation on the panel, including loops in the thread. Reduced motion removes the animation entirely. Nothing else loops on the page, and the pause button says Play all while paused.
How does the keyboard work?
Add a loop opens the tray and focuses the search box. Arrow Down moves from the search box to the grid; in the grid the arrow keys move by one tile or one row (reversed in right-to-left layouts), Home and End jump to the first and last, Enter or Space attaches, and Escape closes the tray and returns to Add a loop. Only one tile is a tab stop, so Tab leaves the grid in one press.
Is it accessible?
Tiles are buttons named for their loop (the label is visible from sm up and hidden for screen readers on phones, where it is read instead) and report whether they are attached. Drawn loops are hidden from screen readers and the posted loop has a text label. The tray's heading and count change with the search, the polite status line is present from load, and a search that matches nothing explains itself.