Terminal — component for code & terminal (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Dark macOS-style terminal types a command, then prints green check lines one after another

• Install: npx shadcn@latest add @magicui/terminal
• Registry: magic-ui · Framework: react · License: MIT
• Docs and preview: https://magicui.design/docs/components/terminal
• Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/terminal.tsx
• Example: https://skills.varg.ai/previews/lib-magic-ui-terminal.mp4?v=20817 (Captured from the library’s own demo page (Magic UI))
• Time: Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
• Runs: local render, free
• Aspect: any

Prompt that renders it frame-exact

Use Terminal from Magic UI (https://magicui.design/docs/components/terminal, MIT) for developer or CLI moments: the window centred in the frame, your real command in the typing line and its output as AnimatedSpan lines. Typing runs on setInterval and the lines fade in with motion once the window is in view, so nothing is tied to frame time. For a render, show floor((frame / fps - start) * charsPerSecond) characters of the command, then reveal each output line at its own start time with an opacity and y tween; put those on the paused timeline in HyperFrames, or use interpolate on the frame in Remotion. Set the command, the output lines and their colours, the typing speed and the gap between lines.

Used in

• Changelog & release notes
• Pull request to video
• Code walkthrough
• CLI & terminal demo
• AI chat & agent demo
• API & docs explainer
• Live-coded music video

More code & terminal

• Code 3D Extrude — npx hyperframes add code-3d-extrude
• Code Diff — npx hyperframes add code-diff
• Code Highlight Sweep — npx hyperframes add code-highlight
• Code Morph — npx hyperframes add code-morph
• Code Particle Assemble — npx hyperframes add code-particle-assemble
• Code Scroll To Line — npx hyperframes add code-scroll