InboxPro
Layout 06 — Sidebar + Split View Email
A production-grade email client layout featuring a three-column split view architecture. Designed with ultra-clean minimal aesthetics, blue accent colors, and motion animations that bring the interface to life. Built with Geist Sans typography and inspired by Apple Mail and Superhuman.
Design Philosophy
Every pixel is intentional. The layout uses pure white backgrounds with ultra-light hairline borders (#f0f0f2) to create visual separation without heaviness. The blue-500 accent (#3b82f6) is used sparingly for active states, unread indicators, and primary actions. Text hierarchy follows a four-level opacity system from primary (#111827) through quaternary (#d1d5db) to establish clear visual importance.
Features & Animations
Three-Column Split View
Folder sidebar, mail list, and detail preview panel arranged in a classic email client layout for maximum productivity.
Stagger Animations
Email list items slide in with staggered timing when switching folders, creating a smooth cascading reveal effect.
Preview Panel Transition
Selecting an email triggers a smooth slide-in from the right with AnimatePresence, providing fluid content switching.
Unread Badge Pulse
Inbox unread count badge features a subtle ping animation to draw attention to new messages without being intrusive.
Active Folder Indicator
Spring-animated indicator bar slides between folder items with layoutId for a connected, physical feel.
Ultra-Clean Design
Pure white background, hairline borders, and blue-500 accent. Minimal density inspired by Apple Mail and Superhuman.
Folder-Specific Views
Each folder (Inbox, Drafts, Sent, Starred, Spam) has purpose-built content with appropriate styling and actions.
Realistic Email Content
10+ inline mock emails with realistic sender names, subjects, and full body content for an authentic demo experience.