Clay chrome around a screenshot or mock: a browser (address bar), a window (title bar), a phone (keeps its 9:19 shape) or a plain panel.
Clay chrome around a screenshot or mock: a browser (address bar), a window (title bar), a phone (keeps its 9:19 shape) or a plain panel. The chrome is hidden from screen readers; the caption is a figcaption.
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.
Device chrome around a screenshot or mock, floating on a 10 px hatched offset (the page's one floating object): a browser (outlined dots and a mono address bar), a window (a title bar in the display face), a phone (keeps its 9:19 shape) or a flat plain panel.
Device chrome around a screenshot or mock: a browser (address bar), a window (title bar), a phone (keeps its 9:19 shape) or a plain panel, all in a lit glass bezel with an aurora line along the top edge where the sky meets it.
Device chrome around a screenshot or mock: a browser (a sunken mono address field), a window (three small square lights), a squared phone (keeps its 9:19 shape) or a plain panel, on a 12 px panel with a hairline edge and a tight shadow.