Design System / 05.5

Media

Ambient surfaces: the crossfading slideshow, a scroll-reactive marquee, the counting preloader, and the black-dip page transition.

Slideshow

Autoplay crossfade every 6s with a 1s fade. Arrows are visually hidden but focusable; optional half-stage hover zones and a thumbnail strip take over manual control. Autoplay pauses when the tab hides and never starts under reduced motion.

Hero rotator

Hover halves + thumbnails

images: { src, alt }[]; Stage is aspect-[3/2] by default — override via className.
interval: number = 6000; Autoplay interval in ms; manual navigation resets it.
hoverHalves: boolean = false; Invisible left/right hit-zones with resize-cursor hints and cursor labels.
thumbnails: boolean = false; Square thumb row; inactive thumbs rest at the first dim rung.

Marquee

An infinite drifting track that reacts to scroll velocity — fast scrolling speeds it up or throws it into reverse before it eases back to its base drift. Reduced motion shows a static single row.

Lorem ipsumDolor sit ametConsecteturAdipiscing elit

speed: number = 60; Base drift in px/s; negative reverses the direction.
gap: string = "3rem"; Space between items and between the two copies.
edgeFade: boolean = false; CSS mask fade at both edges.
children: ReactNode; Duplicated (aria-hidden copy) for the seamless wrap — give it enough items to fill the strip.

Preloader

The site’s opening move: a dark frame that counts itself up (or types a line or two), holds a beat, then slides away and unmounts. Reduced motion shows a brief static frame and still fires onDone.

Count variant

Ran once — replay

Lorem ipsum

0º

Contained for display — on a real site the overlay covers the viewport once, then slides away and unmounts.

Typed variant

Ran once — replay

Contained for display — on a real site the overlay covers the viewport once, then slides away and unmounts.

variant: "count" | "typed"; Default "count".
target / suffix: number = 550 / string; Count destination and appended glyph (e.g. "º").
duration / hold: number = 1400 / 600; Count time and the pause before the exit slide.
label: ReactNode?; Slot beside the counter in the bottom stack.
lines: string[]?; One or two lines for the typed variant (~36ms/char, block caret).
onDone: () => void; Fires after the exit completes.

Page fade

A black-dip page transition for full-page navigations: internal link clicks fade the viewport to near-black over 350ms, navigate, and the destination lifts the veil on the entry curve. It is not mounted here — with a client router, intercepted links become full loads, so reserve it for MPA-style sites or opt router links out.

// Site-level, render once (MPA-style navigations):
<PageFade />

// Opt a link out:
<a data-page-fade="off" href="/lorem">Ipsum</a>

duration: number = 350; Fade-to-black time in ms; the reveal on arrival uses the entry curve.
data-page-fade: attribute; Set "off" on a link to skip interception; modified clicks, hashes, downloads, and cross-origin links are skipped automatically.