Created
June 18, 2026 20:59
-
-
Save iethree/71607333477c35abc3f3ae86dafef5d7 to your computer and use it in GitHub Desktop.
metadogs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>A New Era of Metabase</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root{ | |
| --bg:#05060a; | |
| --bg2:#0a0d18; | |
| --mb-blue:#509EE3; | |
| --mb-blue-d:#2d7dc7; | |
| --violet:#8b5cf6; | |
| --pink:#ec4899; | |
| --mustard:#f5c518; | |
| --ketchup:#e23b2e; | |
| --text:#e8ecf5; | |
| --muted:#9aa3b8; | |
| --card:rgba(255,255,255,0.03); | |
| --border:rgba(255,255,255,0.08); | |
| } | |
| *{margin:0;padding:0;box-sizing:border-box} | |
| html{scroll-behavior:smooth} | |
| body{ | |
| background:var(--bg); | |
| color:var(--text); | |
| font-family:'Inter',system-ui,sans-serif; | |
| line-height:1.6; | |
| overflow-x:hidden; | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| /* ===== animated gradient mesh background ===== */ | |
| .mesh{position:fixed;inset:0;z-index:-2;overflow:hidden} | |
| .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.5;mix-blend-mode:screen} | |
| .blob.a{width:60vw;height:60vw;left:-10vw;top:-15vh;background:radial-gradient(circle,var(--mb-blue),transparent 70%);animation:drift1 22s ease-in-out infinite} | |
| .blob.b{width:55vw;height:55vw;right:-15vw;top:10vh;background:radial-gradient(circle,var(--violet),transparent 70%);animation:drift2 28s ease-in-out infinite} | |
| .blob.c{width:50vw;height:50vw;left:20vw;bottom:-20vh;background:radial-gradient(circle,var(--pink),transparent 70%);animation:drift3 25s ease-in-out infinite} | |
| @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,10vh) scale(1.15)}} | |
| @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10vw,8vh) scale(0.9)}} | |
| @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-12vh) scale(1.1)}} | |
| .grain{position:fixed;inset:0;z-index:-1;opacity:0.035;pointer-events:none; | |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} | |
| /* ===== nav ===== */ | |
| nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between; | |
| padding:16px 28px;backdrop-filter:blur(14px);background:rgba(5,6,10,0.55);border-bottom:1px solid var(--border)} | |
| .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-0.02em} | |
| .brand .dot{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--mb-blue),var(--violet));display:grid;place-items:center;font-size:15px} | |
| .navlinks{display:flex;gap:26px;font-size:14px;color:var(--muted)} | |
| .navlinks a{color:inherit;text-decoration:none;transition:color .2s} | |
| .navlinks a:hover{color:var(--text)} | |
| @media(max-width:760px){.navlinks{display:none}} | |
| .pill-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px; | |
| background:linear-gradient(90deg,rgba(80,158,227,.2),rgba(139,92,246,.2));border:1px solid var(--border);color:var(--mb-blue)} | |
| /* ===== layout ===== */ | |
| .wrap{max-width:880px;margin:0 auto;padding:0 24px} | |
| section{position:relative} | |
| /* ===== hero ===== */ | |
| .hero{text-align:center;padding:90px 24px 60px} | |
| .ann{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted); | |
| padding:6px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);margin-bottom:30px} | |
| .ann .live{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse 1.6s infinite} | |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} | |
| h1{font-size:clamp(38px,7vw,76px);font-weight:900;line-height:1.02;letter-spacing:-0.04em;margin-bottom:24px} | |
| .grad{background:linear-gradient(100deg,var(--mb-blue),var(--violet) 40%,var(--pink) 75%,var(--mustard)); | |
| -webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 6s linear infinite} | |
| @keyframes shine{to{background-position:200% center}} | |
| .sub{font-size:clamp(17px,2.4vw,21px);color:var(--muted);max-width:620px;margin:0 auto 36px} | |
| /* glowing prompt box (performative-ui staple) */ | |
| .prompt{max-width:600px;margin:0 auto 22px;position:relative} | |
| .prompt-glow{position:absolute;inset:-2px;border-radius:18px;background:linear-gradient(90deg,var(--mb-blue),var(--violet),var(--pink),var(--mb-blue)); | |
| background-size:300% 100%;filter:blur(10px);opacity:.7;animation:shine 4s linear infinite;z-index:0} | |
| .prompt-inner{position:relative;z-index:1;display:flex;align-items:center;gap:12px;background:#0b0e1a; | |
| border:1px solid var(--border);border-radius:16px;padding:14px 16px;text-align:left} | |
| .prompt-inner .ico{font-size:20px} | |
| .prompt-inner input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;font-family:inherit} | |
| .prompt-inner input::placeholder{color:#5b6478} | |
| .send{background:linear-gradient(135deg,var(--mb-blue),var(--violet));border:none;color:#fff;font-weight:600; | |
| padding:9px 16px;border-radius:10px;cursor:pointer;font-size:14px} | |
| .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px} | |
| .btn{position:relative;padding:13px 28px;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;border:none;cursor:pointer;display:inline-block} | |
| .btn-primary{background:linear-gradient(135deg,var(--mb-blue),var(--violet));color:#fff;box-shadow:0 0 30px rgba(80,158,227,.45)} | |
| .btn-primary:hover{box-shadow:0 0 44px rgba(139,92,246,.6)} | |
| .btn-ghost{background:var(--card);border:1px solid var(--border);color:var(--text)} | |
| /* trusted-by marquee */ | |
| .trust{padding:40px 0 10px;text-align:center} | |
| .trust p{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#5b6478;margin-bottom:22px} | |
| .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} | |
| .track{display:flex;gap:54px;width:max-content;animation:scroll 26s linear infinite;align-items:center} | |
| .track img{height:26px;opacity:.6;filter:grayscale(1) brightness(2.4)} | |
| @keyframes scroll{to{transform:translateX(-50%)}} | |
| /* article body */ | |
| .article{padding:70px 0} | |
| .article h2{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-0.03em;margin:54px 0 18px} | |
| .article h2 .em{color:var(--mustard)} | |
| .article p{font-size:17px;color:#c4cbdb;margin-bottom:20px} | |
| .article p.lead{font-size:20px;color:var(--text)} | |
| .kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mb-blue);margin-bottom:8px} | |
| .figure{margin:34px 0;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--card);padding:30px;text-align:center} | |
| .figure .cap{font-size:13px;color:var(--muted);margin-top:16px;font-style:italic} | |
| /* the "scanner" -> the cart, diagram */ | |
| .cart-stage{display:flex;flex-direction:column;align-items:center;gap:6px} | |
| .cart-emoji{font-size:64px;filter:drop-shadow(0 0 24px rgba(245,197,24,.5))} | |
| .sensor-ring{display:flex;gap:8px;margin-top:10px} | |
| .sensor-ring span{width:9px;height:9px;border-radius:50%;background:var(--mb-blue);animation:blip 1.4s infinite} | |
| .sensor-ring span:nth-child(2){animation-delay:.2s;background:var(--violet)} | |
| .sensor-ring span:nth-child(3){animation-delay:.4s;background:var(--pink)} | |
| .sensor-ring span:nth-child(4){animation-delay:.6s;background:var(--mustard)} | |
| .sensor-ring span:nth-child(5){animation-delay:.8s;background:var(--ketchup)} | |
| @keyframes blip{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.6);opacity:1}} | |
| /* stat strip */ | |
| .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0} | |
| @media(max-width:640px){.stats{grid-template-columns:1fr}} | |
| .stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;text-align:center} | |
| .stat .n{font-size:34px;font-weight:800;background:linear-gradient(135deg,var(--mb-blue),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent} | |
| .stat .l{font-size:13px;color:var(--muted);margin-top:4px} | |
| /* mono terminal block */ | |
| .terminal{background:#070a12;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:30px 0;font-family:'JetBrains Mono',monospace;font-size:13.5px} | |
| .terminal .bar{display:flex;gap:7px;padding:11px 14px;border-bottom:1px solid var(--border)} | |
| .terminal .bar i{width:11px;height:11px;border-radius:50%;display:inline-block} | |
| .terminal .bar i:nth-child(1){background:#ff5f57}.terminal .bar i:nth-child(2){background:#febc2e}.terminal .bar i:nth-child(3){background:#28c840} | |
| .terminal pre{padding:18px;overflow-x:auto;color:#a8e6cf;line-height:1.7} | |
| .terminal .c{color:#5b6478} | |
| .terminal .k{color:var(--mb-blue)} | |
| .terminal .y{color:var(--mustard)} | |
| /* timeline */ | |
| .timeline{border-left:2px solid var(--border);margin:30px 0 30px 8px;padding-left:28px} | |
| .tl-item{position:relative;margin-bottom:30px} | |
| .tl-item::before{content:'';position:absolute;left:-37px;top:4px;width:14px;height:14px;border-radius:50%; | |
| background:linear-gradient(135deg,var(--mb-blue),var(--violet));box-shadow:0 0 12px rgba(80,158,227,.6)} | |
| .tl-item .yr{font-weight:700;color:var(--mustard);font-size:15px} | |
| .tl-item p{margin:4px 0 0;font-size:15.5px} | |
| /* pricing — middle tier highlighted (performative-ui staple) */ | |
| .pricing{padding:70px 0} | |
| .pricing h2{text-align:center} | |
| .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} | |
| @media(max-width:760px){.tiers{grid-template-columns:1fr}} | |
| .tier{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px 26px;position:relative} | |
| .tier.feat{border-color:transparent;background:linear-gradient(#0b0e1a,#0b0e1a) padding-box,linear-gradient(135deg,var(--mb-blue),var(--violet),var(--pink)) border-box;border:2px solid transparent;transform:scale(1.05);box-shadow:0 0 50px rgba(80,158,227,.3);z-index:1} | |
| .tier .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700; | |
| padding:5px 14px;border-radius:999px;background:linear-gradient(90deg,var(--mb-blue),var(--violet));color:#fff;white-space:nowrap} | |
| .tier h3{font-size:18px;font-weight:700} | |
| .tier .price{font-size:40px;font-weight:900;margin:10px 0 4px} | |
| .tier .price span{font-size:15px;font-weight:500;color:var(--muted)} | |
| .tier .desc{font-size:14px;color:var(--muted);margin-bottom:20px;min-height:40px} | |
| .tier ul{list-style:none;font-size:14px;display:flex;flex-direction:column;gap:11px;margin-bottom:24px} | |
| .tier li{display:flex;gap:9px;color:#c4cbdb} | |
| .tier li::before{content:'✓';color:var(--mb-blue);font-weight:700} | |
| .tier .tbtn{display:block;text-align:center;padding:12px;border-radius:11px;font-weight:600;text-decoration:none;font-size:14px} | |
| .tier .tbtn.fill{background:linear-gradient(135deg,var(--mb-blue),var(--violet));color:#fff} | |
| .tier .tbtn.out{background:transparent;border:1px solid var(--border);color:var(--text)} | |
| /* community / footer cta */ | |
| .final{text-align:center;padding:80px 24px 40px} | |
| .final h2{font-size:clamp(28px,5vw,46px);font-weight:900;letter-spacing:-0.03em;margin-bottom:16px} | |
| .we{display:inline-block;background:linear-gradient(100deg,var(--mb-blue),var(--mustard));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900} | |
| .links{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:620px;margin:40px auto 0;text-align:left} | |
| @media(max-width:560px){.links{grid-template-columns:1fr}} | |
| .lcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s} | |
| .lcard:hover{border-color:var(--mb-blue);transform:translateY(-2px)} | |
| .lcard b{display:block;font-size:15px;margin-bottom:3px} | |
| .lcard span{font-size:13px;color:var(--muted)} | |
| footer{border-top:1px solid var(--border);padding:30px 24px;text-align:center;color:#5b6478;font-size:13px} | |
| .disc{max-width:680px;margin:24px auto 0;font-size:12px;color:#444b5e;line-height:1.5} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mesh"><div class="blob a"></div><div class="blob b"></div><div class="blob c"></div></div> | |
| <div class="grain"></div> | |
| <nav> | |
| <div class="brand"><span class="dot">🌭</span> Metabase</div> | |
| <div class="navlinks"> | |
| <a href="#story">The Vision</a> | |
| <a href="#machine">The Cart</a> | |
| <a href="#roadmap">Roadmap</a> | |
| <a href="#pricing">Pricing</a> | |
| </div> | |
| <span class="pill-badge">⚡ Now in Frankfurt-Native preview</span> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="ann"><span class="live"></span> Announcement · Q3 2026</div> | |
| <h1>A New Era of <span class="grad">Metabase</span></h1> | |
| <p class="sub">For 10 years we asked your data questions. Today we're asking a bigger one: <em>what if the answer was a hot dog?</em></p> | |
| <div class="prompt"> | |
| <div class="prompt-glow"></div> | |
| <div class="prompt-inner"> | |
| <span class="ico">🌭</span> | |
| <input placeholder="Ask anything… “SELECT relish FROM cravings WHERE hunger > 9000”" /> | |
| <button class="send">Order ↵</button> | |
| </div> | |
| </div> | |
| <div class="cta-row"> | |
| <a href="#" class="btn btn-primary">Join the Stand waitlist</a> | |
| <a href="#story" class="btn btn-ghost">Read the manifesto</a> | |
| </div> | |
| </section> | |
| <!-- TRUST --> | |
| <section class="trust wrap"> | |
| <p>The data teams already in line</p> | |
| <div class="marquee"> | |
| <div class="track"> | |
| <img src="https://www.metabase.com/images/logos/Huggingface.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/mcdonalds.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/capital-one.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/mistral.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/linear.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/deutsche-telekom.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/kong.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/huma.svg" alt=""> | |
| <!-- duplicate for seamless loop --> | |
| <img src="https://www.metabase.com/images/logos/Huggingface.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/mcdonalds.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/capital-one.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/mistral.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/linear.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/deutsche-telekom.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/kong.svg" alt=""> | |
| <img src="https://www.metabase.com/images/logos/huma.svg" alt=""> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ARTICLE --> | |
| <article class="article wrap" id="story"> | |
| <p class="lead">Today we're going to announce something a little weird and a little crazy, but also spectacular and filled with condiments.</p> | |
| <p>It's not related to anything you've seen from us so far. However, we feel an obligation as people standing on the frontier of business intelligence to look at the foundations of the human experience and ask: "What is the most disruptive thing two open-source maintainers can do with a charcoal grill?"</p> | |
| <p>We must ask these questions. We must find new answers. And we must tell stories of deeply human, deeply <em>encased-meat</em> futures that we can all want to be a part of.</p> | |
| <p>That's why we are announcing:</p> | |
| <h2><span class="em">Metabase</span> Hot Dog Stands™</h2> | |
| <p>We're building a bold new kind of machine to reimagine the foundations of casual dining and our relationship to lunch. We've dreamed of something as insightful as a dashboard, and as satisfying as a snack — and we're unveiling a path to that, today.</p> | |
| <p>One of the overarching themes of the 21st century will be the expanding reach of analytics and what we choose to do with it. We talk to dashboards every day. Increasingly, we are hungry while doing so. For too long, these two facts have lived in separate tabs.</p> | |
| <div class="stats"> | |
| <div class="stat"><div class="n">90,000+</div><div class="l">companies, all of whom get hungry</div></div> | |
| <div class="stat"><div class="n"><60s</div><div class="l">query-to-frankfurter latency</div></div> | |
| <div class="stat"><div class="n">47.8k ⭐</div><div class="l">GitHub stars, now also a topping</div></div> | |
| </div> | |
| <h2 id="machine">The Metabase <span class="em">Cart</span></h2> | |
| <p>It starts by stepping up to a stainless-steel cart bathed in golden bun-light. You then begin to descend into the menu. Your craving passes through a ring of underwater sensors — sorry, <em>umbrella-mounted</em> sensors — each acting like a friendly vendor, using its open-source query engine.</p> | |
| <div class="figure"> | |
| <div class="cart-stage"> | |
| <div class="cart-emoji">🌭</div> | |
| <div class="sensor-ring"><span></span><span></span><span></span><span></span><span></span></div> | |
| </div> | |
| <div class="cap">The Cart reconstructs your appetite slice by slice, crossfading between raw hunger and its AI-segmented topping plan.</div> | |
| </div> | |
| <p>The sensors send semantic-layer signals through your order from every angle. With enough signals, and enough angles, we form an image of exactly what's happening inside your lunch. The goal is for this process to take no more than 60 seconds. You walk up to the cart, you walk away from the cart, and you're full.</p> | |
| <h2>Querying, but make it <span class="em">edible</span></h2> | |
| <p>The major computational task is figuring out how to turn natural language into mustard. Basically — as a craving travels through your sentence, it changes shape. The shape changes whenever there's a change in hunger or stiffness (i.e. going from "kinda peckish" to "ravenous" to "I will riot"). By looking at how all these phrases change, we reconstruct a detailed map, or 'order', of what's in there.</p> | |
| <div class="terminal"> | |
| <div class="bar"><i></i><i></i><i></i></div> | |
| <pre><span class="c"># spin up your free self-hosted stand. ships with condiments.</span> | |
| $ <span class="k">docker</span> run -d -p 3000:3000 -p 1857:grill <span class="y">metabase/hotdog</span> | |
| <span class="c">→ pulling layer: bun (open source)............ done</span> | |
| <span class="c">→ pulling layer: semantic-relish-layer........ done</span> | |
| <span class="c">→ warming grill to 451°F....................... done</span> | |
| <span class="k">✓</span> Stand running at http://localhost:3000 🌭 | |
| <span class="k">✓</span> Metabot is now also a fry cook.</pre> | |
| </div> | |
| <h2>Finding its <span class="em">Form</span></h2> | |
| <p>We think this kind of analytics-grade snacking could become not just commonplace, but a casual, everyday, literally "whenever you want" kind of thing. It's just a bun, a sausage, and 60 seconds of natural-language querying.</p> | |
| <p>So the next question is: how do we integrate something like this into our daily lives? We want to use the warm, gentle nature of the steam tray to build an experience that isn't even necessarily about data — it's just a nice place to go. Someplace you'd want to be even if there were no dashboards.</p> | |
| <div class="figure"> | |
| <div style="display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:46px">🌭 ☂️ 🧅 🍅 🥨</div> | |
| <div class="cap">Concept renders of the Metabase Stand. Open-source by default. Self-hostable in your own driveway.</div> | |
| </div> | |
| <p>The dashboards are a side-effect. You barely think of them while you're eating. But suddenly, you have a huge library of data about your lunch — and a hot dog.</p> | |
| <h2 id="roadmap">The Roadmap From <span class="em">Here</span></h2> | |
| <div class="timeline"> | |
| <div class="tl-item"><div class="yr">Q3 2026</div><p>Refine our grills and relish algorithms on a daily basis. Begin field trials of the first "research stand" in the heart of San Francisco.</p></div> | |
| <div class="tl-item"><div class="yr">2027</div><p>Open the first permanent Stand. Submit regular nutritional test results to the FDA for increased topping capabilities.</p></div> | |
| <div class="tl-item"><div class="yr">2028</div><p>Gen-3 cart: completely custom silicon-and-steel design. Bun quality and order times will be night-and-day.</p></div> | |
| <div class="tl-item"><div class="yr">2031</div><p>A fleet of 50,000 carts worldwide, with a total capacity of one billion hot dogs a month — enough to give a regular monthly frankfurter to a billion people.</p></div> | |
| </div> | |
| <p>This is moving at the maximum speed that's physically possible on a single propane tank. Beyond that, regulation is the next limit. Normally, for every encased-meat capability you need health-department approval. We're starting by just giving you a detailed <em>topping composition map</em> — and we'll be submitting regular test results from there.</p> | |
| </article> | |
| <!-- PRICING --> | |
| <section class="pricing wrap" id="pricing"> | |
| <h2>Plans for every <span style="color:var(--mustard)">appetite</span></h2> | |
| <div class="tiers"> | |
| <div class="tier"> | |
| <h3>Open Source</h3> | |
| <div class="price">$0<span>/forever</span></div> | |
| <div class="desc">Self-host your own cart. Bring your own bun.</div> | |
| <ul> | |
| <li>1 grill, unlimited buns</li> | |
| <li>Community condiments</li> | |
| <li>Run <code>docker run</code> in your driveway</li> | |
| </ul> | |
| <a href="#" class="tbtn out">Deploy a cart</a> | |
| </div> | |
| <div class="tier feat"> | |
| <span class="badge">★ Most popular</span> | |
| <h3>Pro Vendor</h3> | |
| <div class="price">$57<span>/mo</span></div> | |
| <div class="desc">For teams who query hungry and deploy fast.</div> | |
| <ul> | |
| <li>Everything in Open Source</li> | |
| <li>Metabot AI fry-cook included</li> | |
| <li>Multi-tenant relish segregation</li> | |
| <li>SSO & SOC2-grade sauerkraut</li> | |
| <li>Premium artisanal mustard layer</li> | |
| </ul> | |
| <a href="#" class="tbtn fill">Start grilling free</a> | |
| </div> | |
| <div class="tier"> | |
| <h3>Enterprise</h3> | |
| <div class="price">Let's talk</div> | |
| <div class="desc">From pre-seed to post-IPO to post-lunch.</div> | |
| <ul> | |
| <li>Dedicated regional cart fleet</li> | |
| <li>White-label buns</li> | |
| <li>Custom embedded condiment SDK</li> | |
| </ul> | |
| <a href="#" class="tbtn out">Contact sales</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FINAL --> | |
| <section class="final wrap"> | |
| <div class="kicker" style="margin-bottom:14px">A New Kind of Research Lab</div> | |
| <h2>We are all <span class="we">Metabase</span>.</h2> | |
| <p style="color:var(--muted);max-width:560px;margin:0 auto">As a reminder, Metabase has no investors in this hot dog stand — yet. We're a distinct and curious new thing: a community-backed, open-source, charcoal-fired research lab. We just want you to be involved.</p> | |
| <div class="links"> | |
| <a class="lcard" href="#"><b>Join the waitlist →</b><span>Get updates and a spot in line at the first Stand.</span></a> | |
| <a class="lcard" href="#"><b>Join our Discord →</b><span>A chat server for all things Bun and Business Intelligence.</span></a> | |
| <a class="lcard" href="#"><b>We're hiring fry cooks →</b><span>Engineers who also flip. Equity in relish.</span></a> | |
| <a class="lcard" href="#"><b>The Topping Gallery →</b><span>A first look at the data behind the dog.</span></a> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="brand" style="justify-content:center;margin-bottom:10px"><span class="dot">🌭</span> Metabase</div> | |
| © Metabase 2026 · Open source analytics that answers back — now with a side of fries | |
| <p class="disc">This is a satirical / parody concept page, not a real announcement and not affiliated with or endorsed by Metabase. Logos and brand marks belong to their respective owners and are used here only for illustrative parody. Inspired by the format of the Midjourney Medical announcement and the visual tropes catalogued by performative-ui. No actual hot dogs were harmed, queried, or shipped.</p> | |
| </footer> | |
| <script> | |
| // tiny easter egg on the prompt | |
| const send=document.querySelector('.send'), inp=document.querySelector('.prompt-inner input'); | |
| function fire(){ send.textContent='Grilling…'; setTimeout(()=>{send.textContent='🌭 Served!'; setTimeout(()=>send.textContent='Order ↵',1600);},900); } | |
| send.addEventListener('click',fire); | |
| inp.addEventListener('keydown',e=>{if(e.key==='Enter')fire();}); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment