Astro
Astro 5, 6 and 7, static or server.
Integration Grid
A grid of integrations, tools or partners: cards with an icon, a name and a line, each lit by a spotlight that follows the cursor and lifting on hover, revealed with a tight stagger.
Live demo
GSAP
ScrollTrigger on the Astro lifecycle.
Lenis
One instance per document.
Tailwind
Opt-in token layer.
shadcn
Registry-compatible.
MCP
Search by byte budget.
llms.txt
The catalogue as Markdown.
Vercel
Static + one gated route.
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 Spotlight and the shared runtime (1.9 kB raw, once per site) and Reveal. With those included: 3.3 kB raw.
CSS 11.2 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/integration-grid---
import IntegrationGrid from '@/components/moonarc/pro/IntegrationGrid.astro';
---
<IntegrationGrid columns={3} items={[
{ name: 'GSAP', description: 'ScrollTrigger on the Astro lifecycle.', href: '/docs/view-transitions/' },
{ name: 'Lenis', description: 'One instance per document.' },
{ name: 'Tailwind', description: 'Opt-in token layer.' },
]} />Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal, spotlight.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { name, description, href?, icon? }[] | none | Cards; icon is an HTML string (inline SVG or <img>). |
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' | Card padding and gaps ×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-integrations.ma-integrations__card.ma-integrations__copy.ma-integrations__desc.ma-integrations__eyebrow.ma-integrations__head.ma-integrations__headline.ma-integrations__icon.ma-integrations__name
Slots
slot="eyebrow"slot="headline"slot="copy"
Reduced motion
Cards fade in without stagger; the spotlight still follows the cursor (direct manipulation); no lift.
With ClientRouter
Inherits Reveal and Spotlight; nothing to wire.
Why it is built this way
- Stagger 40 ms: twelve cards finish in under half a second, so the grid arrives as one piece.
- Hover lift is --ma-travel-hover, so it matches every other hover on the page and changes with the preset.
- The card, not the icon, is the link target (a pseudo-element covers it) so the whole spotlighted surface is clickable.
Replaces: Integration sections (Tailwind Plus) · HoverEffect cards (Aceternity). See the migration table.
Related
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
Spotlight
PointerA soft radial light follows the cursor over a card and fades in only while hovered.
every browserpointerhover
Lays out features as a bento grid: one slab split by 1 px hairlines, with the page ground showing through the gaps.
every browserscroll
Logo Wall
ProA "trusted by" section: a heading, a strip of greyscale logos drifting past that colour up on hover, and optionally the same logos as a hairline grid revealed with a stagger.
every browseralwaysscroll
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown