File Tree Reveal
A project tree opening itself node by node, folders turning as their contents arrive.
SceneScenes
$ npx remotion-ui@latest add file-tree-revealRows arrive in depth-first display order, so a folder is always on screen before anything inside it — the tree expands rather than assembling out of order. Each row takes up its own height as it appears, which pushes the rows beneath it down instead of fading them onto a fixed grid, and each folder's chevron turns on the same frames its first child arrives.
Nodes are folders when they have a children array, files when they do not. An
empty array is a folder with nothing in it, which is why there is no kind
field to keep in sync.
selectedPath is the slash-joined path from the root — src/scenes/lower-third.tsx,
not just the file name — so a tree with the same name under two folders selects
the one you meant. Omit it to leave nothing selected.
File names take their colour from the extension, using the same token palette
the code components use, so a tree standing next to code-reveal or
code-diff-wipe agrees with it. This component shows structure; those two show
the contents of a file.
Rows reveal in depth-first display order, so a folder is always on screen before its contents, and each row takes its own height as it arrives — the rows beneath are pushed down rather than cross-faded onto a fixed grid. File names take their colour from the extension using the code token palette. Shows structure; code-reveal and code-diff-wipe show the contents of a file.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/file-tree-reveal- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: nodes, title, selectedPath, rowStagger, 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 { FileTreeReveal } from "@/remotion/scenes/file-tree-reveal";
<FileTreeReveal
title="northstar-studio"
nodes={[
{ name: "src", children: [{ name: "index.ts" }] },
{ name: "package.json" },
]}
selectedPath="src/index.ts"
holdSeconds={4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | FileNode[] | sample project tree | Recursive tree. A node with a children array is a folder; without one it is a file. |
| title | string | "northstar-studio" | Title bar over the tree. Omit to drop the header. |
| selectedPath | string | "src/scenes/lower-third.tsx" | Slash-joined path of the file that lights up at the end. Omit to select nothing. |
| rowStagger | number | 0.18 | Seconds between one row appearing and the next. |
| holdSeconds | number | - | Seconds the finished tree holds before the panel retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Selected row's bar, tint and label. |
| backgroundColor | string | - | Page behind the panel. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |