Macro Tab Name

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

Installation

$ pnpm dlx 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.

Props9

Prop	Type	Default
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.

theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
accentstring
Accent color for the focus ring and spinner.
Default"#3B5BFD"
namestring
Text typed into the tab, also the resolved document title.
Default"Launch Assets"
neighborsstring[]
Names of the sibling tabs shown to the left; last two used.
Default["Changelog", "Pricing"]
pathstring[]
Breadcrumb segments shown above the document title.
Default["Marketing", "Launch week"]
docMetastring
Meta line under the title, such as last edited time.
Default"Edited 2 min ago · 14 files"
docBodystring[]
Body lines of the document; portrait shows all, landscape the first.
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.