Scroll Reveal
ScrollEntrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.
every browserscroll
Team Grid
Shows team members in a hairline grid: portraits that tilt toward the cursor with a glare, initials when there is no photo, names and roles revealed with a stagger.
Live demo
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
tone
density
columns
Measured
JavaScript of its own
0 B
Uses Tilt and the shared runtime (1.9 kB raw, once per site) and Reveal. With those included: 3.5 kB raw.
CSS 10.9 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
every browser.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/team-grid---
import TeamGrid from '@/components/moonarc/pro/TeamGrid.astro';
---
<TeamGrid columns={3} people={[
{ name: 'Azri Putra', role: 'Maintainer', photo: '/team/azri.jpg', href: 'https://github.com/azriPtr' },
{ name: 'You', role: 'Contributor' },
]} />Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal, tilt.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
people | { name, role, photo?, href? }[] | none | People; initials are drawn when photo is missing. |
columns | 2 | 3 | 4 | 4 | Columns on wide screens. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | unset (paints nothing) | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Cell padding ×0.8 / ×1 / ×1.25 through --ma-density. |
Theming and overrides
The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.
Classes
.ma-team.ma-team__copy.ma-team__eyebrow.ma-team__head.ma-team__headline.ma-team__initials.ma-team__person.ma-team__photo
Slots
slot="eyebrow"slot="headline"slot="copy"
Reduced motion
Fades in without stagger; no tilt.
With ClientRouter
Inherits Reveal and Tilt; nothing to wire.
Why it is built this way
- Tilt 8° with glare on the photo only. The caption stays put so names remain readable while the portrait moves.
- Hairline grid, not cards: a team reads as one group.
- Initials as a fallback: a missing photo should never be a broken image.
Replaces: Team sections (Tailwind Plus). See the migration table.
Related
Tilt
PointerA card leans toward the cursor in 3D, lifts slightly, catches a glare, and settles back on the active preset's spring when the cursor leaves.
every browserpointerhover
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown