The Details
StableA living spec of the finishing layer: the metal button built up layer by layer, surfaces, controls, motion, type and moments.
DetailsPage explains the brand’s finish with the real classes and components, not pictures of them: the button in five steps from a flat pill to lit metal, the four shadow heights and film grain, a field, a slider and tabs, the easing curves with a replay button, the type scale, a few small moments (the blinking logo cursor, counting numbers) and the rules that keep it quiet.
Updated View source
The Details page
import { DetailsPage } from '@rchursin/details/DetailsPage'
/** * A living spec of the finishing layer: the button built up one layer at a time, surfaces and * grain, controls, motion curves, type and small moments. Every specimen is the real class or * component. Complete page: skip link, header, <main> with one <h1>, footer. */export default function DetailsTemplatePage() { return <DetailsPage />}Usage
import { DetailsPage } from '@rchursin/details/DetailsPage'<DetailsPage />Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | The first stop is “Skip to content”, then the header’s logo, links and button, then the page in reading order. |
| Enter | On “Skip to content”: jump past the header to the page’s <main>. |
| Left arrowRight arrow | On the slider: fewer or more skills; on the example tabs: the previous or next tab. |
| EnterSpace | On “Play all four” or “Replay”: run those motion demos again. |
| Tab | Focus the logo demo to see its cursor blink, as it does on hover. |
- One <h1>, a skip link, a header with the section links, <main> and a footer; every section is labelled by its heading.
- The motion demos jump straight to their end state when reduced motion is on, and say so on the page.
- The slider has a label and an <output> tied to it, so its value is read as it changes.
- The logo demo is a button with a name that says what it shows, because focusing it plays the same blink as hovering.
Guidelines
Do
- Use it as the reference when you add a finish: if it can’t be shown here with the real class, it isn’t in the system.
- Keep its specimens wired to the real classes, so the page breaks when the CSS does.
Don’t
- Don’t copy the specimen layouts into product screens; they are built to explain, not to use.
- Don’t add a finish here that the rest of the library doesn’t use.
In use
Related
- Metal finishThe lit-metal button finish as plain classes: graphite, pearl, ghost, outline and inverse, on any element you press.
- Cards & elevationCards on one four-step elevation scale: lux-card, a lower lux-card-flat, lux-lift on hover and lux-float for overlays.
- Easing & transitionsFour motion curves, a soft cross-fade for view changes, a reduced-motion hook and disclosures that ease open.
- Light & grainA ceiling halo for heroes, film grain for flat grounds, a fade for product shots and a shadow that follows torn paper.
- Cursor underscoreThe underscore in RChursin_ is a cursor: it blinks on hover and focus, or a few times when it appears.
- Count upA number that counts up once, the first time it scrolls into view. Screen readers get the final value straight away.
- Range sliderThe lux-range finish for a native range input: a hairline track that fills to the thumb and a lit pearl thumb.
Source
The component’s own files, exactly as they run on this site.
/** * The details: a living spec of the luxe layer (styles/luxe.css + components/motion.tsx). * Every specimen on this page is the real class or component, not a picture of it. */import { useId, useState, type CSSProperties, type ReactNode } from "react"import { Logo } from "../brand/Logo"import { cx } from "../components/cx"import { CountUp, useLuxe } from "../components/motion"import { SiteFooter, SiteHeader, SkipLink } from "../home/Chrome"import { Tabs } from "../home/Tabs"import { ButtonLink, CommandLine, Container, delay, Eyebrow, FrameCorners, SectionHeading,} from "../home/ui"