Live Workspace
A logo ticker and your product at work: a live log, a build in progress and stages ticking off.
Features
- An activity log streams in, newest on top
- The preview builds itself in step with the log
- Stages tick off and a readiness bar fills
- Client wordmarks glide past and pause under the cursor
- Shows the finished state for reduced motion
Best for: SaaS products and agencies that sell a process: show the work happening, not a screenshot of it.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The headline. |
| accent | string | - | Optional ending in serif italic. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| assurances | string[] | - | Short promises under the buttons. |
| clients | string[] | - | Names for the ticker, set as wordmarks. |
| tickerLabel | string | "Trusted by teams at" | The line above the ticker. |
| project | string | - | The project shown in the workspace. |
| domain | string | - | Where the project goes live. |
| events | WorkspaceEvent[] | - | The log, in order: kind, text, detail and time. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Live Workspace product showcase section free to use?
Yes. Live Workspace is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Live Workspace work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Live Workspace in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Live Workspace need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Live Workspace accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.