# Macro Tab Name
URL: https://remocn.dev/docs/ui-blocks/macro-tab-name

A macro close-up of a document tab where a cursor clicks in and the tab name types out.

- Install: `npx shadcn@latest add @remocn/macro-tab-name`
- Vibe: tech
- Natural length: 100f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/macro-tab-name
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MacroTabName } from "@/components/remocn/macro-tab-name";

const MacroTabNameScene = () => (
  <MacroTabName
    name="Launch Assets"
    path={["Marketing", "Launch week"]}
    docMeta="Edited 2 min ago · 14 files"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="MacroTabName"
    component={MacroTabNameScene}
    durationInFrames={108}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The camera starts in macro on a document tab. A cursor clicks it, the `name` types in character by character, a brief spinner shows the save, and the tab resolves into the finished title over a breadcrumb and meta line. Pass your own `name`, `path` and `docMeta`; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the focus ring and spinner. |
| `name` | `string` | `"Launch Assets"` | Text typed into the tab, also the resolved document title. |
| `neighbors` | `string[]` | `["Changelog", "Pricing"]` | Names of the sibling tabs shown to the left; last two used. |
| `path` | `string[]` | `["Marketing", "Launch week"]` | Breadcrumb segments shown above the document title. |
| `docMeta` | `string` | `"Edited 2 min ago · 14 files"` | Meta line under the title, such as last edited time. |
| `docBody` | `string[]` | — | Body lines of the document; portrait shows all, landscape the first. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A feature beat about naming or renaming a document, project or workspace, shot as an extreme close-up of the tab.
- A collaboration or file-management demo needs a quick save confirmation: typing, a brief spinner, then the resolved title.
- You want a tight, product-detail shot between wider UI scenes.

## Don't use when
- You need a full browser window with an address bar and page content — use `url-bar-cta`.
- The point is a big typed headline, not a UI chip — use `typewriter`.
- You only need a pointer gliding and clicking on your own UI — use `simulated-cursor`.