Detailed changes
@@ -0,0 +1,142 @@
+# This VHS tape file creates a demo video showcasing Matcha's features
+# Run with: vhs demo.tape
+
+# Output configuration
+Output demo.gif
+
+# Terminal settings
+Set FontSize 18
+Set FontFamily "SF Mono,Menlo,Monaco,Cascadia Code,Consolas,monospace"
+Set Width 1000
+Set Height 600
+Set Theme "Catppuccin Mocha"
+Set Padding 24
+Set Framerate 24
+Set PlaybackSpeed 0.7
+
+# Window chrome
+Set WindowBar Colorful
+Set WindowBarSize 40
+Set BorderRadius 10
+
+# ============================================
+# DEMO START
+# ============================================
+
+Sleep 500ms
+
+# Show the command being typed
+Type "matcha"
+Sleep 500ms
+Enter
+
+# Wait for app to load and show main menu
+Sleep 2s
+
+# ============================================
+# SECTION 1: Show Menu Navigation
+# ============================================
+
+# Highlight the menu by navigating through options
+Down
+Sleep 600ms
+Down
+Sleep 600ms
+Down
+Sleep 600ms
+
+# Navigate back up to "View Inbox"
+Up
+Sleep 400ms
+Up
+Sleep 400ms
+Up
+Sleep 600ms
+
+# ============================================
+# SECTION 2: Compose Email Demo
+# ============================================
+
+# Go to Compose Email
+Down
+Sleep 400ms
+Enter
+Sleep 1.5s
+
+# Type the recipient
+Type "friend@example.com"
+Sleep 400ms
+Tab
+Sleep 300ms
+
+# Type the subject
+Type "Hello from the terminal!"
+Sleep 400ms
+Tab
+Sleep 300ms
+
+# Type the email body with Markdown
+Type "# Greetings!"
+Enter
+Enter
+Type "I'm sending this email from **Matcha** - "
+Type "a beautiful terminal email client."
+Enter
+Enter
+Type "Features I love:"
+Enter
+Type "- Keyboard-first design"
+Enter
+Type "- Markdown support"
+Enter
+Type "- Multi-account management"
+Enter
+Enter
+Type "Try it yourself!"
+Sleep 1s
+
+# Show the completed compose form
+Sleep 1.5s
+
+# Exit without sending (for demo)
+Escape
+Sleep 800ms
+Type "y"
+Sleep 1s
+
+# ============================================
+# SECTION 3: Quick Settings Peek
+# ============================================
+
+# Navigate to Settings
+Down
+Sleep 400ms
+Down
+Sleep 400ms
+Down
+Sleep 400ms
+Enter
+Sleep 1.5s
+
+# Show settings briefly
+Sleep 1s
+
+# Go back to menu
+Escape
+Sleep 1s
+
+# ============================================
+# FINALE
+# ============================================
+
+# Show main menu one more time
+Sleep 1.5s
+
+# Exit gracefully
+Ctrl+C
+Sleep 800ms
+
+# Final message
+Type "# Email, right in your terminal."
+Enter
+Sleep 1.5s
@@ -102,7 +102,12 @@
<span class="terminal-title">matcha — zsh</span>
</div>
<div class="terminal-body">
- <div class="tui-badge">Matcha</div>
+ <pre class="tui-ascii-logo">
+ __ __
+ __ _ ___ _/ /_____/ / ___ _
+ / ' \/ _ `/ __/ __/ _ \/ _ `/
+/_/_/_/\_,_/\__/\__/_//_/\_,_/</pre
+ >
<div class="tui-prompt">What would you like to do?</div>
<div class="tui-menu">
<div class="tui-menu-item active">
@@ -115,6 +120,10 @@
<span class="tui-cursor-space"></span>
<span class="tui-option">Compose Email</span>
</div>
+ <div class="tui-menu-item">
+ <span class="tui-cursor-space"></span>
+ <span class="tui-option">Drafts</span>
+ </div>
<div class="tui-menu-item">
<span class="tui-cursor-space"></span>
<span class="tui-option">Settings</span>
@@ -197,6 +206,35 @@
with keyboard shortcuts. No mouse required.
</p>
</div>
+
+ <div class="feature-card">
+ <div class="feature-icon">👥</div>
+ <h3>Multiple Accounts</h3>
+ <p>
+ Manage multiple email accounts in one place. Switch
+ between accounts seamlessly without leaving your
+ terminal.
+ </p>
+ </div>
+
+ <div class="feature-card">
+ <div class="feature-icon">📇</div>
+ <h3>Contacts</h3>
+ <p>
+ Save and manage your contacts locally. Quickly
+ compose emails to your saved contacts with
+ auto-complete support.
+ </p>
+ </div>
+
+ <div class="feature-card">
+ <div class="feature-icon">⚡</div>
+ <h3>Email Caching</h3>
+ <p>
+ Emails are cached locally for faster access. Enjoy
+ instant load times.
+ </p>
+ </div>
</div>
</section>
@@ -379,16 +417,65 @@
<h3>Supported Providers</h3>
<div class="provider-list">
<div class="provider">
- <span class="provider-icon">📧</span>
+ <span class="provider-icon">
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path
+ d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+ ></path>
+ <polyline
+ points="22,6 12,13 2,6"
+ ></polyline>
+ </svg>
+ </span>
<span>Gmail</span>
</div>
<div class="provider">
- <span class="provider-icon">☁️</span>
+ <span class="provider-icon">
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path
+ d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"
+ ></path>
+ </svg>
+ </span>
<span>iCloud</span>
</div>
- <div class="provider coming-soon">
- <span class="provider-icon">📬</span>
- <span>More coming soon...</span>
+ <div class="provider">
+ <span class="provider-icon">
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <circle cx="12" cy="12" r="3"></circle>
+ <path
+ d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+ ></path>
+ </svg>
+ </span>
+ <span>Custom</span>
</div>
</div>
</div>
@@ -404,6 +404,15 @@ main {
margin-bottom: 1.5rem;
}
+.tui-ascii-logo {
+ color: var(--accent-primary);
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+ line-height: 1.2;
+ margin: 0 0 1.5rem 0;
+ white-space: pre;
+}
+
.tui-prompt {
color: var(--text-secondary);
font-size: 0.95rem;
@@ -424,7 +433,7 @@ main {
}
.tui-cursor {
- color: #ff79c6;
+ color: var(--accent-primary);
font-weight: 700;
}
@@ -438,7 +447,7 @@ main {
}
.tui-option.selected {
- color: #ff79c6;
+ color: var(--accent-primary);
}
.tui-hint {
@@ -757,7 +766,15 @@ kbd {
}
.provider-icon {
- font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--accent-primary);
+}
+
+.provider-icon svg {
+ width: 20px;
+ height: 20px;
}
/* Contact Section */
@@ -21,7 +21,7 @@ var (
// ASCII logo for the start screen
const choiceLogo = `
- __ __
+ __ __
____ ___ ____ _/ /______/ /_ ____ _
/ __ '__ \/ __ '/ __/ ___/ __ \/ __ '/
/ / / / / / /_/ / /_/ /__/ / / / /_/ /
@@ -10,7 +10,7 @@ import (
// ASCII logo for Matcha displayed during loading screens
const asciiLogo = `
- __ __
+ __ __
____ ___ ____ _/ /______/ /_ ____ _
/ __ '__ \/ __ '/ __/ ___/ __ \/ __ '/
/ / / / / / /_/ / /_/ /__/ / / / /_/ /