A VS Code-inspired cloud IDE layout built with Next.js, Tailwind CSS, and the motion library. Features a dark theme with sky-blue accents, syntax-highlighted code editor, integrated terminal with text streaming, file explorer with stagger animations, and six IDE-specific sub-pages.
--ds-bg-deepest
Activity Bar
--ds-bg-dark
Explorer
--ds-bg-base
Editor
--ds-accent
Sky Blue
--ds-purple
Keywords
--ds-success
Strings
--ds-warning
Functions
--ds-orange
Numbers
--ds-error
Errors
--ds-teal
Types
Full code editor with syntax highlighting for TypeScript, JSON, and CSS. Includes line numbers, minimap, breadcrumb navigation, and file tabs with close buttons.
Signature CSS animation with a steady 1-second blink cycle. The cursor position updates dynamically, and the active line is highlighted with a subtle glow.
Characters appear sequentially in the integrated terminal, simulating a real build process. The streaming animation runs at 18ms per character with natural line breaks.
Tabs slide in and out using spring physics (stiffness: 300, damping: 25) with motion layout animations. Closing a tab smoothly collapses the space.
File tree items animate in with a staggered delay (20ms per item). Folders expand and collapse with spring-animated height transitions and chevron rotation.
The active route indicator slides between icons using a shared layoutId with spring physics. Icons scale on hover (1.15x) and tap (0.95x) for tactile feedback.
Full git panel with staged/unstaged changes, M/A/D status indicators, commit message input, branch info, and color-coded inline diff viewer.
Search panel with query input, replace field, and include/exclude filters. Results show file paths, line numbers, and matching text with yellow highlight.
Installed and available extensions with icons, ratings, install counts, and detailed views. Includes Prettier, ESLint, Tailwind IntelliSense, and GitLens.
Three terminal sessions (dev server, git, tests) with different output content. Tab switching, session management, and task runner panel.
Cursor Blink
CSS @keyframes, 1s step-end
Terminal Stream
useEffect, 18ms/char
Tab Slide
motion layout, spring(300,25)