Terminal Demo
Installation
npx shadcn@latest add https://uibrik.com/r/terminal-demo.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/terminal-demo/terminal-demo.tsx"use client"; // A terminal window that plays a short session: the command types itself with // a human rhythm, output lines arrive one by one, a progress bar fills, and it // ends on a result line. It starts when scrolled into view and, if looping, // clears and plays again after a pause. Reduced motion shows the finished session. import { AnimatePresence, motion, useInView, useReducedMotion } from "motion/react"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1]; export type TerminalLine = /** Typed after the prompt. */ | { type: "command"; text: string } /** Printed output. `tone` colours it: success gets a check, muted is dimmed. */ | { type: "output"; text: string; tone?: "default" | "success" | "muted"; delay?: number } /** A bar that fills over `duration` seconds, labelled with `text`. */ | { type: "progress"; text: string; duration?: number }; export type TerminalDemoProps = { lines?: readonly TerminalLine[]; /** Title in the window bar. */
Adds the files to
components/uibrik/terminal-demo and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/terminal-demo.Props
TerminalDemo- title
- Type string
- "Terminal"
- Title in the window bar.
- dots
- Type "mono" | "mac"
- "mono"
- Window buttons in neutral grey, or macOS red, yellow and green.
- prompt
- Type string
- "~"
- Prompt before each command.
- typingSpeed
- Type number
- 55
- Average time per typed character.
- loop
- Type boolean
- true
- Play again after a pause once finished.
- hold
- Type number
- 3
- How long the finished session stays before replaying.
- lines
- Type TerminalLine[]
- an install session
- { type: "command", text } is typed; { type: "output", text, tone?, delay? } is printed (tone: success, muted); { type: "progress", text, duration? } fills a bar.
- className
- Type string
- –
- Classes for the window.
