Publishers & Media

Overview

The Publishers & Media package serves publishers, media brands, and retailers whose storefront is as much editorial as it is catalogue. It brings the short-form formats audiences already understand from social apps — the vertical feed, the reel — into the storefront, connected to your own content and products, so a clip can carry a product and a product can carry a clip.

Where the Shop package presents a catalogue to someone who came to browse it, these components present a stream to someone who came to be shown something. The audience scrolls rather than searches, and whatever the clip is selling — a product, a subscription, the next article — sits inside the media rather than beside it.

Components

Media Feed

MediaFeed is the full-screen vertical feed in the TikTok and Reels pattern. Vertical scroll-snap, one item playing at a time, an action rail for favourites and sharing, a mute toggle, and a read-more sheet for the long copy. Open it from a tile anywhere on the page, or render it from props.

Design Principles

Publishers & Media components follow the same design system as the rest of Laioutr UI — the same tokens, theming, and accessibility standards. In addition they are built to be:

• Quiet by default — browsers only permit autoplay while muted, so feeds start silent and hand the visitor a control back to sound rather than assuming it.
• Reachable — only the item in view is interactive; everything off screen is inert, so tabbing never lands on a control the visitor cannot see.
• Considerate of data — media loads as it is approached rather than all at once, so opening a feed does not download every clip in it.
• Data-agnostic — components take plain props and expose slots, so an item can carry a product, an article, or an episode; the ui-app layer maps your entities into them via orchestr.