MotionLoop

A frame for any looping illustration that runs longer than five seconds.

Probe

Confirm

Page

View code

tsx

<MotionLoop pauseLabel="Pause the pipeline animation">
	<PipelineDiagram />
</MotionLoop>

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 { MotionLoop } from "@sdxc/ui/landing";

Wraps looping content and pauses all of it, pseudo-elements included, while its toggle is checked or the pointer rests on it. Under reduced motion the toggle hides, since the content is expected to hold still.

Props

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

Prop	Type	Required	Description
`pauseLabel`	`string`	No	Accessible name of the toggle. Defaults to "Pause the animation".
`placement`	`"start-start" \| "start-end" \| "end-start" \| "end-end" \| "inline"`	No	Toggle corner. Defaults to DEFAULT_PLACEMENT.
`children`	`RemixNode`	Yes	The looping content.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`Placement`	`"start-start" \| "start-end" \| "end-start" \| "end-end" \| "inline"`	Corner the toggle sits in, as block then inline edge, so right-to-left pages mirror.