org/index.html at main · The-AIOS/org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The AIOS — the commons</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="description" content="the-aios.org — home of the open AIOS framework, its license, and its name, kept free and held in trust." />
<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;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
  :root{
    --canvas:#0a0a0a; --ink:#fafafa; --ink-muted:#c4c4c4; --ink-subtle:#707070;
    --accent:#ff5d4d; --accent-soft:#ffb3a8; --accent-glow:rgba(255,93,77,.18); --hairline:#262626;
    --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{background:var(--canvas);color:var(--ink);font-family:var(--font);
    -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01","ss03";overflow:hidden}
  .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:32px;overflow:hidden}
  .glow{position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(55% 45% at 50% 38%,var(--accent-glow),transparent 70%),
    radial-gradient(45% 40% at 80% 85%,rgba(255,93,77,.07),transparent 70%)}
  .trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
  .trail path{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:5 9;opacity:.5;
    animation:flow 26s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-260}}
  .ant{position:absolute;width:24px;height:24px;offset-rotate:auto;
    filter:drop-shadow(0 0 5px var(--accent-glow))}
  .ant svg{width:100%;height:100%;display:block}
  .a1{offset-path:path("M -60 640 C 260 560, 380 360, 660 360 S 1040 180, 1260 110");animation:walk 24s linear infinite}
  .a2{offset-path:path("M -60 640 C 260 560, 380 360, 660 360 S 1040 180, 1260 110");animation:walk 24s linear infinite;animation-delay:-8s;opacity:.7}
  .a3{offset-path:path("M -60 640 C 260 560, 380 360, 660 360 S 1040 180, 1260 110");animation:walk 24s linear infinite;animation-delay:-16s;opacity:.5}
  @keyframes walk{from{offset-distance:0%}to{offset-distance:100%}}

  .inner{position:relative;z-index:2;max-width:760px}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--accent);margin-bottom:26px;opacity:0;animation:rise .8s .1s cubic-bezier(.2,.7,.2,1) forwards}
  h1{font-size:clamp(38px,6.4vw,72px);font-weight:800;line-height:1.04;letter-spacing:-.03em;
    opacity:0;animation:rise .9s .22s cubic-bezier(.2,.7,.2,1) forwards}
  .sub{margin:26px auto 0;max-width:54ch;font-size:clamp(16px,2vw,18px);line-height:1.55;
    color:var(--ink-muted);opacity:0;animation:rise .9s .38s cubic-bezier(.2,.7,.2,1) forwards}
  .chip{display:inline-flex;align-items:center;gap:9px;margin-top:38px;padding:9px 18px;
    border:1px solid var(--hairline);border-radius:999px;font-family:var(--mono);font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
    opacity:0;animation:rise .9s .54s cubic-bezier(.2,.7,.2,1) forwards}
  .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,93,77,.5)}50%{box-shadow:0 0 0 7px rgba(255,93,77,0)}}
  @keyframes rise{to{opacity:1;transform:none}}
  .eyebrow,h1,.sub,.chip{transform:translateY(20px)}
  .foot{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--mono);
    font-size:11px;letter-spacing:.06em;color:var(--ink-subtle);z-index:2}
  .foot a{color:var(--ink-subtle);text-decoration:none;transition:color .2s}
  .foot a:hover{color:var(--accent)}
  .accent{color:var(--accent)}
  @media(prefers-reduced-motion:reduce){*{animation:none!important}.eyebrow,h1,.sub,.chip{opacity:1;transform:none}}
</style>
</head>
<body>
<main class="hero">
  <div class="glow"></div>
  <svg class="trail" viewBox="0 0 1200 720" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <path d="M -60 640 C 260 560, 380 360, 660 360 S 1040 180, 1260 110" />
  </svg>
  <div class="ant a1"><svg viewBox="0 0 40 40"><g fill="#ff5d4d"><ellipse cx="11" cy="20" rx="5" ry="4"/><ellipse cx="20" cy="20" rx="4" ry="3.2"/><ellipse cx="29" cy="20" rx="6" ry="5"/><g stroke="#ff5d4d" stroke-width="1.4" stroke-linecap="round"><path d="M14 20 L8 13"/><path d="M14 20 L7 20"/><path d="M14 20 L8 27"/><path d="M22 20 L28 13"/><path d="M22 20 L29 20"/><path d="M22 20 L28 27"/><path d="M33 18 L38 13"/><path d="M33 22 L38 27"/></g></g></svg></div>
  <div class="ant a2"><svg viewBox="0 0 40 40"><g fill="#ff5d4d"><ellipse cx="11" cy="20" rx="5" ry="4"/><ellipse cx="20" cy="20" rx="4" ry="3.2"/><ellipse cx="29" cy="20" rx="6" ry="5"/><g stroke="#ff5d4d" stroke-width="1.4" stroke-linecap="round"><path d="M14 20 L8 13"/><path d="M14 20 L7 20"/><path d="M14 20 L8 27"/><path d="M22 20 L28 13"/><path d="M22 20 L29 20"/><path d="M22 20 L28 27"/><path d="M33 18 L38 13"/><path d="M33 22 L38 27"/></g></g></svg></div>
  <div class="ant a3"><svg viewBox="0 0 40 40"><g fill="#ff5d4d"><ellipse cx="11" cy="20" rx="5" ry="4"/><ellipse cx="20" cy="20" rx="4" ry="3.2"/><ellipse cx="29" cy="20" rx="6" ry="5"/><g stroke="#ff5d4d" stroke-width="1.4" stroke-linecap="round"><path d="M14 20 L8 13"/><path d="M14 20 L7 20"/><path d="M14 20 L8 27"/><path d="M22 20 L28 13"/><path d="M22 20 L29 20"/><path d="M22 20 L28 27"/><path d="M33 18 L38 13"/><path d="M33 22 L38 27"/></g></g></svg></div>

  <div class="inner">
    <div class="eyebrow">The AIOS · held in trust</div>
    <h1>The commons is<br>being tended.</h1>
    <p class="sub">Home of the open framework, its license, and its name — kept free, and kept trustworthy, so <span class="accent">anyone</span> can build on it. We're laying the ground.</p>
    <div class="chip"><span class="dot"></span>Opening soon</div>
  </div>

  <div class="foot">the-aios.org · the commons &nbsp;·&nbsp; <a href="https://the-aios.com">the-aios.com →</a></div>
</main>
</body>
</html>