# Inlay — Animated Section Block for React

> The living bento: a six-tile features grid where every tile performs a real micro-demo instead of an icon — search that types and filters, a switch that unlocks a row, a bar chart that redraws, named cursors over a mini doc, ⌘K keycaps that pop a palette, and a packet syncing two devices. A staggered idle loop keeps about two tiles performing; hover, focus or tap takes a tile over, with a cursor-follow accent border light.

- Page: https://crucibleui.com/components/sections/inlay
- Category: [sections](https://crucibleui.com/components/sections)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/inlay
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/inlay`.

## Props (`InlayProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tiles?` | `InlayTile[]` | — | Per-tile overrides, index-aligned with the six built-in tiles (Search, Toggle, Chart, Presence, Shortcut, Sync). The array length sets the tile count; each entry merges onto the built-in tile at the same index. Omit for the full default bento. |
| `eyebrow?` | `React.ReactNode` | `"Features"` | Small label above the heading. Pass `null` to hide. |
| `heading?` | `React.ReactNode` | `"Small details, working together"` | Section heading. Pass `null` to hide the whole header. |
| `description?` | `React.ReactNode` | — | Supporting line under the heading. Pass `null` to hide. |
| `accentColor?` | `string` | `"#6ee7b7"` | Signature accent for highlights, the cursor-follow border light and focus rings. |
| `columns?` | `1 \| 2 \| 3` | `3` | Maximum columns on wide containers. 3 uses the varied-span bento; 2 pairs tiles evenly; 1 stacks. Narrow containers always stack. |
| `paused?` | `boolean` | `false` | Stop the ambient idle loop (hover, focus and `play()` still run tiles). |
| `ref?` | `React.Ref<InlayHandle>` | — | Imperative handle (`replay()`, `play(index)`). React 19 ref-as-prop. |
| `className?` | `string` | — | Extra classes for the `<section>` root. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"section">, "children" | "title">`.

## Usage example

```tsx
"use client";

import * as React from "react";

import { Inlay, type InlayHandle } from "@/components/crucible/inlay";

export default function InlayDemo() {
  const ref = React.useRef<InlayHandle>(null);

  return (
    <div className="relative isolate h-[640px] w-full overflow-y-auto overscroll-contain rounded-xl bg-neutral-950">
      <div className="relative z-10 flex items-center justify-between gap-4 px-6 pt-5 text-xs text-white/40">
        <span>Hover a tile to run it.</span>
        <button
          type="button"
          onClick={() => ref.current?.replay()}
          className="rounded underline underline-offset-4 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
        >
          Replay intro
        </button>
      </div>
      <Inlay ref={ref} className="relative z-10 pt-6" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.