<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UltraLinx — a team of creators and designers</title>
<meta name="description" content="UltraLinx is a team of creators and designers working on YouTube channels, products, newsletters and creator businesses." />
<meta name="theme-color" content="#faf9f7" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="UltraLinx" />
<meta property="og:description" content="A team of creators and designers working on a handful of good things." />
<meta property="og:url" content="https://ultralinx.com" />
<!-- <meta property="og:image" content="https://ultralinx.com/og.jpg" /> -->
<meta name="twitter:card" content="summary_large_image" />

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='22' fill='%23111110'/%3E%3Ctext x='50' y='68' font-family='Helvetica,Arial,sans-serif' font-size='58' font-weight='600' fill='%23faf9f7' text-anchor='middle'%3EU%3C/text%3E%3C/svg%3E">
<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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">

<style>
  /* ---------------------------------------------------------------
     UltraLinx — landing page
     Everything lives in this one file. To add / edit a project,
     copy one <a class="pill"> block in the markup below.
     --------------------------------------------------------------- */

  :root{
    --bg:#faf9f7;
    --ink:#111110;
    --muted:#8b8781;
    --line:rgba(17,17,16,.10);

    /* pill palette */
    --c-orange:#ffb08a;
    --c-yellow:#ffd75e;
    --c-green:#c5eda0;
    --c-blue:#a9d4ff;
    --c-pink:#ffc2e2;
    --c-mint:#a6ecd5;
    --c-lilac:#cdc4ff;
    --c-peach:#ffcfc2;
    --c-paper:#ffffff;

    --pill-ink:#141412;
  }

  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0e0e0d;
      --ink:#f4f2ef;
      --muted:#84807a;
      --line:rgba(244,242,239,.12);
      --pill-ink:#141412;
      --c-paper:#f4f2ef;
    }
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    min-height:100svh;
    display:flex;
    flex-direction:column;
  }

  a{color:inherit;text-decoration:none}

  /* ---------- hero ---------- */
  main{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 24px 24px;
    text-align:center;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    color:var(--muted);
    margin-bottom:26px;
  }
  .eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:#3ecf8e;
    box-shadow:0 0 0 3px rgba(62,207,142,.18);
  }

  h1{
    font-weight:400;
    font-size:clamp(34px,5.2vw,68px);
    line-height:1.12;
    letter-spacing:-.02em;
    margin:0;
    max-width:17ch;
  }
  h1 em{font-style:italic}

  .sub{
    margin:26px 0 0;
    font-size:clamp(14px,1.5vw,16px);
    line-height:1.6;
    color:var(--muted);
    max-width:46ch;
  }
  .sub strong{color:var(--ink);font-weight:500}

  /* ---------- pills ---------- */
  .pills{
    position:relative;
    margin:52px auto 0;
    max-width:960px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 10px;
  }

  .pill{
    --fill:var(--c-paper);
    position:relative;
    display:inline-flex;
    align-items:baseline;
    gap:9px;
    padding:12px 20px;
    border-radius:999px;
    background:var(--fill);
    color:var(--pill-ink);
    border:1px solid rgba(17,17,16,.08);
    box-shadow:0 1px 2px rgba(17,17,16,.05);
    font-size:15px;
    font-weight:500;
    letter-spacing:-.005em;
    white-space:nowrap;
    transform:rotate(var(--r,0deg));
    /* snappy, with a touch of overshoot on the way up */
    transition:transform .17s cubic-bezier(.3,1.35,.5,1), box-shadow .17s ease;
    will-change:transform;
  }
  .pill .tag{
    font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:9.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.5;
  }
  .pill .arrow{
    font-size:12px;
    opacity:.4;
    transition:transform .17s cubic-bezier(.3,1.35,.5,1), opacity .17s ease;
  }
  .pill:hover,.pill:focus-visible{
    transform:rotate(0deg) translateY(-5px) scale(1.09);
    box-shadow:0 12px 26px -8px rgba(17,17,16,.3);
    outline:none;
    z-index:1;
  }
  .pill:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
  .pill:hover .arrow,.pill:focus-visible .arrow{transform:translate(2px,-2px);opacity:.85}

  /* rotations — hand-set so the row feels scattered, not random */
  .pill:nth-child(1){--r:-2deg}
  .pill:nth-child(2){--r:1.5deg}
  .pill:nth-child(3){--r:-1deg}
  .pill:nth-child(4){--r:2.5deg}
  .pill:nth-child(5){--r:-2.5deg}
  .pill:nth-child(6){--r:1deg}
  .pill:nth-child(7){--r:-1.5deg}
  .pill:nth-child(8){--r:2deg}
  .pill:nth-child(9){--r:-1deg}

  /* ---------- footer ---------- */
  footer{
    padding:28px 26px 32px;
    display:flex;
    align-items:center;
    gap:16px;
    font-size:12px;
    color:var(--muted);
  }
  footer a{transition:color .2s}
  footer a:hover{color:var(--ink)}

  /* ---------- entrance ---------- */
  .reveal{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.8,.25,1) forwards}
  .reveal:nth-child(1){animation-delay:.05s}
  .pills .pill{animation:pillIn .7s cubic-bezier(.2,.8,.25,1) backwards}
  .pills .pill:nth-child(1){animation-delay:.34s}
  .pills .pill:nth-child(2){animation-delay:.39s}
  .pills .pill:nth-child(3){animation-delay:.44s}
  .pills .pill:nth-child(4){animation-delay:.49s}
  .pills .pill:nth-child(5){animation-delay:.54s}
  .pills .pill:nth-child(6){animation-delay:.59s}
  .pills .pill:nth-child(7){animation-delay:.64s}
  .pills .pill:nth-child(8){animation-delay:.69s}
  .pills .pill:nth-child(9){animation-delay:.74s}

  @keyframes rise{
    to{opacity:1;transform:translateY(0)}
  }

  /* `backwards` fill only applies before the delay elapses — once the pill has
     landed, its own transform (and the :hover one) takes over cleanly. */
  @keyframes pillIn{
    from{opacity:0;transform:translateY(14px) rotate(var(--r,0deg))}
  }

  .d1{animation-delay:.02s}
  .d2{animation-delay:.12s}
  .d3{animation-delay:.22s}

  @media (prefers-reduced-motion:reduce){
    .reveal,.pills .pill{animation:none;opacity:1;transform:rotate(var(--r,0deg))}
    .pill{transition:none}
  }

  /* ---------- mobile ---------- */
  @media (max-width:720px){
    main{padding:8px 20px 8px}
    h1{font-size:32px;max-width:15ch}
    .sub{margin-top:20px}
    .pills{margin-top:38px;gap:10px 8px}
    .pill{font-size:14px;padding:11px 16px;--r:0deg !important}
    .pill .tag{display:none}
  }
</style>
</head>
<body>


<main>
  <div class="eyebrow reveal d1"><span class="dot"></span> Hello, we're UltraLinx</div>

  <h1 class="reveal d2">A team of creators and designers working on:</h1>

  <p class="sub reveal d3">Two YouTube channels, a few products, a newsletter and a creator agency — all built by the same small crew.</p>

  <nav class="pills" aria-label="What we're working on">

    <!-- EDIT ME — each pill is: name · tag · href · --fill colour.
         All open in a new tab via target="_blank". -->
    <a class="pill" style="--fill:var(--c-orange)" href="https://www.youtube.com/oliur" target="_blank" rel="noopener">
      UltraLinx <span class="tag">YouTube · Tech</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-yellow)" href="https://www.youtube.com/c/OliurOnline" target="_blank" rel="noopener">
      Oliur Online <span class="tag">YouTube · Business &amp; AI</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-green)" href="https://platsupply.com" target="_blank" rel="noopener">
      PlatSupply <span class="tag">Marketplace</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-blue)" href="https://www.linklowdown.com" target="_blank" rel="noopener">
      Link Lowdown <span class="tag">Directory</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-pink)" href="https://offultra.com" target="_blank" rel="noopener">
      OffUltra <span class="tag">Publication</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-paper)" href="https://www.oliur.com/newsletter" target="_blank" rel="noopener">
      The Manual <span class="tag">Newsletter</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-mint)" href="https://iphonecreatorkit.com" target="_blank" rel="noopener">
      iPhone Creator Kit <span class="tag">Product</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-lilac)" href="https://digitalcreator.club" target="_blank" rel="noopener">
      Digital Creator Club <span class="tag">Community</span> <span class="arrow">↗</span>
    </a>

    <a class="pill" style="--fill:var(--c-peach)" href="https://www.itsultra.com" target="_blank" rel="noopener">
      Ultra <span class="tag">Creator management</span> <span class="arrow">↗</span>
    </a>

  </nav>
</main>

<footer>
  <span>&copy; <span id="year">2026</span> UltraLinx</span>
</footer>

<script>
  document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
