1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Matcha - Terminal Email Client</title>
7 <meta
8 name="description"
9 content="A beautiful, keyboard-driven terminal email client written in Go. Manage your inbox without ever leaving the command line."
10 />
11 <link rel="stylesheet" href="style.css" />
12 <link rel="preconnect" href="https://fonts.googleapis.com" />
13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14 <link rel="icon" type="image/png" href="assets/favicon.ico" />
15 <link
16 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
17 rel="stylesheet"
18 />
19 <link rel="me" href="https://fosstodon.org/@floatpane" />
20 </head>
21 <body>
22 <div class="noise"></div>
23 <div class="gradient-orb orb-1"></div>
24 <div class="gradient-orb orb-2"></div>
25
26 <header>
27 <nav>
28 <a href="/" class="logo">
29 <img
30 src="assets/logo-transparent.png"
31 alt="Matcha"
32 class="logo-icon"
33 width="28"
34 height="28"
35 />
36 <span class="logo-text">Matcha</span>
37 </a>
38 <div class="nav-links">
39 <a href="#features">Features</a>
40 <a href="#installation">Install</a>
41 <a href="https://docs.matcha.floatpane.com" target="_blank"
42 >Docs</a
43 >
44 <a
45 href="https://github.com/floatpane/matcha"
46 target="_blank"
47 class="nav-btn"
48 >
49 <svg
50 height="18"
51 width="18"
52 viewBox="0 0 16 16"
53 fill="currentColor"
54 >
55 <path
56 d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
57 />
58 </svg>
59 Star on GitHub
60 </a>
61 </div>
62 </nav>
63 </header>
64
65 <main>
66 <section class="hero">
67 <div class="hero-badge">
68 <span class="hero-badge-dot"></span>
69 Open Source · MIT Licensed
70 </div>
71
72 <h1 class="hero-title">
73 Email belongs in<br />
74 <span class="gradient-text">your terminal.</span>
75 </h1>
76
77 <p class="hero-subtitle">
78 Matcha is a fast, keyboard-driven email client that lives in
79 your terminal. Built with Go and designed for developers who
80 never want to leave the command line.
81 </p>
82
83 <div class="hero-actions">
84 <a href="#installation" class="btn btn-primary">
85 Get Started
86 <svg
87 width="16"
88 height="16"
89 viewBox="0 0 24 24"
90 fill="none"
91 stroke="currentColor"
92 stroke-width="2.5"
93 stroke-linecap="round"
94 stroke-linejoin="round"
95 >
96 <path d="M5 12h14" />
97 <path d="m12 5 7 7-7 7" />
98 </svg>
99 </a>
100 <a
101 href="https://github.com/floatpane/matcha"
102 target="_blank"
103 class="btn btn-ghost"
104 >
105 <svg
106 height="18"
107 width="18"
108 viewBox="0 0 16 16"
109 fill="currentColor"
110 >
111 <path
112 d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
113 />
114 </svg>
115 Star on GitHub
116 </a>
117 <a
118 href="https://docs.matcha.floatpane.com"
119 target="_blank"
120 class="btn btn-ghost"
121 >
122 <svg
123 width="18"
124 height="18"
125 viewBox="0 0 24 24"
126 fill="none"
127 stroke="currentColor"
128 stroke-width="2"
129 stroke-linecap="round"
130 stroke-linejoin="round"
131 >
132 <path
133 d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
134 />
135 <path
136 d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
137 />
138 </svg>
139 Documentation
140 </a>
141 </div>
142
143 <div class="hero-terminal">
144 <div class="terminal-chrome">
145 <div class="terminal-dots">
146 <span></span><span></span><span></span>
147 </div>
148 <span class="terminal-title">matcha</span>
149 <div class="terminal-dots" style="visibility: hidden">
150 <span></span><span></span><span></span>
151 </div>
152 </div>
153 <div class="terminal-body">
154 <div class="terminal-line">
155 <span class="t-prompt">~</span>
156 <span class="t-cmd">$</span>
157 <span class="t-text typing-anim">matcha</span>
158 <span class="cursor">|</span>
159 </div>
160 <div
161 class="terminal-content"
162 id="terminal-content"
163 ></div>
164 </div>
165 </div>
166 </section>
167
168 <section class="logos-strip">
169 <div class="strip-items">
170 <div class="strip-item">
171 <svg
172 width="18"
173 height="18"
174 viewBox="0 0 24 24"
175 fill="none"
176 stroke="currentColor"
177 stroke-width="2"
178 >
179 <path
180 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"
181 />
182 <polyline points="22,6 12,13 2,6" />
183 </svg>
184 Gmail
185 </div>
186 <div class="strip-divider"></div>
187 <div class="strip-item">
188 <svg
189 width="18"
190 height="18"
191 viewBox="0 0 24 24"
192 fill="none"
193 stroke="currentColor"
194 stroke-width="2"
195 >
196 <path
197 d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"
198 />
199 </svg>
200 iCloud
201 </div>
202 <div class="strip-divider"></div>
203 <div class="strip-item">
204 <svg
205 width="18"
206 height="18"
207 viewBox="0 0 24 24"
208 fill="none"
209 stroke="currentColor"
210 stroke-width="2"
211 >
212 <circle cx="12" cy="12" r="3" />
213 <path
214 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"
215 />
216 </svg>
217 Custom IMAP
218 </div>
219 <div class="strip-divider"></div>
220 <div class="strip-item">
221 <span class="strip-tag">Go</span>
222 Written in Go
223 </div>
224 <div class="strip-divider"></div>
225 <div class="strip-item">
226 <span class="strip-tag">MIT</span>
227 Open Source
228 </div>
229 </div>
230 </section>
231
232 <section class="features" id="features">
233 <div class="section-header">
234 <span class="section-label">Features</span>
235 <h2 class="section-title">
236 Everything you need.<br /><span class="text-muted"
237 >Nothing you don't.</span
238 >
239 </h2>
240 </div>
241
242 <div class="features-grid">
243 <div class="feature-card feature-highlight">
244 <div class="feature-icon-wrap">
245 <svg
246 width="24"
247 height="24"
248 viewBox="0 0 24 24"
249 fill="none"
250 stroke="currentColor"
251 stroke-width="2"
252 stroke-linecap="round"
253 stroke-linejoin="round"
254 >
255 <rect
256 x="2"
257 y="4"
258 width="20"
259 height="16"
260 rx="2"
261 />
262 <path
263 d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
264 />
265 </svg>
266 </div>
267 <h3>Full Inbox Management</h3>
268 <p>
269 Read, compose, reply, and manage your emails
270 entirely from the terminal. Beautiful formatting,
271 attachment support, and lightning-fast navigation.
272 </p>
273 </div>
274
275 <div class="feature-card">
276 <div class="feature-icon-wrap">
277 <svg
278 width="24"
279 height="24"
280 viewBox="0 0 24 24"
281 fill="none"
282 stroke="currentColor"
283 stroke-width="2"
284 stroke-linecap="round"
285 stroke-linejoin="round"
286 >
287 <path d="M12 20h9" />
288 <path
289 d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"
290 />
291 </svg>
292 </div>
293 <h3>Compose & Send</h3>
294 <p>
295 Intuitive compose interface with tab-based field
296 navigation. Write and send emails without touching a
297 browser.
298 </p>
299 </div>
300
301 <div class="feature-card">
302 <div class="feature-icon-wrap">
303 <svg
304 width="24"
305 height="24"
306 viewBox="0 0 24 24"
307 fill="none"
308 stroke="currentColor"
309 stroke-width="2"
310 stroke-linecap="round"
311 stroke-linejoin="round"
312 >
313 <path
314 d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
315 />
316 <circle cx="9" cy="7" r="4" />
317 <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
318 <path d="M16 3.13a4 4 0 0 1 0 7.75" />
319 </svg>
320 </div>
321 <h3>Multiple Accounts</h3>
322 <p>
323 Manage all your email accounts in one place. Switch
324 between them seamlessly.
325 </p>
326 </div>
327
328 <div class="feature-card">
329 <div class="feature-icon-wrap">
330 <svg
331 width="24"
332 height="24"
333 viewBox="0 0 24 24"
334 fill="none"
335 stroke="currentColor"
336 stroke-width="2"
337 stroke-linecap="round"
338 stroke-linejoin="round"
339 >
340 <path d="m18 16 4-4-4-4" />
341 <path d="m6 8-4 4 4 4" />
342 <path d="m14.5 4-5 16" />
343 </svg>
344 </div>
345 <h3>Keyboard-First</h3>
346 <p>
347 Vim-inspired keybindings. Navigate, select, and
348 manage everything without ever touching the mouse.
349 </p>
350 </div>
351
352 <div class="feature-card">
353 <div class="feature-icon-wrap">
354 <svg
355 width="24"
356 height="24"
357 viewBox="0 0 24 24"
358 fill="none"
359 stroke="currentColor"
360 stroke-width="2"
361 stroke-linecap="round"
362 stroke-linejoin="round"
363 >
364 <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
365 </svg>
366 </div>
367 <h3>Blazing Fast</h3>
368 <p>
369 Local email caching means instant load times. No
370 Electron, no bloat -- just pure terminal speed.
371 </p>
372 </div>
373
374 <div class="feature-card">
375 <div class="feature-icon-wrap">
376 <svg
377 width="24"
378 height="24"
379 viewBox="0 0 24 24"
380 fill="none"
381 stroke="currentColor"
382 stroke-width="2"
383 stroke-linecap="round"
384 stroke-linejoin="round"
385 >
386 <rect
387 width="18"
388 height="11"
389 x="3"
390 y="11"
391 rx="2"
392 ry="2"
393 />
394 <path d="M7 11V7a5 5 0 0 1 10 0v4" />
395 </svg>
396 </div>
397 <h3>Private & Secure</h3>
398 <p>
399 Your credentials stay on your machine. No telemetry,
400 no tracking, no cloud middleman.
401 </p>
402 </div>
403
404 <div class="feature-card">
405 <div class="feature-icon-wrap">
406 <svg
407 width="24"
408 height="24"
409 viewBox="0 0 24 24"
410 fill="none"
411 stroke="currentColor"
412 stroke-width="2"
413 stroke-linecap="round"
414 stroke-linejoin="round"
415 >
416 <path
417 d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
418 />
419 <circle cx="9" cy="7" r="4" />
420 <line x1="19" x2="19" y1="8" y2="14" />
421 <line x1="22" x2="16" y1="11" y2="11" />
422 </svg>
423 </div>
424 <h3>Contacts</h3>
425 <p>
426 Save and manage contacts locally with auto-complete
427 support when composing.
428 </p>
429 </div>
430
431 <div class="feature-card">
432 <div class="feature-icon-wrap">
433 <svg
434 width="24"
435 height="24"
436 viewBox="0 0 24 24"
437 fill="none"
438 stroke="currentColor"
439 stroke-width="2"
440 stroke-linecap="round"
441 stroke-linejoin="round"
442 >
443 <rect
444 width="18"
445 height="18"
446 x="3"
447 y="3"
448 rx="2"
449 />
450 <path d="M3 9h18" />
451 <path d="M9 21V9" />
452 </svg>
453 </div>
454 <h3>Beautiful TUI</h3>
455 <p>
456 Built with Bubble Tea. A clean, modern interface
457 that makes terminal email a pleasure.
458 </p>
459 </div>
460 </div>
461 </section>
462
463 <section class="installation" id="installation">
464 <div class="section-header">
465 <span class="section-label">Get Started</span>
466 <h2 class="section-title">
467 Up and running<br /><span class="text-muted"
468 >in seconds.</span
469 >
470 </h2>
471 </div>
472
473 <div class="install-grid">
474 <div class="install-card primary-install">
475 <div class="install-card-header">
476 <h3>Homebrew</h3>
477 <span class="recommended-badge">Recommended</span>
478 </div>
479 <div class="code-block">
480 <div class="code-header">
481 <span>Terminal</span>
482 <button
483 class="copy-btn"
484 onclick="copyCode(this)"
485 >
486 <svg
487 width="14"
488 height="14"
489 viewBox="0 0 24 24"
490 fill="none"
491 stroke="currentColor"
492 stroke-width="2"
493 stroke-linecap="round"
494 stroke-linejoin="round"
495 >
496 <rect
497 width="14"
498 height="14"
499 x="8"
500 y="8"
501 rx="2"
502 ry="2"
503 />
504 <path
505 d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
506 />
507 </svg>
508 Copy
509 </button>
510 </div>
511 <div class="code-body">
512 <div class="code-line">
513 <span class="line-prompt">$</span
514 ><span class="code-text"
515 >brew install
516 floatpane/matcha/matcha</span
517 >
518 </div>
519 <div class="code-line">
520 <span class="line-prompt">$</span
521 ><span class="code-text">matcha</span>
522 </div>
523 </div>
524 </div>
525 </div>
526
527 <div class="install-card">
528 <h3>Build from Source</h3>
529 <div class="code-block">
530 <div class="code-header">
531 <span>Terminal</span>
532 <button
533 class="copy-btn"
534 onclick="copyCode(this)"
535 >
536 <svg
537 width="14"
538 height="14"
539 viewBox="0 0 24 24"
540 fill="none"
541 stroke="currentColor"
542 stroke-width="2"
543 stroke-linecap="round"
544 stroke-linejoin="round"
545 >
546 <rect
547 width="14"
548 height="14"
549 x="8"
550 y="8"
551 rx="2"
552 ry="2"
553 />
554 <path
555 d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
556 />
557 </svg>
558 Copy
559 </button>
560 </div>
561 <div class="code-body">
562 <div class="code-line">
563 <span class="line-prompt">$</span
564 ><span class="code-text"
565 >git clone
566 https://github.com/floatpane/matcha.git</span
567 >
568 </div>
569 <div class="code-line">
570 <span class="line-prompt">$</span
571 ><span class="code-text"
572 >cd matcha && make build</span
573 >
574 </div>
575 <div class="code-line">
576 <span class="line-prompt">$</span
577 ><span class="code-text">matcha</span>
578 </div>
579 </div>
580 </div>
581 </div>
582 </div>
583
584 <p class="install-docs-hint">
585 Need help setting up? Check the
586 <a href="https://docs.matcha.floatpane.com" target="_blank"
587 >documentation</a
588 >
589 for detailed guides.
590 </p>
591 </section>
592
593 <section class="cta-section">
594 <div class="cta-card">
595 <h2>Ready to ditch the browser<br />for your email?</h2>
596 <p>
597 Join developers who manage their inbox from the
598 terminal. Star the project to show your support and stay
599 updated.
600 </p>
601 <div class="cta-actions">
602 <a
603 href="https://github.com/floatpane/matcha"
604 target="_blank"
605 class="btn btn-primary btn-lg"
606 >
607 <svg
608 height="20"
609 width="20"
610 viewBox="0 0 16 16"
611 fill="currentColor"
612 >
613 <path
614 d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
615 />
616 </svg>
617 Star on GitHub
618 </a>
619 <a
620 href="https://docs.matcha.floatpane.com"
621 target="_blank"
622 class="btn btn-ghost btn-lg"
623 >
624 Read the Docs
625 </a>
626 </div>
627 <div class="cta-links">
628 <a href="https://andrinoff.com/sponsor" target="_blank"
629 >Support the developer</a
630 >
631 </div>
632 </section>
633 </main>
634
635 <footer>
636 <div class="footer-content">
637 <div class="footer-left">
638 <div class="footer-brand">
639 <img
640 src="assets/logo-transparent.png"
641 alt="Matcha"
642 class="logo-icon"
643 width="20"
644 height="20"
645 />
646 <span>Matcha</span>
647 </div>
648 <p class="footer-copyright">
649 © 2026 floatpane. MIT Licensed.
650 </p>
651 </div>
652 <div class="footer-right">
653 <a href="https://docs.matcha.floatpane.com" target="_blank"
654 >Docs</a
655 >
656 <a
657 href="https://github.com/floatpane/matcha"
658 target="_blank"
659 >GitHub</a
660 >
661 <a
662 href="https://github.com/floatpane/matcha/blob/master/LICENSE"
663 target="_blank"
664 >License</a
665 >
666 </div>
667 </div>
668 </footer>
669
670 <script>
671 function copyCode(btn) {
672 const codeBlock = btn.closest(".code-block");
673 const codeLines = codeBlock.querySelectorAll(".code-text");
674 const text = Array.from(codeLines)
675 .map((line) => line.textContent)
676 .join("\n");
677
678 navigator.clipboard.writeText(text).then(() => {
679 const originalHTML = btn.innerHTML;
680 btn.innerHTML =
681 '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
682 btn.classList.add("copied");
683 setTimeout(() => {
684 btn.innerHTML = originalHTML;
685 btn.classList.remove("copied");
686 }, 2000);
687 });
688 }
689
690 document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
691 anchor.addEventListener("click", function (e) {
692 e.preventDefault();
693 const target = document.querySelector(
694 this.getAttribute("href"),
695 );
696 if (target) {
697 target.scrollIntoView({
698 behavior: "smooth",
699 block: "start",
700 });
701 }
702 });
703 });
704
705 // Fade in elements on scroll
706 const observer = new IntersectionObserver(
707 (entries) => {
708 entries.forEach((entry) => {
709 if (entry.isIntersecting) {
710 entry.target.classList.add("visible");
711 }
712 });
713 },
714 { threshold: 0.1 },
715 );
716
717 document
718 .querySelectorAll(".feature-card, .install-card, .cta-card")
719 .forEach((el) => {
720 observer.observe(el);
721 });
722 </script>
723 </body>
724</html>