Mention Wall

Written for the variant you picked above: Paper

Build a masonry wall of social posts. Props: posts [{id, author {name, handle, avatar, verified}, body, date, href, source, archived}], pageSize (default 12), look, label and onNavigate. Columns: four from 1180px of container width, three from 860px, two from 560px, otherwise one; 22px gaps (14px in one column). Don't use CSS columns: place posts in list order into whichever column is currently shortest, using each card's measured height (a ResizeObserver per card) and a text-length estimate until it's measured, so columns end within about one card of each other and reading down a column follows the list. A card is 22px radius, 24px 28px 20px padding. Header: a 50px round avatar (the image, or initials on a soft two-hue gradient picked from the name), then the name (1.06rem, weight 700) with a blue scalloped verified seal only when verified is true, the @handle muted under it, and a small speech-bubble button at the top right that links to the original ('View Artem Volkov's post on Chirp'). Body: plain text at 1.06rem and line height 1.62, blank lines as paragraphs, emoji kept as text, clamped to nine lines. Footer: the date ('Mar 4, 2026', a time element) and the network name; when the body is clamped the network name becomes 'Read on Chirp'; an archived post drops every link and says 'Original removed'. Only the first page shows. While more remain, the wall fades out over its last 280px with a mask and a dark pill button sits over the fade ('Show more' with '4 more' beside it); pressing it adds the next page and moves focus to the first new post. With no posts the section renders nothing. Below 560px cards tighten to 20px padding and 18px radius, avatars to 44px and body text to 1rem. Selected variant — Paper (paper): Light page #f6f6f5, white cards with a 6% ink hairline and a soft shadow (0 1px 2px at 4%, 0 10px 30px -12px at 10%), ink #171716, body #262624, muted #686864, verified seal #2f7cf6; the Show more pill is ink with white text. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Read the wall; the bubble icon and 'Read on…' open the original post. Show more adds the next page and puts focus on its first post. Motion: Nothing moves on its own. Buttons lift 1px on hover. Reduced motion removes the hover movement. Accessibility: A labelled section of articles, each named by its author. Reading order follows the list within each column. The verified seal has a text label; links name the author and the network. Show more moves focus to the first new post so keyboard and screen-reader users land on new content. Responsive behavior: One to four columns from the container's width; cards and type step down below 560px. Columns re-balance whenever a card's height changes. Touch: Everything is a tap: the bubble and the 'Read on' link are real links with 32px targets, and nothing depends on hover. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Read the wall; the bubble icon and 'Read on…' open the original post. Show more adds the next page and puts focus on its first post.

Motion

Nothing moves on its own. Buttons lift 1px on hover. Reduced motion removes the hover movement.

Accessibility

A labelled section of articles, each named by its author. Reading order follows the list within each column. The verified seal has a text label; links name the author and the network. Show more moves focus to the first new post so keyboard and screen-reader users land on new content.

Responsive

One to four columns from the container's width; cards and type step down below 560px. Columns re-balance whenever a card's height changes.

On touch

Everything is a tap: the bubble and the 'Read on' link are real links with 32px targets, and nothing depends on hover.