Feature Atlas
Lays out features as a bento grid: one slab split by 1 px hairlines, with the page ground showing through the gaps. Each cell has a stage slot for a live demo, an index, a title (a link when `href` is set), a blurb and one readout line. Cells reveal with a stagger, and two can be accent-filled. The Moonarc home page's atlas uses the same pattern.
Live demo
03
Page Transition
Name a region on two pages and it animates between them with a native view transition.
0 B04
Count Up
CSS counters driven by one custom property. The HTML already holds the number.
0 B + Reveal + runtimeLive, 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 Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.
CSS 10.6 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/feature-atlas---
import FeatureAtlas from '@/components/moonarc/pro/FeatureAtlas.astro';
import Aurora from '@/components/moonarc/Aurora.astro';
---
<FeatureAtlas columns={3} items={[
{ title: 'Measured', blurb: 'Every byte from a real build.', readout: '0 B', fill: true },
{ title: 'Survives navigation', blurb: 'Rebinds after every swap.', href: '/docs/view-transitions/' },
{ title: 'Page transitions', blurb: 'On Astro\'s router.', wide: true },
]}>
<Aurora slot="stage-0" />
</FeatureAtlas>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { title, blurb, href?, readout?, fill?, wide? }[] | none | Cells, in order. Put a live demo in slot="stage-{index}": the stage exposes it as it is, so a demo's controls stay reachable and decoration marks itself aria-hidden. |
columns | 2 | 3 | 4 | 4 | Columns on wide screens; two on tablets, one on phones. |
accent | string | var(--primary) | Fill colour for `fill` cells; the primary colour of the theme by default. |
onAccent | string | var(--primary-foreground) | Text colour on the accent. |
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-atlas.ma-atlas__blurb.ma-atlas__cell.ma-atlas__content.ma-atlas__copy.ma-atlas__eyebrow.ma-atlas__head.ma-atlas__headline.ma-atlas__index.ma-atlas__readout.ma-atlas__stage.ma-atlas__title
Slots
slot="eyebrow"slot="headline"slot="copy"
Reduced motion
Cells fade in without stagger or travel.
With ClientRouter
Inherits Reveal; nothing to wire.
Why it is built this way
- gap: 1px with the edge colour as the grid background: hairlines, not card gaps, so the slab reads as an instrument panel.
- Fill the 2nd and 7th cells, never neighbours. On a diagonal, two accents read as a deliberate pattern rather than emphasis.
- Titles at 23 px: the middle step between body and section heading that a tile needs.
Replaces: BentoGrid (Aceternity / Magic UI) · Feature sections (Tailwind Plus). 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
Feature Rows
ProShows features in alternating rows of copy and a visual.
Chrome 115 · not Firefox · Safari 26scroll
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..
every browserscrollpointer
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown