Tab Switch Panel
An app window whose tabs switch on their own, the pill gliding while panels slide through.
SceneScenes
$ npx remotion-ui@latest add tab-switch-panelThe pill travels along the tab bar while the outgoing panel slides off and the incoming one arrives behind it. Rows trail the headline by a little more each step down, so a panel reads as one object with depth rather than as a stack of independent fades.
Tabs share the bar width evenly. That is what lets the pill's travel be pure arithmetic — no text measurement, so the indicator can never drift out of register with the label beneath it. The trade is that one long label squeezes every other tab, so keep labels to a word or two.
The scene walks forward from startIndex to the last tab and stops; it does not
wrap. Total run time is firstSwitchAtSeconds + switchEverySeconds × (tabs.length - 1 - startIndex) + transitionSeconds,
which is the number to check before setting holdSeconds — a hold shorter than
that cuts the window away mid-switch.
Panels cross-fade faster than they travel, on purpose: the outgoing panel is gone before the incoming one is half way, so the two never sit on top of each other as unreadable double text.
Tabs share the bar width evenly so the pill's travel is arithmetic rather than measured text — it can never drift out of register with its label. The scene walks forward to the last tab and stops; it does not wrap, so holdSeconds must clear firstSwitchAtSeconds + switchEverySeconds × (tabs.length - 1) + transitionSeconds.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/tab-switch-panel- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: tabs, windowTitle, startIndex, firstSwitchAtSeconds, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { TabSwitchPanel } from "@/remotion/scenes/tab-switch-panel";
<TabSwitchPanel
windowTitle="Northstar Studio"
tabs={[
{ label: "Overview", title: "1,284 renders", rows: [{ label: "Queued", value: "12" }] },
{ label: "Billing", title: "Studio plan", rows: [{ label: "Seats", value: "9 of 12" }] },
]}
switchEverySeconds={0.9}
holdSeconds={4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | PanelTab[] | 4 sample tabs | Tab label plus the panel's title, summary and label/value rows. |
| windowTitle | string | "Northstar Studio" | Title bar text. Omit to drop the chrome header. |
| startIndex | number | 0 | Tab shown when the scene opens. |
| firstSwitchAtSeconds | number | 0.95 | Second the first switch fires. |
| switchEverySeconds | number | 0.9 | Seconds between switches after the first. |
| transitionSeconds | number | 0.5 | How long one tab-to-tab move takes. |
| holdSeconds | number | - | Seconds the last panel holds before the window retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Indicator pill and active label. |
| backgroundColor | string | - | Page behind the window. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |