phast/app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Phast landing fast and MCP-native

Browse Source
This commit is contained in:
matcha committed 2026-10-04 06:05:45 +00:00
1 parent 830ab44d8f
commit b8cd74d3d4
1 file changed
+29 -56
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+29 -56
View File
@@ -1,73 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#f5f3ee" />
<meta name="description" content="Phast — connect your agent, compose what you need, launch when it's worth keeping." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#050505">
<meta name="description" content="Phast — make MCP apps phast.">
<title>phast</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=DM+Mono:wght@400;500&family=Inter:wght@500;700;900&display=swap" rel="stylesheet">
<style>
:root{--paper:#f5f3ee;--ink:#121211;--muted:#77746c;--line:rgba(18,18,17,.15);--signal:#ff4d00;--pad:clamp(22px,3vw,48px)}
*{box-sizing:border-box}html,body{min-height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit}a{color:inherit;text-decoration:none}
.shell{min-height:100svh;padding:var(--pad);display:grid;grid-template-rows:auto 1fr auto;gap:28px;overflow:hidden}
.masthead,.footer{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{position:relative;display:inline-flex;align-items:baseline;font-size:clamp(27px,2.2vw,38px);font-weight:700;letter-spacing:-.075em;line-height:1}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
.brand:hover::after{transform:scaleX(1);transform-origin:left}.brand-dot{color:var(--signal)}
.tiny-link{border:0;padding:0;margin:0;background:transparent;color:inherit;cursor:pointer;display:grid;justify-items:end;gap:2px}
.tiny-label{color:var(--muted);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.tiny-value{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;border-bottom:1px solid var(--line);transition:border-color 160ms ease}
.tiny-link:hover .tiny-value{border-color:var(--ink)}
.hero{align-self:center;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(44px,8vw,130px)}
.hero-copy{min-width:0}.eyebrow{margin:0 0 clamp(18px,2vw,28px);font-family:"DM Mono",ui-monospace,monospace;font-size:clamp(10px,.8vw,12px);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;max-width:8.5ch;font-size:clamp(62px,10.5vw,176px);font-weight:500;line-height:.82;letter-spacing:-.087em}
.speed-word{position:relative;display:inline-block;cursor:default}
.speed-word::after{content:"";position:absolute;height:.075em;left:.08em;right:-.16em;bottom:-.085em;background:var(--signal);transform:scaleX(.16);transform-origin:left;transition:transform 280ms cubic-bezier(.2,.85,.2,1)}
.speed-word:hover::after{transform:scaleX(1)}
.action-stack{width:min(100%,360px);padding-bottom:.45vw}
.primary-action{min-height:74px;padding:0 22px 0 24px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:26px;border:1px solid var(--ink);font-size:16px;font-weight:600;letter-spacing:-.02em;transition:transform 160ms ease,background 160ms ease,color 160ms ease}
.primary-action:hover{background:var(--signal);border-color:var(--signal);transform:translateY(-3px)}.primary-action:active{transform:translateY(0)}
.arrow{font-size:24px;line-height:1;transition:transform 160ms ease}.primary-action:hover .arrow{transform:translate(3px,-3px)}
.microcopy{margin:14px 0 0;max-width:32ch;color:var(--muted);font-size:12px;line-height:1.5}
.footer{font-family:"DM Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.status{display:inline-flex;align-items:center;gap:8px}.status i{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgba(255,77,0,.35);animation:pulse 2.4s ease-out infinite}.manifesto{color:var(--ink)}
.toast{position:fixed;top:var(--pad);left:50%;transform:translate(-50%,-12px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:9px 12px;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;transition:opacity 140ms ease,transform 140ms ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,0,.34)}55%,100%{box-shadow:0 0 0 9px rgba(255,77,0,0)}}
@media(max-width:800px){.shell{min-height:100dvh}.hero{grid-template-columns:1fr;align-items:start;gap:clamp(48px,10vh,88px)}h1{font-size:clamp(64px,18vw,112px);line-height:.84}.action-stack{width:100%}.primary-action{width:100%}.microcopy{max-width:38ch}}
@media(max-width:520px){.tiny-label{display:none}.tiny-value{font-size:10px}.footer{align-items:flex-end}.manifesto{text-align:right}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
:root{--bg:#050505;--panel:#0d0d0d;--ink:#f5f2e9;--muted:#8a8a84;--orange:#ff5a00;--line:#272727;--pad:clamp(22px,4vw,56px)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}a,button{color:inherit;font:inherit}a{text-decoration:none}.shell{min-height:100svh;padding:var(--pad);display:grid;grid-template-rows:auto 1fr auto;position:relative;isolation:isolate}.shell:before{content:"";position:absolute;inset:0;z-index:-2;background:repeating-linear-gradient(115deg,transparent 0 92px,rgba(255,90,0,.05) 92px 94px,transparent 94px 180px)}.shell:after{content:"";position:absolute;width:58vw;height:12px;background:var(--orange);right:-14vw;top:23%;transform:skewX(-28deg) rotate(-8deg);box-shadow:0 24px 0 rgba(255,90,0,.42),0 48px 0 rgba(255,90,0,.18);z-index:-1}
.top,.foot{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Bangers,sans-serif;font-size:32px;letter-spacing:.05em;color:var(--orange)}.connector{font:11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:none;border:0;border-bottom:1px solid #333;padding:0 0 5px;cursor:pointer}.connector:hover{color:var(--orange);border-color:var(--orange)}
.hero{align-self:center;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.55fr);gap:clamp(34px,7vw,110px);align-items:end;padding:7vh 0}.kicker,.meta,.foot{font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.12em}.kicker{color:var(--orange);margin:0 0 16px}.hero h1{font-family:Bangers,sans-serif;font-size:clamp(82px,15vw,220px);font-weight:400;line-height:.72;letter-spacing:.01em;margin:0;color:var(--orange);text-shadow:6px 6px 0 #1b1b1b;transform:skewY(-2deg)}.hero h1 span{display:block;color:var(--ink);font-size:.48em;line-height:.85;margin-top:.12em}.copy{border-top:1px solid var(--line);padding-top:18px}.copy p{font-size:clamp(16px,1.4vw,21px);line-height:1.45;margin:0 0 24px;max-width:33ch}.copy strong{color:var(--orange)}.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--orange);color:#080808;padding:18px 20px;border:0;font-weight:900;text-transform:uppercase;letter-spacing:.03em;transform:skewX(-7deg);transition:.15s}.cta>*{transform:skewX(7deg)}.cta:hover{transform:skewX(-7deg) translate(5px,-3px);box-shadow:-8px 8px 0 #fff}.sequence{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}.step{background:var(--panel);padding:15px}.step b{display:block;font-family:Bangers,sans-serif;color:var(--orange);font-size:25px;letter-spacing:.04em}.step span{font:10px "DM Mono",monospace;color:var(--muted);text-transform:uppercase}.foot{color:#666}.foot b{color:var(--orange);font-weight:500}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,10px);opacity:0;background:var(--orange);color:#000;padding:9px 12px;font:10px "DM Mono",monospace;text-transform:uppercase;transition:.15s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:820px){.hero{grid-template-columns:1fr;align-items:start}.hero h1{font-size:clamp(88px,24vw,150px)}.copy{max-width:560px}.sequence{grid-template-columns:1fr 1fr}.shell:after{top:18%;width:90vw}}@media(max-width:480px){.sequence{grid-template-columns:1fr}.connector{font-size:9px}}
</style>
</head>
<body>
<main class="shell" aria-labelledby="phast-title">
<header class="masthead" aria-label="Phast">
<a class="brand" href="/" aria-label="Phast home">phast<span class="brand-dot">.</span></a>
<button class="tiny-link" type="button" id="copyConnector" aria-label="Copy your Phast connector address">
<span class="tiny-label">your connector</span>
<span class="tiny-value">my.phast.app/mcp</span>
</button>
</header>
<main class="shell">
<header class="top"><a class="brand" href="/">PHAST.</a><button class="connector" id="copy">my.phast.app/mcp ↗</button></header>
<section class="hero">
<div class="hero-copy">
<p class="eyebrow" aria-hidden="true">connect → compose → launch</p>
<h1 id="phast-title">make something.<br><span class="speed-word">phast.</span></h1>
<div>
<p class="kicker">MCP APPS // ZERO TO USEFUL</p>
<h1>PHAST.<span>MAKE SOMETHING.</span></h1>
<div class="sequence">
<div class="step"><b>01 CONNECT</b><span>add my.phast.app/mcp</span></div>
<div class="step"><b>02 MAKE</b><span>create your phast</span></div>
<div class="step"><b>03 TUNE</b><span>tools + prefab widgets</span></div>
<div class="step"><b>04 RUN</b><span>use it from any agent</span></div>
</div>
<div class="action-stack">
<a class="primary-action" href="https://my.phast.app" id="connectAgent"><span>Build your Phast</span><span class="arrow" aria-hidden="true">↗</span></a>
<p class="microcopy">Connect your tools once. Bring your tool belt anywhere.</p>
</div>
<div class="copy">
<p><strong>Connect your tools once.</strong><br>Bring your tool belt anywhere. ChatGPT, Claude, Codex — same Phast, same tools, same home.</p>
<a class="cta" href="https://my.phast.app"><span>BUILD YOUR PHAST</span><span>→</span></a>
<p class="meta" style="margin-top:14px;color:#666">one connector // many personal MCPs</p>
</div>
</section>
<footer class="footer"><span class="status"><i></i> ready to make</span><span class="manifesto">idea → app</span></footer>
<footer class="foot"><span><b>idea → mcp → app</b></span><span>make it // use it // keep moving</span></footer>
</main>
<div class="toast" id="toast" role="status" aria-live="polite">copied</div>
<div class="toast" id="toast">MCP COPIED</div>
<script>
const connector='my.phast.app/mcp';const copyButton=document.querySelector('#copyConnector');const toast=document.querySelector('#toast');let toastTimer;function showToast(message='copied'){toast.textContent=message;toast.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(()=>toast.classList.remove('show'),1200)}copyButton?.addEventListener('click',async()=>{try{await navigator.clipboard.writeText(connector);showToast('connector copied')}catch{showToast(connector)}});
const c=document.querySelector('#copy'),t=document.querySelector('#toast');c.onclick=async()=>{try{await navigator.clipboard.writeText('https://my.phast.app/mcp');t.textContent='MCP COPIED'}catch{t.textContent='my.phast.app/mcp'}t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1100)};
</script>
</body>
</html>
</body></html>