Helix — Startup / Web3 Landing

<nav class="hx-nav" data-rv><span class="hx-logo">◇ HELIX</span><div class="hx-links d-none d-md-flex"><a href="#proto">Protocol</a><a href="#stats">Network</a><a href="#join">Join</a></div><a href="#join" class="hx-btn">Launch app</a></nav>
<header class="hx-hero"><div class="hx-grid-bg"></div><div class="hx-hero-in">
  <span class="hx-pill" data-rv>● Mainnet live · 2026</span>
  <h1 data-rv class="hx-glitch" data-text="Build on the open layer">Build on the<br>open layer</h1>
  <p data-rv>Helix is a demo Web3 landing by <strong>ConvertAtlas</strong> — the same studio behind 60+ developer tools and 435+ UI snippets.</p>
  <div data-rv><a href="#join" class="hx-btn hx-btn-lg">Get started</a><a href="#proto" class="hx-link">Read the docs →</a></div>
</div></header>
<section id="stats" class="hx-stats" data-rv>
  <div class="hx-stat"><b>$2.4B</b><span>Total value locked</span></div>
  <div class="hx-stat"><b>180k</b><span>Wallets</span></div>
  <div class="hx-stat"><b>28</b><span>Chains</span></div>
  <div class="hx-stat"><b>99.99%</b><span>Uptime</span></div>
</section>
<section id="proto" class="hx-feat">
  <div class="hx-head" data-rv><span class="hx-kick">// protocol</span><h2>Engineered for builders</h2></div>
  <div class="hx-grid">
    <div class="hx-card" data-rv><span class="hx-ic">⬡</span><h3>Modular</h3><p>Compose chains, rollups and bridges like building blocks.</p></div>
    <div class="hx-card" data-rv><span class="hx-ic">⚡</span><h3>Instant finality</h3><p>Sub-second confirmation across the network.</p></div>
    <div class="hx-card" data-rv><span class="hx-ic">🔐</span><h3>Audited</h3><p>Formally verified contracts, open-source from day one.</p></div>
  </div>
</section>
<section id="join" class="hx-cta" data-rv><h2>Join the network</h2><p>Build the next generation of apps.</p><a href="https://convertatlas.org" class="hx-btn hx-btn-lg">Launch with ConvertAtlas</a></section>
<footer class="hx-foot">◇ HELIX © 2026 · Built with <a href="https://convertatlas.org">ConvertAtlas</a> · Developer Tools</footer>

*{box-sizing:border-box}body{margin:0;background:#05060a;color:#e8f3e0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}a{text-decoration:none}
.hx-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:rgba(5,6,10,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(163,255,18,.12)}
.hx-logo{font-weight:800;letter-spacing:.08em;color:#a3ff12}
.hx-links{gap:26px}.hx-links a{color:#8fa085;font-size:.88rem}.hx-links a:hover{color:#a3ff12}
.hx-btn{background:#a3ff12;color:#05060a;font-weight:800;padding:10px 20px;border-radius:8px;font-size:.88rem;display:inline-block;transition:.18s;box-shadow:0 0 0 rgba(163,255,18,.5)}
.hx-btn:hover{box-shadow:0 0 24px rgba(163,255,18,.5);transform:translateY(-2px)}
.hx-btn-lg{padding:15px 32px;font-size:1.02rem;margin-right:14px}
.hx-link{color:#a3ff12;font-weight:600}
.hx-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hx-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(163,255,18,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(163,255,18,.16) 1px,transparent 1px);background-size:54px 54px;transform:perspective(420px) rotateX(58deg) scale(2.4);transform-origin:center 75%;animation:hxScroll 5s linear infinite;mask-image:linear-gradient(to top,#000 10%,transparent 70%)}
@keyframes hxScroll{from{background-position:0 0}to{background-position:0 54px}}
.hx-hero-in{position:relative;z-index:1;max-width:760px;padding:0 24px}
.hx-pill{display:inline-block;border:1px solid rgba(163,255,18,.4);background:rgba(163,255,18,.08);border-radius:999px;padding:7px 16px;font-size:.8rem;color:#c7ff7a;margin-bottom:24px}
.hx-hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 18px;position:relative}
.hx-glitch::before,.hx-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;clip-path:inset(0);opacity:.8}
.hx-glitch::before{color:#ff2e63;animation:hxG1 3s infinite linear alternate-reverse}
.hx-glitch::after{color:#22d3ee;animation:hxG2 2.6s infinite linear alternate-reverse}
@keyframes hxG1{0%,92%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}94%{transform:translate(-3px);clip-path:inset(20% 0 40% 0)}96%{clip-path:inset(60% 0 10% 0)}}
@keyframes hxG2{0%,90%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}93%{transform:translate(3px);clip-path:inset(50% 0 30% 0)}97%{clip-path:inset(10% 0 70% 0)}}
.hx-hero p{color:#8fa085;font-size:1.08rem;max-width:540px;margin:0 auto 28px;line-height:1.7}
.hx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:920px;margin:0 auto;padding:50px 24px}
.hx-stat{text-align:center;border:1px solid rgba(163,255,18,.14);border-radius:14px;padding:20px;background:rgba(163,255,18,.03)}
.hx-stat b{display:block;font-size:1.8rem;font-weight:800;color:#a3ff12}.hx-stat span{color:#7e8a76;font-size:.82rem}
.hx-feat{max-width:1000px;margin:0 auto;padding:50px 24px 70px}
.hx-kick{font-family:ui-monospace,monospace;color:#a3ff12;font-size:.82rem}
.hx-head{text-align:center;margin-bottom:34px}.hx-head h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin:6px 0 0}
.hx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.hx-grid{grid-template-columns:1fr}.hx-stats{grid-template-columns:repeat(2,1fr)}.hx-links{display:none}}
.hx-card{border:1px solid rgba(163,255,18,.14);border-radius:16px;padding:24px;background:rgba(163,255,18,.03);transition:.2s}
.hx-card:hover{border-color:rgba(163,255,18,.5);box-shadow:0 0 30px rgba(163,255,18,.1);transform:translateY(-4px)}
.hx-ic{font-size:1.8rem}.hx-card h3{margin:10px 0 6px;font-size:1.2rem;color:#fff}.hx-card p{color:#8fa085;font-size:.9rem;margin:0;line-height:1.6}
.hx-cta{text-align:center;padding:90px 24px;max-width:660px;margin:0 auto}
.hx-cta h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;margin:0 0 10px}.hx-cta p{color:#8fa085;margin:0 0 26px}
.hx-foot{text-align:center;padding:28px;color:#6b7563;font-size:.84rem;border-top:1px solid rgba(163,255,18,.1)}.hx-foot a{color:#a3ff12}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});