Design system demo
Every type rung and every scroll reveal this site has, in one place, each captioned with the markup behind it. Scroll rather than jump if you want to see the reveals play — they are tied to the viewport, and an anchor lands past most of them.
Typography
Title rungs
Heading level is a document-structure decision; the rung on it is a separate, visual one. The samples below are paragraphs, not headings, so this page's outline stays honest — at a real call site, pick the level the outline needs, then the rung the design needs.
.text-title-xl: page title
.text-title-lg: subtitle
.text-title-md: subsection
.text-title-sm: card/component title
Body copy and links
Link example within a text (.prose-link) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam Example.com consectetur adipiscing elit.
And a list:
- List item 1 and a link example.com
- List item 2
- List item 3
And a blockquote:
Blockquote example — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
Scroll reveals
Three components, each wrapping markup rather than replacing it, so semantics and type rungs stay at the call site. All three are gated on prefers-reduced-motion and leave their content fully readable if the script never runs — which is why a reduced-motion visitor reads this page as a plain document.
Reveal — any block
The general one: a fade, optionally travelling from an offset, with every parameter of the gesture a prop. Passing nothing gives a one-second fade in place, entering at top 85%.
<Reveal>
Bare — a one-second fade in place.
<Reveal y={80}>
Travels up from 80px below its resting place.
<Reveal x={-120} ease="back.out(1.7)">
Enters from the left and overshoots slightly on arrival.
<Reveal y={40} stagger={0.15}>
- Staggered item one
- Staggered item two
- Staggered item three
<Reveal y={60} action="once">
Plays a single time per page load — scrolling back up leaves it revealed, where the default reverses it out.
<Reveal x={160} scrub={0.6}>
Tied to scroll position rather than played on entry — scroll slowly and it follows, with six tenths of a second of catch-up.
RevealText — split headings
For one heading, split into words, characters or lines. Six gestures, chosen per call site with effect; the samples below are paragraphs at a title rung for the same outline reason as above, but at a real call site the slot holds the h1 or h2 the page needs.
<RevealText effect="mask-rise"> — the line slides up out of a clip box — spare
A shared vision for the archive
<RevealText effect="blur-words"> — words settle out of a soft blur — News
A shared vision for the archive
<RevealText effect="arc-chars"> — characters swing in along a shallow arc — Partners
A shared vision for the archive
<RevealText effect="char-rise"> — characters rise one by one — the hero's gesture, News
A shared vision for the archive
<RevealText effect="clip-wipe"> — a left-to-right unveil, a dot riding the front — Areas
A shared vision for the archive
<RevealText effect="scrub-drift"> — slides in from the right, tied to scroll — Team
A shared vision for the archive
RevealGrid — batched lists
For a grid long enough that its lower rows are still below the fold when the top ones enter. ScrollTrigger batches the items by row, so each row waits its turn instead of playing out of sight — which is the whole reason to reach for this over Reveal's stagger.
Card 1
Rises and fades a beat after the card before it.
Card 2
Rises and fades a beat after the card before it.
Card 3
Rises and fades a beat after the card before it.
Card 4
Rises and fades a beat after the card before it.
Card 5
Rises and fades a beat after the card before it.
Card 6
Rises and fades a beat after the card before it.
Card 7
Rises and fades a beat after the card before it.
Card 8
Rises and fades a beat after the card before it.
Card 9
Rises and fades a beat after the card before it.