Marquee

An endless horizontal ticker for logo walls and short proof lines.

View code

tsx

<Marquee aria-label="Teams on Beacon">
	<img src={northwind} alt="Northwind" />
	<img src={voltage} alt="Voltage" />
	<img src={layerline} alt="Layerline" />
	<img src={fernway} alt="Fernway" />
	<img src={quadrant} alt="Quadrant" />
</Marquee>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { Marquee } from "@sdxc/ui/landing";

Renders the items twice on one track and scrolls it by exactly one copy, so the loop has no visible seam. Reduced motion drops the copy, the masks and the toggle, leaving a centered row that wraps.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`duration`	`number`	No	Seconds one pass of the items takes. Defaults to DEFAULT_DURATION.
`gap`	`string`	No	Space between items, any CSS length. Defaults to DEFAULT_GAP.
`pauseLabel`	`string`	No	Accessible name of the pause toggle. Defaults to "Pause the scrolling logos".
`children`	`RemixNode`	Yes	The items, each a direct child: logos, short quotes, badges. Image and SVG items take the landing logo height. They render twice; the copy is `aria-hidden` and `inert`.

Also accepts everything in TagProps<"div">.