PhoneFan

Three phones on a landing stage.

DesktopPhone

View code

tsx

<PhoneFan
	label="Three screens of Rooftree"
	pauseLabel="Pause the phone animation"
	start={<PhoneFrame>…</PhoneFrame>}
	front={<PhoneFrame>…</PhoneFrame>}
	end={<PhoneFrame>…</PhoneFrame>}
/>

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.

MarginAn invented AI note-taker for recorded meetings: summaries, decisions and to-dos that each link to the transcript line they came from./demo/ai
RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
Hollyhock BakeryHollyhock Bakery on Alder Street: today's bake, the menu and prices, opening hours that know the time, pickup orders, directions, step-free access and parking./demo/bakery
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
Overprint 2027Overprint is one day of talks on what browsers ship, in two rooms of an old foundry in Rotterdam, on Thursday 15 April 2027./demo/conference
CenteredCentered is a video course in wheel-throwing pottery: 24 lessons in six modules with chapters and transcripts, self-paced or with a cohort, ending in a lidded jar./demo/course
Strata TwoStrata Two is a 75% keyboard in a one-piece aluminium case with a gasket-mounted plate. Preorder batch 03 for $279, shipping 9 March 2027./demo/hardware
plumbPlumb compiles a TypeScript schema to straight-line JavaScript once, so parsing runs the checks you would have written by hand./demo/library
UndercurrentA fortnightly letter and podcast about the water mains, power lines, signals and post under an ordinary day, read aloud with the people who run them./demo/newsletter
KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
QuoinQuoin designs and builds everyday software for transit, libraries and makers, and measures what it changed. Booking from March./demo/studio

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

Lays three phone screens as a fan: side phones hide on a narrow column and tilt out from md, all floating on staggered bobs that MotionLoop can pause.

Props

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

Prop	Type	Required	Description
`label`	`string`	Yes	Accessible name of the stage as a whole.
`pauseLabel`	`string`	No	Accessible name of the pause toggle. Forwarded to MotionLoop.
`start`	`RemixNode`	Yes	Phone behind the front on the inline start, tilted out.
`front`	`RemixNode`	Yes	Leading phone in the middle of the fan.
`end`	`RemixNode`	Yes	Phone behind the front on the inline end, tilted out.

Also accepts everything in TagProps<"div">.