CodeVault

Spring-animated sidebar expands from 56px to 240px with motion physics. Repo selector with language color dots. Section labels and terminal status fade with AnimatePresence.

Expandable file tree with folder expand/collapse animations. Each node staggers in with a 30ms delay. Language color dots indicate file type.

Signature animation: character-by-character terminal output reveal triggered by IntersectionObserver. Simulates a production deployment with blinking cursor.

Area chart via recharts showing 12-week commit activity. Uses codevault-prefixed gradient IDs. Custom tooltip with JetBrains Mono typography.

Built with the motion library (successor to framer-motion). Spring physics on sidebar width, staggered card entrances, AnimatePresence for show/hide transitions, pulsing status indicators.

GitHub-inspired dark palette: #0d1117 background, #21262d borders, orange-500 accent. 13 CSS custom properties scoped to the layout. JetBrains Mono for code, Geist Sans for UI.

All sub-pages have domain-specific content: Issues with labels and filters, Pull Requests with branch info and CI status, Actions with expandable pipeline steps, Settings with branch protection rules.

Hover states on all list items, expandable pipeline steps in Actions, toggle switches in Settings, repo selector dropdown with staggered animation, label filtering on Issues.

Terminal Code Reveal

Character-by-character text reveal with blinking cursor. Triggered on scroll via IntersectionObserver.

File Tree Stagger

Folder expand/collapse with staggered children (30ms delay). Chevron rotates smoothly on toggle.

Sidebar Spring

Width transition uses spring physics (stiffness: 300, damping: 30). Labels animate with AnimatePresence.