# Mosaic card

A shadcn/ui values card for about and careers pages: tap and the image breaks into a pixel mosaic that dissolves into the next as the words rise in.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** About and brand story pages; Company values and culture pages; Careers pages that show what a team believes; Agency and studio manifestos
- **Category:** Marketing · **Type:** Cards · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/blocks/mosaic-card) · [Screenshot](https://www.craftui.space/llms.md/preview/mosaic-card.cc7a519e.jpg)

![Mosaic card](https://www.craftui.space/llms.md/preview/mosaic-card.cc7a519e.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/mosaic-card.json
```

This is a paid item (BLK-WTFKTA): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import MosaicCard from "@/components/blocks/mosaic-card";

export default function Page() {
  return <MosaicCard />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `MosaicCardItem[]` | `built-in demo content` | The photo-and-line pairs it moves through, in order; they loop. Three to six read best. Defaults to `mosaicCardItems`, a studio's principles. |
| `aspect` | `keyof typeof ASPECTS` | `"landscape"` | The card's shape: "landscape" (4:3), "square" or "portrait" (4:5). Defaults to "landscape". |
| `grid` | `number` | `12` | Tiles along each side of the dissolve: more is finer. Defaults to 12. |
| `interval` | `number` | `0` | Seconds before it moves on by itself; 0 to change only on click or tap. It holds while the pointer rests on it, while it has focus and off screen, and never moves by itself with reduced motion. Defaults to 0. |
| `counter` | `boolean` | `true` | Whether to show the small "01 / 04" counter at the bottom. Defaults to true. |
| `nextLabel` | `string` | `"Show next"` | What the card's button says to screen readers, e.g. "Next principle". Defaults to "Show next". |

It also accepts every `<figure>` attribute (`className`, `id`, `aria-*` and so on).

### `MosaicCardItem`

| Field | Type | Description |
| --- | --- | --- |
| `image` (required) | `string` | The photo's URL. It's cropped to fill the card (`aspect`). Darker photos, or ones with a quiet top-left corner, carry the line best. |
| `alt` (required) | `string` | What the photo shows, for screen readers, e.g. "An open hand against black". |
| `text` (required) | `string` | The line over the photo: a value, a principle or a line of your manifesto. A few words read best. |

## Files

The install adds:

- `components/blocks/mosaic-card.tsx`

No npm dependencies beyond React and Tailwind CSS.