From 900a713818385d6f78a503dd27d8f1d82a3351f6 Mon Sep 17 00:00:00 2001 From: Jai VortexIQ Date: Wed, 12 Aug 2026 10:27:20 +0100 Subject: [PATCH] feat(landing): live npm momentum, custom logo, plan-writing hero animation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Momentum band: total installs / last-30-days / GitHub stars fetched LIVE client-side from npm + GitHub, count-up + a 30-day installs sparkline. - New logo: custom double-chevron mark on the ember→lime tile (drops the compass emoji) + matching favicon. - Hero animation swapped from the crew pipeline to a self-writing plan editor: the plan types in, feature keywords underline with an ember→lime glow, a coverage bar fills, and an "Approved" stamp lands. All reduced-motion safe. Co-Authored-By: Claude Opus 4.8 --- landing/index.html | 174 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 135 insertions(+), 39 deletions(-) diff --git a/landing/index.html b/landing/index.html index a2a5d38..2a82d3c 100644 --- a/landing/index.html +++ b/landing/index.html @@ -9,7 +9,7 @@ - + @@ -58,7 +58,8 @@ nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--ink) 72%,transparent);border-bottom:1px solid var(--line)} nav .wrap{display:flex;align-items:center;gap:18px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-disp);font-weight:800;font-size:20px;letter-spacing:-.03em} - .brand .mk{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 200deg,var(--iris),var(--cyan),var(--iris));display:grid;place-items:center;font-size:16px;box-shadow:0 0 0 1px var(--line-2),0 8px 24px -8px var(--iris)} + .brand .mk{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--iris),var(--cyan));display:grid;place-items:center;box-shadow:0 0 0 1px var(--line-2),0 8px 22px -8px var(--iris)} + .brand .mk svg{width:64%;height:64%;display:block} nav .nl{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:14.5px;color:var(--fg-2);font-weight:500} nav .nl a:hover{color:var(--fg)} @media(max-width:760px){nav .nl a.hs{display:none}} @@ -93,22 +94,34 @@ .cur{display:inline-block;width:8px;height:15px;background:var(--iris-soft);vertical-align:-2px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} - /* pipeline visual */ + /* hero: plan-writing editor animation */ + .tdot{width:7px;height:7px;border-radius:50%;background:var(--iris);display:inline-block;box-shadow:0 0 8px var(--iris)} .stage-wrap{position:relative} - .pipe{width:100%;height:auto;overflow:visible} - .pipe .edge{fill:none;stroke:var(--line-2);stroke-width:2} - .pipe .flow{fill:none;stroke:url(#g1);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;animation:draw 2.2s .4s ease forwards} - @keyframes draw{to{stroke-dashoffset:0}} - .pipe .node rect{fill:var(--ink-2);stroke:var(--line-2);stroke-width:1.5;rx:11} - .pipe .node.par rect{stroke:color-mix(in srgb,var(--cyan) 55%,var(--line-2))} - .pipe .node text{font-family:var(--ff-mono);font-size:11px;fill:var(--fg);letter-spacing:.02em} - .pipe .node .sub{fill:var(--fg-3);font-size:8.5px} - .pipe .dot{fill:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan))} - .pulse{offset-path:path('M70 40 L70 96 L70 152 L70 208 L200 250 L200 320 L70 362');animation:trav 3s 1.4s linear infinite} - .pipe .node{opacity:0;animation:pop .5s ease forwards} - .pipe .node.n1{animation-delay:.5s}.pipe .node.n2{animation-delay:.75s}.pipe .node.n3{animation-delay:1s} - .pipe .node.n4{animation-delay:1.25s}.pipe .node.n5{animation-delay:1.35s}.pipe .node.n6{animation-delay:1.6s} - @keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} + .editor{position:relative;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));box-shadow:0 34px 80px -34px #000;overflow:hidden;animation:efloat 7s ease-in-out infinite} + @keyframes efloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} + .e-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line)} + .e-bar i{width:10px;height:10px;border-radius:50%} + .e-bar i:nth-child(1){background:#ff5f57}.e-bar i:nth-child(2){background:#febc2e}.e-bar i:nth-child(3){background:#28c840} + .e-file{margin-left:6px;font-family:var(--ff-mono);font-size:12px;color:var(--fg-3)} + .e-badge{margin-left:auto;font-family:var(--ff-mono);font-size:11px;color:var(--mint);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;opacity:0;animation:efade .6s 4.9s forwards} + .e-body{padding:18px 18px 4px;font-size:15px;line-height:1.85} + .e-prompt{font-family:var(--ff-mono);font-size:13px;color:var(--cyan);margin-bottom:15px} + .e-caret2{display:inline-block;width:7px;height:13px;background:var(--iris-soft);vertical-align:-1px;margin-right:5px;animation:blink 1s steps(1) infinite} + .e-line{opacity:0;transform:translateY(8px);animation:writein .55s forwards} + .e-line+.e-line{margin-top:3px} + .l1{animation-delay:.5s}.l2{animation-delay:1.3s}.l3{animation-delay:2.1s}.l4{animation-delay:2.9s}.l5{animation-delay:3.9s} + @keyframes writein{to{opacity:1;transform:none}} + .e-line .h{font-family:var(--ff-disp);font-weight:700;color:var(--fg)} + .kw{position:relative;color:var(--fg);font-weight:600;white-space:nowrap} + .kw::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--iris),var(--cyan));box-shadow:0 0 9px color-mix(in srgb,var(--iris) 55%,transparent);animation:uline .5s forwards} + .k1::after{animation-delay:1.75s}.k2::after{animation-delay:2.55s}.k3::after{animation-delay:3.35s} + @keyframes uline{to{right:0}} + .e-stamp{display:inline-block;margin-left:10px;font-family:var(--ff-mono);font-size:11px;color:#0e2b16;background:var(--mint);border-radius:6px;padding:2px 9px;opacity:0;transform:scale(.7);animation:estamp .5s 4.5s cubic-bezier(.2,1.5,.4,1) forwards} + @keyframes estamp{to{opacity:1;transform:scale(1)}} + .e-cov{height:6px;background:var(--ink-3);margin:14px 18px 18px;border-radius:99px;overflow:hidden} + .e-cov span{display:block;height:100%;width:8%;background:linear-gradient(90deg,var(--iris),var(--cyan));border-radius:99px;animation:covfill 1.3s 4.7s cubic-bezier(.2,.7,.2,1) forwards} + @keyframes covfill{to{width:62%}} + @keyframes efade{to{opacity:1}} /* stat band */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:46px;background:color-mix(in srgb,var(--ink-1) 60%,transparent)} @@ -227,6 +240,19 @@ .band h2,.band p,.band .install,.band .hero-cta{position:relative} .band .hero-cta{justify-content:center;margin-top:26px} + /* momentum / live npm */ + .mo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));padding:36px;position:relative;overflow:hidden} + .mo::before{content:"";position:absolute;inset:auto -20% -80% auto;width:60%;height:300px;background:radial-gradient(closest-side,color-mix(in srgb,var(--iris) 16%,transparent),transparent);pointer-events:none} + @media(max-width:840px){.mo{grid-template-columns:1fr;gap:26px}} + .mo-left h2{font-size:clamp(24px,3.6vw,34px);margin-top:12px} + .mo-stats{display:flex;gap:30px;flex-wrap:wrap} + .ms .msn{font-family:var(--ff-disp);font-weight:800;font-size:clamp(30px,5vw,46px);line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(100deg,var(--iris-soft),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;min-height:1em} + .ms .msk{font-family:var(--ff-mono);font-size:12px;color:var(--fg-2);margin-top:7px;letter-spacing:.03em} + .spark{width:100%;height:70px;margin-top:22px;display:block} + .mo-cap{font-size:11px;color:var(--fg-3);margin-top:8px;display:flex;align-items:center;gap:7px} + .mo-cap .live{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 70%,transparent);animation:ping 2s ease-out infinite} + @keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}} + footer{border-top:1px solid var(--line);padding:40px 0;color:var(--fg-3);font-size:14px} footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center} footer a{color:var(--fg-2)} footer a:hover{color:var(--fg)} @@ -238,8 +264,9 @@ .reveal{opacity:1;transform:none} h1.hero-h .l span{transform:none} .hero-sub,.hero-cta,.term{opacity:1} - .pipe .flow{stroke-dashoffset:0} - .pipe .node{opacity:1} + .e-line,.e-badge,.e-stamp{opacity:1;transform:none} + .kw::after{right:0} + .e-cov span{width:62%} .meter .fill[data-w]{width:var(--w)} } @@ -250,7 +277,7 @@