--- title: "Capturing your app" description: "Bring your product's interface onto the stage as layers you can animate: its screens and components, named as your code names them, text you can retype, your own fonts, icons as shapes. Then make the film: a launch, a feature, a walkthrough." canonical: "https://terminal.lottiefiles.com/docs/capture/" last_updated: 2026-10-30 --- # Capturing your app Bring your product's interface onto the stage as layers you can animate: its screens and components, named as your code names them, text you can retype, your own fonts, icons as shapes. Then make the film: a launch, a feature, a walkthrough. ## From your project Start Creator Terminal in your app's folder (React, Next.js, Vite, Vue, Svelte, Astro, or plain HTML) on macOS or Linux (not on Windows yet) and home has a row for it: **Capture from** your app's name. Or, in the editor, the palette's **Capture from your app**. Chrome opens on your app (Edge, Brave or Chromium if that's what you have): on its dev server if it's running, else Creator starts it (`pnpm dev`, `npm run dev`…) and stops it when you're done. The window has a profile of its own, so signing in to your app there lasts between runs; your everyday browser isn't touched. At the bottom of the page sits a small bar: - **Pick**: point at a component. Its whole outline shows, with what it is and where it's written (`Card · src/features/dashboard/card.tsx:12 · 274 × 150`). `↑` goes to the component around it; `↓` comes back. Hold `⌥` (`Alt` on Linux) to pick the exact element under the pointer. Click (or `↵`) captures it; `esc` stops picking. Plain HTML uses the element's name. - **Page**: captures what the window shows. - **✕**: stops capturing. When you're not picking, the app works as always: sign in, open the menu you want in the shot, fill in a form, go to another page. ## On the stage What you capture goes into the document open (a new one when you start from home) as a precomp named after it, from the playhead on, selected. Inside, the layers are grouped and named after your components (`Sidebar`, `Card`, `Button "Download"`), so a stagger or a slide is a few keys on the parts you mean. Double-click the precomp to go in. `u` takes a capture back. - Text is text, in your app's font, and its glyphs go into the file: retype a number or a name for the film. A page in the computer's own font (`system-ui`, San Francisco on a Mac) comes in in Inter Display: Apple's font is only for the Mac's own screens, never for a file. - Icons and other SVGs are shapes; pictures stay pictures. - What can't be shapes (a canvas, a video, a map, a frame from another site, a frosted-glass blur) comes in as a picture of itself, and the status line says how many. ## Capture again, and it animates Capture the same thing again after changing it in the app (a tab switched, a menu opened, the sidebar collapsed, data loaded) and it isn't added a second time: the precomp now holds both looks, and goes from the first to the second. What's in both moves and resizes, what's gone fades out and what's new fades in. Capture a page, go to another page of your app, and capture it too: the parts the pages share hold still while the rest changes. Each look is held, then eases to the next. Change the timing with the keys, as any animation. If you've edited the precomp's layers since you captured it, a new capture goes in beside it rather than over your work. ## All your components The palette's **Components** opens a shelf over your document. With no window, a browser reads your app: its pages one after another (following its own links, and Next.js's routes), each of your components on them captured alone, once. Keep working meanwhile; the tiles appear as they're found. Screens come first, then components, each with its name and source file. Arrows or `h j k l` move; `/` searches by name or file; `[` `]` choose a look. `g` shows the pictures on dark rather than light. `↵` puts the choice on the stage and returns to your document; `a` adds it and keeps the shelf open. A click picks, a double-click adds, and the wheel scrolls. `esc` clears a search, then goes back. `:` or `⌘P` opens the palette over the shelf. `s`, or **Components as a sheet** in the palette, opens a document with every component as a named precomp, its name and source file underneath. Select one, `⌃C`, and `⌃V` it into your film. **Add a component…** lists them by name (or file), and puts the one you choose on the stage from the playhead. Typed in the palette, a component's name finds it too. Pages you've signed in to in Creator's Chrome window are read signed in. The components are kept with the project, so the shelf opens at once next time; `r` or **Refresh components** reads them again after your code changed. A project with Storybook gives its stories instead: each story a component, its stories' variants kept together. ## Any page The palette's **Capture a web page…** opens Chrome on any address (typed, pasted with your terminal's paste or `⌃V`, or put in by its **Paste from clipboard** row), for a page that isn't yours to run (your live site, a Storybook). With Chrome already open, it goes to that address in the same window, so two pages of one app captured one after the other make a page transition. **Capture the page in Chrome** does what the bar's Page does, from the terminal, and **Stop capturing** closes the window. ## A component from a UI library The palette's **Import a component…** brings in a component from a UI library, without a project of yours: paste its address and it's on the stage as layers, like a capture. It takes what the libraries' pages give you to copy: - a registry link (`https://animate-ui.com/r/…`, `https://ui.shadcn.com/r/styles/new-york-v4/button.json`) - a registry name, `@animate-ui/components-buttons-flip` (any of the libraries in shadcn's directory: Animate UI, Magic UI, Aceternity, React Bits, Motion Primitives…) - the install line, `npx shadcn@latest add @magicui/number-ticker` - a Subframe Motion page, `https://www.subframe.com/motion/ticket-tear` - in the palette, a shadcn component's bare name (`button`) Pasting any of these over the stage (not a bare name) imports it too. Or ask the copilot ("a flip button from Animate UI"): it finds one in the libraries and imports it, and so can Claude, Cursor or Codex through [`creator-tui mcp`](https://terminal.lottiefiles.com/docs/mcp.md). Its code is fetched and drawn in a browser with no window, with the library's own look (its theme, Tailwind); its demo is drawn when it has one, as wide as the library's docs show it (a block that's a whole page, a browser's width), and comes in only as wide as what it draws. Then it's captured at rest, hovered, pressed and clicked, and the looks that differ go in as one precomp, playing one after another: retime them, or keep one. The status line follows along. A component's code runs only in that browser, never on your computer otherwise. It needs the network: the component's packages are fetched as it's drawn. Some can't be imported yet: 21st.dev's need an API key, Motion's own (motion.dev/ui) a Motion+ account, and a library's paid blocks (ReUI's Pro ones) its account. Remotion's (`@remocn/…`) are a video's frames, not an interface, and aren't imported. What's drawn on a canvas or with WebGL comes in as a picture. ## On the command line ```sh creator-tui capture # this folder's app creator-tui capture localhost:3000/pricing -o pricing.json creator-tui capture https://example.com --element "main .card" --size 1280x800 creator-tui capture --component "npx shadcn@latest add @reui/c-progress-4" -o progress.json ``` No window opens: the page is captured as it loads, written as a Lottie you can open, export (`creator-tui export pricing.json -f mp4`) or drop on a document.