System

Components. The ones the registry does not publish.

Image Fan

Deals an overlapping deck of 4:5 tiles that fans out on load. Hover a card and its immediate neighbours slide aside as it lifts; click any card to open it in the shared lightbox. Takes any FanItem[], images or videos, and auto-sizes its box to the deck so there is no dead space above it.

The lightbox it opens is its own component (useLightbox), shared with the rest of the site. It has no specimen of its own here because a lightbox with nothing to open is not a specimen; click a tile above to see it.

Fade Image

A still that blurs up as it loads and fades into the surface below it. backgroundColor is what the fade resolves to, so inside a card it takes var(--card) rather than the page default.

Digital Native edition 156

Marquee

An auto-scrolling strip that pauses on hover. The edge scrim is a fixed width (4rem by default) so it reads the same at any container width.

Defaultfade="4rem"
Wider scrim, tighter gap, slowerfade="8rem" gap="0.5rem" duration="60s"

Testimonial Carousel

A crossfading quote carousel with attribution, rendered here with the same autoRotate and liquid-glass reveal config /about ships. The config is imported from the page rather than restated, so the specimen cannot drift from production.

Aarron WalterBrooke NovakDave GreinerAdam Schwartz

“Most designers simply take direction and bring few original ideas to the table. That’s not Matt’s gig. He has creative vision and the chops to support it. He’s going to kill it. Every. Time.”

Aarron Walter
Director of UX, MailChimp
Co-Founder, Design Better Podcast

Input Group

A field that carries content inside its own border rather than beside it: a leading icon, a trailing button, or both. InputGroupAddon holds the content and takes inline-start or inline-end. Reach for it only when the extra element belongs to the field; a button that submits a form belongs outside it.

InputGroup

Star Rating

A read-only rating. rating takes a fraction, so 4.5 renders a half star rather than rounding, and size is a pixel number because the stars must stay square.

Whole, half and partialrating={5} / {4.5} / {3}
5
4.5
3

Scroll Area

A capped reading region. The edge skim is a MASK on the viewport rather than a gradient painted over it, so it thins the content itself and works on any surface: the card fill shows through untouched, where an overlay would have to guess the color behind it. The bar is a floating overlay thumb that fades in on scroll and back out a second after it stops, so nothing reserves a gutter and nothing shifts.

ScrollFade

A scroll region earns its place when the content genuinely has no end and the page around it does. A capped height turns an unbounded list into a fixed object, so everything below it stays where the reader left it.

The skim at each edge is a mask, not an overlay. That distinction is the whole reason this component can sit on a card, a page, or a drawer without being retuned: a gradient painted in the background color has to know what is behind it, and it is wrong the moment anything moves.

It ramps with scroll distance rather than sitting at a fixed strength. At rest there is nothing to fade, so a static skim would read as dead space above the first line; scroll one pixel and it arrives in proportion.

The bar is drawn rather than inherited. A native webkit thumb cannot fade, because transitions on the scrollbar pseudo-elements are ignored, so the only way to get a bar that appears on activity and leaves afterwards is to render one.

It floats over the content instead of reserving a gutter. A bar that takes width would reflow the text every time it appeared, which is a layout shift triggered by scrolling, the one interaction where a reader is least able to tolerate it.

Under reduced motion the thumb stops transitioning and simply appears. The skim stays, because a mask is not motion: nothing travels, and the reader still needs to know the region continues past its edge.

The viewport is the scroller, not the root. When a region is capped by max height rather than given a fixed one, a percentage height against an auto-height parent resolves to auto, so the cap has to land on the viewport or the root just clips its content and never scrolls at all.

Overscroll is off in both directions. An in-app region should not rubber-band at its own edges, and it should not chain its scroll to the page behind it once it reaches the end.

Newsletter Form

Not a primitive but an app composition, included because it is the one form on the site with its own layout contract. layout="stacked" puts the button under the input, layout="inline" places it beside, and buttonWidth="auto" shrinks the button to its label instead of filling the row.

Stackedlayout="stacked"