# Atlas Workspace Console UI Kit
> A light-first creative operations console with ten coordinated components, a Flip-powered project inspector, workload charts, approvals, command search and responsive app navigation.
Canonical: https://gsapvault.com/ui-elements/atlas-workspace-console
Live demo: https://gsapvault.com/demos/atlas-workspace-console/index.html
| Property | Value |
|----------|-------|
| Type | ui-kit |
| Tier | paid |
| Price | £15 |
| Difficulty | advanced |
| Plugins | Flip |
| Techniques | token-theming, data-viz, count-up, flip-layout, stagger, keyboard-navigation, dialog-animation, command-palette, state-transition, micro-interaction |
| Uses Lenis | No |
## Overview
A light-first workspace console that sits between a complete SaaS template and a reusable component kit. Atlas combines a real creative-operations overview with ten extractable modules, all sharing one warm, restrained token system.
The signature project inspector uses GSAP Flip to carry a selected project from the delivery board into a persistent detail surface, then returns it without stale geometry. Charts, metrics, approvals, activity, command search and responsive navigation make the assembled demo useful as a product starting point rather than a collection of disconnected cards.
## Features
- Ten coordinated workspace components driven by one role-based token file
- Light porcelain theme by default with an optional ink theme from one root attribute
- Responsive app shell with a top workspace bar, desktop icon dock and mobile bottom tabs
- Four count-up metric cards with restrained trend treatments
- Workload curve with keyboard-operable 7d, 30d and 90d range controls
- Filterable delivery board with Flip reordering and a reusable project inspector
- Desktop side inspector that becomes a mobile bottom sheet, with focus trap and return
- Team capacity, approval queue and live activity components with complete empty and action states
- Cmd/Ctrl+K command palette with filtering, arrow-key navigation and live result counts
- Shared toast feedback, reduced-motion end states and touch-safe controls
## Use Cases
- Creative agencies coordinating projects, reviews and launch dates
- SaaS workspaces that need a complete light-mode dashboard foundation
- Client portals combining delivery status with team capacity
- Internal operations tools that should feel calm rather than technical
## Vibe-Code Ready Setup
This component kit includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## How It Works
### One calm design system
Every surface, ink colour, shadow, radius, spacing step and motion duration comes from tokens.css. Components consume role names rather than palette values, so the optional ink theme and any buyer re-skin require no component-level overrides or JavaScript branches.
### A project moves into focus
The delivery board captures state with Flip.getState(), moves the selected project's identity into the inspector, and animates both the source layout and destination with Flip.from(). Closing reverses the relationship, restores focus and clears all temporary inline state so a second open is identical to the first.
### Complete interaction contracts
The command palette and project inspector share a refcount-safe layer manager, trap focus, close from Escape and return focus to their trigger. Range controls use roving tabindex, live changes are announced, and reduced motion keeps every interaction while collapsing animation durations.
## Integration Preview
How this component kit integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add before the closing `` tag:**
```html
```
**3. Copy the component's markup** from `index.html`. Each block is self-contained and found by its class or `data-*` root: `.metrics`, `[data-workload]`, `.capacity`, `[data-projects]`, `[data-inspector-layer]`, `.approvals`, `[data-activity-list]`, `[data-command-layer]`, `[data-toasts]`.
`tokens.css` is required by everything. `shell.css` carries the app frame and the shared primitives (`.card`, `.btn`, `.icon-btn`, `.tag`, `.kbd`, `.avatar`). Flip is used by the delivery board and the inspector only; both still work without it, they just cut instead of morph.
## What You Get
- `index.html`: working demo page
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library
## Get the Code
This is a premium component kit. The standard license costs £15 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.
- [Buy Atlas Workspace Console UI Kit](https://gsapvault.com/ui-elements/atlas-workspace-console)
- [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects)
---
From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt