@lar-works/design-system 0.0.0-stage → 0.1.1

package/src/showcase/ProductBand.tsx

@@ -0,0 +1,148 @@
+import { ArrowRightIcon } from 'lucide-react';
+import { type CSSProperties, type ReactNode, useId } from 'react';
+
+import { tabbable } from '../foundations/KeyboardFocus';
+import { Heading, Text } from '../typography/Typography';
+
+export interface ProductEntry {
+    name: string;
+    icon: ReactNode;
+    status: ReactNode;
+    summary: string;
+    href: string;
+}
+
+/** The family of products under a hero, one compact entry each, wrapping as the family grows. */
+export function ProductIndex({
+    products,
+    label,
+    onNavigate,
+}: {
+    products: readonly ProductEntry[];
+    label: string;
+    onNavigate: (href: string) => void;
+}) {
+    return (
+        <ul aria-label={label} className="mx-auto flex max-w-[880px] flex-wrap justify-center gap-3">
+            {products.map((product) => (
+                <li key={product.href} className="w-full sm:w-[calc(50%-0.375rem)] lg:w-[calc(50%-0.375rem)]">
+                    <a
+                        {...tabbable}
+                        href={product.href}
+                        onClick={(event) => {
+                            if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+
+                            event.preventDefault();
+                            onNavigate(product.href);
+                        }}
+                        className="group/entry border-base-300 bg-base-100/70 hover:border-base-400 focus-visible:outline-primary dark:bg-base-100/50 flex h-full items-center gap-3 rounded-2xl border px-4 py-3 text-left shadow-xs/5 backdrop-blur transition-[border-color,background-color] focus-visible:outline-2"
+                    >
+                        {product.icon}
+                        <span className="flex min-w-0 flex-1 flex-col gap-1">
+                            <span className="flex flex-wrap items-center gap-2">
+                                <span className="text-base-content text-[15px] font-semibold tracking-[-0.01em]">
+                                    {product.name}
+                                </span>
+                                {product.status}
+                            </span>
+                            <span className="text-base-700 text-sm leading-5">{product.summary}</span>
+                        </span>
+                        <span className="text-base-600 inline-flex transition-transform duration-200 group-hover/entry:translate-x-0.5 [&_svg]:size-4">
+                            <ArrowRightIcon />
+                        </span>
+                    </a>
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+interface ProductBandProps {
+    /** The band's colour world: a hue and how strongly it shows. */
+    hue: number;
+    chroma?: number;
+    icon: ReactNode;
+    name: string;
+    status: ReactNode;
+    title: string;
+    description: string;
+    actions: ReactNode;
+    media: ReactNode;
+    /** Puts the media on the left. */
+    reverse?: boolean;
+    /** A short line under the actions, such as requirements. */
+    note?: ReactNode;
+}
+
+/** One product's own space on a page that presents several: its colour, its devices, its way in. */
+export function ProductBand({
+    hue,
+    chroma = 0.13,
+    icon,
+    name,
+    status,
+    title,
+    description,
+    actions,
+    media,
+    reverse,
+    note,
+}: ProductBandProps) {
+    const id = useId();
+
+    return (
+        <article
+            aria-labelledby={id}
+            className="border-base-300 bg-base-100 dark:bg-base-100/70 relative isolate overflow-hidden rounded-[2rem] border"
+            style={{ '--lar-band-hue': hue, '--lar-band-chroma': chroma } as CSSProperties}
+        >
+            <div
+                aria-hidden="true"
+                className="absolute inset-0 -z-10 bg-[radial-gradient(70%_90%_at_var(--lar-band-x)_50%,oklch(0.6_var(--lar-band-chroma)_var(--lar-band-hue)/0.24),transparent_70%)] dark:bg-[radial-gradient(70%_90%_at_var(--lar-band-x)_50%,oklch(0.42_var(--lar-band-chroma)_var(--lar-band-hue)/0.45),transparent_70%)]"
+                style={{ '--lar-band-x': reverse ? '20%' : '80%' } as CSSProperties}
+            />
+            {/* On narrow screens the text wrapper dissolves, so the product's picture sits right under its
+                heading, before the description and actions. */}
+            <div
+                className={`grid items-center gap-5 p-6 sm:p-10 lg:gap-12 lg:p-12 ${reverse ? 'lg:grid-cols-[minmax(0,8fr)_minmax(0,4fr)]' : 'lg:grid-cols-[minmax(0,4fr)_minmax(0,8fr)]'}`}
+            >
+                <div className={`contents lg:flex lg:flex-col lg:gap-5 ${reverse ? 'lg:order-2' : ''}`}>
+                    <div className="order-1 flex items-center gap-3 lg:order-none">
+                        {icon}
+                        <Text as="span" variant="label">
+                            {name}
+                        </Text>
+                        {status}
+                    </div>
+                    <Heading
+                        id={id}
+                        as="h2"
+                        variant="feature"
+                        className="order-2 lg:order-none lg:text-[1.875rem] lg:leading-[1.15]"
+                    >
+                        {title}
+                    </Heading>
+                    <Text variant="lead" tone="muted" className="order-4 lg:order-none">
+                        {description}
+                    </Text>
+                    <div className="order-5 mt-1 flex flex-col gap-3 lg:order-none">
+                        <div className="flex flex-wrap items-center gap-3 max-sm:flex-col max-sm:[&>a]:w-full">
+                            {actions}
+                        </div>
+                        {note ? (
+                            <Text variant="caption" tone="muted" className="dark:text-[#96969f]">
+                                {note}
+                            </Text>
+                        ) : null}
+                    </div>
+                </div>
+                <div className={`order-3 my-3 lg:my-0 ${reverse ? 'lg:order-1' : 'lg:order-none'}`}>{media}</div>
+            </div>
+        </article>
+    );
+}
+
+/** Product bands one after another, as many as the family has. */
+export function ProductBands({ children }: { children: ReactNode }) {
+    return <div className="flex flex-col gap-6 sm:gap-8">{children}</div>;
+}

package/src/showcase/Roadmap.tsx

@@ -0,0 +1,115 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { StatusPill } from './Status';
+
+export interface RoadmapItem {
+    icon: ReactNode;
+    title: string;
+    body: string;
+    /** The next big thing: a card of its own above the list, in an app's hue, with its highlights and an
+     *  illustration of the idea. */
+    featured?: { hue: number; highlights: readonly string[]; visual?: ReactNode; steps?: readonly string[] };
+}
+
+/** What is planned: a featured card for the next big thing, then quiet dashed cards that read like promises. */
+export function Roadmap({
+    items,
+    label,
+    statusLabel,
+}: {
+    items: readonly RoadmapItem[];
+    label: string;
+    statusLabel: string;
+}) {
+    const featured = items.filter((item) => item.featured);
+    const rest = items.filter((item) => !item.featured);
+
+    return (
+        <div aria-label={label} role="group" className="flex flex-col gap-3">
+            {featured.map((item) => (
+                <FeaturedCard key={item.title} item={item} statusLabel={statusLabel} />
+            ))}
+            <ul className="divide-base-300/70 border-base-400/80 bg-base-100/50 dark:bg-base-100/30 grid divide-y rounded-2xl border border-dashed sm:gap-3 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent md:grid-cols-2 lg:grid-cols-3 sm:dark:bg-transparent">
+                {rest.map((item) => (
+                    <li
+                        key={item.title}
+                        className="sm:border-base-400/80 flex gap-3 p-4 sm:gap-4 sm:rounded-2xl sm:border sm:border-dashed sm:p-5"
+                    >
+                        <RoadmapIcon>{item.icon}</RoadmapIcon>
+                        <div className="flex min-w-0 flex-1 flex-col gap-1">
+                            <span className="flex items-start justify-between gap-3">
+                                <span className="text-base-content text-[15px] font-semibold tracking-[-0.01em] text-balance">
+                                    {item.title}
+                                </span>
+                                <span className="shrink-0">
+                                    <StatusPill status="planned">{statusLabel}</StatusPill>
+                                </span>
+                            </span>
+                            <span className="text-base-700 text-sm leading-6">{item.body}</span>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+function FeaturedCard({ item, statusLabel }: { item: RoadmapItem; statusLabel: string }) {
+    return (
+        <article
+            style={{ '--lar-kind-hue': item.featured?.hue } as CSSProperties}
+            className="flex flex-col gap-4 rounded-2xl border border-[oklch(0.62_0.1_var(--lar-kind-hue)/0.45)] bg-[radial-gradient(60%_120%_at_85%_50%,oklch(0.62_0.12_var(--lar-kind-hue)/0.14),transparent_70%)] p-5 sm:flex-row sm:p-7"
+        >
+            <span className="flex items-center justify-between gap-3 sm:block">
+                <RoadmapIcon>{item.icon}</RoadmapIcon>
+                <span className="sm:hidden">
+                    <StatusPill status="planned">{statusLabel}</StatusPill>
+                </span>
+            </span>
+            <div className="flex min-w-0 flex-1 flex-col gap-2">
+                <span className="flex items-start justify-between gap-3">
+                    <span className="text-base-content text-lg font-semibold tracking-[-0.01em] text-balance sm:text-xl">
+                        {item.title}
+                    </span>
+                    <span className="hidden shrink-0 sm:block">
+                        <StatusPill status="planned">{statusLabel}</StatusPill>
+                    </span>
+                </span>
+                <span className="text-base-700 max-w-[620px] text-[15px] leading-6">{item.body}</span>
+                {item.featured?.steps ? (
+                    <ol className="text-base-800 mt-2 flex flex-col gap-2.5 text-sm">
+                        {item.featured.steps.map((step, index) => (
+                            <li key={step} className="flex items-center gap-2">
+                                <span className="bg-base-200 text-base-800 dark:bg-base-300 inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums">
+                                    {index + 1}
+                                </span>
+                                {step}
+                            </li>
+                        ))}
+                    </ol>
+                ) : null}
+                <span className="mt-2 hidden flex-wrap gap-2 sm:flex">
+                    {item.featured?.highlights.map((highlight) => (
+                        <span
+                            key={highlight}
+                            className="kind-badge inline-flex h-7 items-center rounded-full px-3 text-xs font-medium"
+                        >
+                            {highlight}
+                        </span>
+                    ))}
+                </span>
+            </div>
+            {item.featured?.visual ? (
+                <div className="shrink-0 sm:w-[300px] lg:w-[340px]">{item.featured.visual}</div>
+            ) : null}
+        </article>
+    );
+}
+
+function RoadmapIcon({ children }: { children: ReactNode }) {
+    return (
+        <span className="bg-base-200 text-base-800 ring-base-300/70 dark:bg-base-300/40 inline-flex size-8 shrink-0 items-center justify-center rounded-[0.6rem] ring-1 ring-inset sm:size-10 sm:rounded-[0.7rem] [&>svg]:size-4 sm:[&>svg]:size-5">
+            {children}
+        </span>
+    );
+}

package/src/showcase/RouteDiagram.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+
+export interface RouteNode {
+    icon: ReactNode;
+    title: string;
+    detail: string;
+}
+
+/** One connection from end to end, drawn as a line of travelling light through every node it passes, with
+ *  what the connection is labelled once above it. */
+export function RouteDiagram({
+    nodes,
+    label,
+    caption,
+}: {
+    nodes: readonly RouteNode[];
+    label: string;
+    caption: ReactNode;
+}) {
+    return (
+        <figure className="border-base-300 bg-base-100/70 dark:bg-base-100/50 relative isolate overflow-hidden rounded-[1.5rem] border px-6 py-8 sm:px-10 sm:py-12">
+            <div
+                aria-hidden="true"
+                className="absolute inset-0 -z-10 bg-[radial-gradient(60%_70%_at_50%_40%,var(--lar-glow-soft),transparent_70%)]"
+            />
+            <div className="mb-8 flex sm:justify-center">
+                <span className="border-primary/30 bg-primary/8 text-primary dark:bg-primary/16 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]">
+                    <span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
+                    {label}
+                </span>
+            </div>
+            <div className="relative">
+                <span
+                    aria-hidden="true"
+                    className="lar-route-line absolute top-6 bottom-6 left-[23px] w-[1.5px] sm:top-8 sm:right-[calc(100%/6)] sm:bottom-auto sm:left-[calc(100%/6)] sm:h-[1.5px] sm:w-auto"
+                />
+                <ol className="relative flex flex-col gap-6 sm:grid sm:grid-cols-3 sm:gap-4">
+                    {nodes.map((node) => (
+                        <li key={node.title} className="flex items-center gap-4 sm:flex-col sm:gap-3 sm:text-center">
+                            <span className="border-base-300 bg-base-50 text-base-content inline-flex size-12 shrink-0 items-center justify-center rounded-[0.9rem] border shadow-[0_14px_30px_-16px_rgb(0_0_0/50%)] sm:size-16 sm:rounded-[1.1rem] [&>svg]:size-6 sm:[&>svg]:size-7">
+                                {node.icon}
+                            </span>
+                            <span className="flex flex-col gap-0.5">
+                                <span className="text-base-content text-sm font-semibold">{node.title}</span>
+                                <span className="text-base-700 text-xs">{node.detail}</span>
+                            </span>
+                        </li>
+                    ))}
+                </ol>
+            </div>
+            <figcaption className="text-base-700 mt-8 text-sm leading-6 text-pretty sm:mt-10 sm:text-center">
+                {caption}
+            </figcaption>
+        </figure>
+    );
+}

package/src/showcase/ServerUnit.tsx

@@ -0,0 +1,191 @@
+import { type KeyboardEvent, type ReactNode, useId, useRef, useState } from 'react';
+
+import { Heading, Text } from '../typography/Typography';
+import { type Readiness, StatusLight, StatusPill } from './Status';
+
+export type MediaApp = 'music' | 'video' | 'photos' | 'books';
+
+export interface ServerBay {
+    id: MediaApp;
+    name: string;
+    status: Readiness;
+    statusLabel: string;
+    panel: ReactNode;
+}
+
+interface ServerUnitProps {
+    label: string;
+    /** The key for the bays' lights, set under the unit. */
+    legend?: ReactNode;
+    display: { name: string; state: string };
+    bays: readonly ServerBay[];
+}
+
+const MARK_L = 'M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z';
+const MARK_S =
+    'M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z';
+
+/** The server as a four-bay box, one drive sled per media app. Choosing a sled pulls it forward and shows what
+ *  that app can do today and what is still to come. */
+export function ServerUnit({ label, display, bays, legend }: ServerUnitProps) {
+    const [selected, setSelected] = useState<MediaApp>(bays[0]?.id ?? 'music');
+    const tabs = useRef<(HTMLButtonElement | null)[]>([]);
+    const baseId = useId();
+    const current = bays.find((bay) => bay.id === selected) ?? bays[0];
+
+    function move(event: KeyboardEvent<HTMLButtonElement>, index: number) {
+        const keys: Record<string, number> = {
+            ArrowRight: 1,
+            ArrowDown: 1,
+            ArrowLeft: -1,
+            ArrowUp: -1,
+        };
+        const step = keys[event.key];
+        let next: number | undefined;
+
+        if (step !== undefined) next = (index + step + bays.length) % bays.length;
+
+        if (event.key === 'Home') next = 0;
+
+        if (event.key === 'End') next = bays.length - 1;
+
+        if (next === undefined) return;
+
+        event.preventDefault();
+
+        const bay = bays[next];
+
+        if (!bay) return;
+
+        setSelected(bay.id);
+        tabs.current[next]?.focus();
+    }
+
+    return (
+        <div className="grid items-start gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:items-center lg:gap-14">
+            <div className="flex flex-col gap-8 [perspective:1600px]">
+                <div className="lar-unit [transform:rotateX(2deg)_rotateY(5deg)] transition-transform duration-700 hover:[transform:rotateX(1deg)_rotateY(3deg)]">
+                    <div className="lar-unit__top" aria-hidden="true">
+                        <svg viewBox="0 0 100 100" className="lar-unit__mark">
+                            <path d={MARK_L} fill="#f4f4f5" />
+                            <path d={MARK_S} fill="#355292" />
+                        </svg>
+                        <div className="lar-unit__lcd">
+                            <span>{display.name}</span>
+                            <b>{display.state}</b>
+                        </div>
+                        <div className="lar-unit__lights">
+                            <i />
+                            <i className="lar-led-pulse" />
+                        </div>
+                    </div>
+                    <div role="tablist" aria-label={label} className="lar-unit__bays">
+                        {bays.map((bay, index) => (
+                            <button
+                                key={bay.id}
+                                ref={(element) => {
+                                    tabs.current[index] = element;
+                                }}
+                                type="button"
+                                role="tab"
+                                id={`${baseId}-${bay.id}-tab`}
+                                aria-controls={`${baseId}-panel`}
+                                aria-selected={bay.id === selected}
+                                tabIndex={bay.id === selected ? 0 : -1}
+                                data-app={bay.id}
+                                data-status={bay.status}
+                                onClick={() => setSelected(bay.id)}
+                                onKeyDown={(event) => move(event, index)}
+                                className="lar-sled"
+                            >
+                                <i
+                                    className="lar-sled__led lar-led-pulse"
+                                    style={{ ['--lar-led-delay' as string]: `${index * 420}ms` }}
+                                />
+                                <i className="lar-sled__vents" />
+                                <span className="lar-sled__name">{bay.name}</span>
+                                <span className="lar-sled__state">{bay.statusLabel}</span>
+                                <i className="lar-sled__latch" />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                {legend}
+            </div>
+            {current ? (
+                <div
+                    role="tabpanel"
+                    id={`${baseId}-panel`}
+                    aria-labelledby={`${baseId}-${current.id}-tab`}
+                    className="border-base-300 bg-base-100/70 dark:bg-base-100/50 rounded-[1.25rem] border p-5 sm:min-h-[420px] sm:p-7"
+                >
+                    {current.panel}
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+export interface ReadinessItem {
+    label: string;
+    status: Readiness;
+    statusLabel: string;
+}
+
+interface ReadinessPanelProps {
+    icon: ReactNode;
+    title: string;
+    status: ReactNode;
+    summary: string;
+    groups: readonly { title: string; items: readonly ReadinessItem[]; wideOnly?: boolean }[];
+}
+
+/** One app's status: what works, what is being built and what is planned, line by line. */
+export function ReadinessPanel({ icon, title, status, summary, groups }: ReadinessPanelProps) {
+    return (
+        <div className="flex flex-col gap-5">
+            <div className="flex items-center gap-3">
+                {icon}
+                <Heading as="h3" variant="feature">
+                    {title}
+                </Heading>
+                <span className="ml-auto">{status}</span>
+            </div>
+            <Text variant="prose" tone="muted">
+                {summary}
+            </Text>
+            {groups.map((group) => (
+                <div key={group.title} className={`flex-col gap-2 ${group.wideOnly ? 'hidden sm:flex' : 'flex'}`}>
+                    <Text as="span" variant="overline" tone="muted">
+                        {group.title}
+                    </Text>
+                    <ul className="divide-base-300/70 flex flex-col divide-y">
+                        {group.items.map((item) => (
+                            <li
+                                key={item.label}
+                                className="text-base-800 flex items-center gap-3 py-1.5 text-sm sm:py-2"
+                            >
+                                <StatusLight status={item.status} />
+                                <span className="min-w-0 flex-1">{item.label}</span>
+                                <span className="text-base-700 shrink-0 text-xs">{item.statusLabel}</span>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+/** The key for the readiness lights. */
+export function ReadinessLegend({ items }: { items: readonly { status: Readiness; label: string }[] }) {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-2">
+            {items.map((item) => (
+                <StatusPill key={item.status} status={item.status}>
+                    {item.label}
+                </StatusPill>
+            ))}
+        </div>
+    );
+}

package/src/showcase/Stage.tsx

@@ -0,0 +1,160 @@
+import { type CSSProperties, type PointerEvent, type ReactNode, useRef } from 'react';
+
+/** The navy glow and fading grid behind a hero. A hue tints the glow with a product's colour. */
+export function Backdrop({ hue }: { hue?: number }) {
+    return (
+        <div
+            aria-hidden="true"
+            className="lar-backdrop"
+            data-hue={hue === undefined ? undefined : ''}
+            style={hue === undefined ? undefined : ({ '--lar-backdrop-hue': hue } as CSSProperties)}
+        />
+    );
+}
+
+interface DeviceStageProps {
+    /** The large device in the middle. */
+    main: ReactNode;
+    /** A device in front, at the lower right. */
+    end?: ReactNode;
+    /** A device in front, at the lower left; hidden on narrow screens. */
+    start?: ReactNode;
+    /** How far the scene leans back, in degrees. */
+    pitch?: number;
+    /** The start device's width: a tablet or TV at 'wide', a phone at 'narrow'. */
+    startSize?: 'wide' | 'narrow';
+    /** A close-up that floats in front, across the lower left; hidden on narrow screens. */
+    callout?: ReactNode;
+    /** How big the end device is: 'small' beside a hero laptop, 'large' when the phone is the point. */
+    endSize?: 'small' | 'large';
+    /** What a phone-width screen shows, where a laptop's text would be too small to read: the end device or the
+     *  callout alone, or a readable close-up with the end device overlapping its corner. */
+    narrow?: 'stage' | 'end' | 'callout' | 'pair';
+    /** The close-up that 'pair' shows on phones. */
+    narrowMain?: ReactNode;
+    /** Which side a large end device stands on. */
+    endSide?: 'left' | 'right';
+}
+
+const MAX_TILT = 2.5;
+
+/** A group of devices in perspective that leans gently toward the pointer. */
+export function DeviceStage({
+    main,
+    end,
+    start,
+    callout,
+    pitch = 0,
+    startSize = 'wide',
+    endSize = 'small',
+    narrow = 'stage',
+    narrowMain,
+    endSide = 'right',
+}: DeviceStageProps) {
+    const scene = useRef<HTMLDivElement>(null);
+
+    function lean(event: PointerEvent<HTMLDivElement>) {
+        const element = scene.current;
+
+        if (!element || event.pointerType !== 'mouse' || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const x = (event.clientX - bounds.left) / bounds.width - 0.5;
+        const y = (event.clientY - bounds.top) / bounds.height - 0.5;
+
+        element.style.setProperty('--lar-tilt-x', `${(-y * MAX_TILT).toFixed(2)}deg`);
+        element.style.setProperty('--lar-tilt-y', `${(x * MAX_TILT * 1.6).toFixed(2)}deg`);
+    }
+
+    function settle() {
+        scene.current?.style.removeProperty('--lar-tilt-x');
+        scene.current?.style.removeProperty('--lar-tilt-y');
+    }
+
+    const alone = narrow === 'end' ? end : narrow === 'callout' ? callout : undefined;
+    const pair = narrow === 'pair' && narrowMain;
+
+    return (
+        <>
+            {alone ? <div className="mx-auto w-[min(60%,220px)] sm:hidden">{alone}</div> : null}
+            {pair ? (
+                <div className={`relative sm:hidden ${end ? 'mr-6 mb-10' : ''}`}>
+                    {narrowMain}
+                    {end ? (
+                        <div className="absolute -right-6 -bottom-10 w-[30%] max-w-[120px] rotate-[3deg]">{end}</div>
+                    ) : null}
+                </div>
+            ) : null}
+            <div
+                className={`lar-stage ${alone || pair ? 'hidden sm:block' : ''}`}
+                onPointerMove={lean}
+                onPointerLeave={settle}
+            >
+                <div
+                    ref={scene}
+                    className={`lar-stage__scene ${endSize === 'large' ? 'grid grid-cols-1' : ''}`}
+                    style={{ '--lar-stage-pitch': `${pitch}deg` } as CSSProperties}
+                >
+                    <div
+                        className={`lar-stage__slot relative ${endSize === 'large' ? `col-start-1 row-start-1 w-[92%] self-start sm:mt-[8%] sm:w-[84%] ${endSide === 'left' ? 'justify-self-end' : ''}` : ''}`}
+                    >
+                        {main}
+                    </div>
+                    {start ? (
+                        <div
+                            className={`lar-stage__slot absolute bottom-[-7%] left-[-2%] hidden [transform:translateZ(60px)_rotateY(9deg)] sm:block ${startSize === 'wide' ? 'w-[34%]' : 'w-[17%]'}`}
+                        >
+                            {start}
+                        </div>
+                    ) : null}
+                    {callout ? (
+                        <div className="lar-stage__slot absolute bottom-[-5%] left-[1%] hidden w-[30%] [transform:translateZ(120px)_rotateY(6deg)_rotateZ(-1.5deg)] md:block">
+                            {callout}
+                        </div>
+                    ) : null}
+                    {end ? (
+                        <div
+                            className={`lar-stage__slot ${endSize === 'large' ? `relative col-start-1 row-start-1 mt-[24%] w-[36%] self-start sm:mt-0 sm:w-[30%] ${endSide === 'left' ? 'justify-self-start sm:[transform:translateZ(90px)_rotateY(9deg)_rotateZ(-1deg)]' : 'justify-self-end sm:[transform:translateZ(90px)_rotateY(-9deg)_rotateZ(1deg)]'}` : 'absolute right-[-1%] bottom-[2%] w-[30%] [transform:translateZ(90px)_rotateY(-11deg)_rotateZ(1deg)] sm:w-[18%]'}`}
+                        >
+                            {end}
+                        </div>
+                    ) : null}
+                </div>
+            </div>
+        </>
+    );
+}
+
+/** One device turned in space, for a feature row. */
+export function AngledDevice({
+    children,
+    angle = 'left',
+}: {
+    children: ReactNode;
+    angle?: 'left' | 'right' | 'flat' | 'lean' | 'tilt';
+}) {
+    const angles = {
+        left: 'sm:[transform:perspective(2400px)_rotateY(3deg)]',
+        right: 'sm:[transform:perspective(2400px)_rotateY(-3deg)]',
+        lean: 'sm:[transform:perspective(2600px)_rotateX(4deg)]',
+        tilt: 'sm:[transform:perspective(1600px)_rotateY(-6deg)_rotateX(3deg)]',
+        flat: '',
+    } as const;
+
+    return <div className={`transition-transform duration-700 ${angles[angle]}`}>{children}</div>;
+}
+
+/** Fades and lifts its content into place as it scrolls into view. */
+export function Reveal({ children }: { children: ReactNode }) {
+    return <div className="lar-reveal">{children}</div>;
+}
+
+/** Shows the full composition on wider screens and a readable close-up on phones. */
+export function ResponsiveMedia({ wide, narrow }: { wide: ReactNode; narrow: ReactNode }) {
+    return (
+        <>
+            <div className="hidden sm:block">{wide}</div>
+            <div className="sm:hidden">{narrow}</div>
+        </>
+    );
+}