PageSourceSearch

https://socialmachines.ai/%7B%7B%20s.href%20%7D%7D

html socialmachines.ai collected 2026-10-05 15:07:53 UTC 59,510 bytes, 362 lines download raw bytes

1<!DOCTYPE html>
2<html>
3<head>
4
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<title>Social Machines AI — Machines that perceive the real world</title>
8<meta name="description" content="Social Machines is a frontier AI lab in Singapore building the compute, perception, and autonomy layer for the physical world.">
9<link rel="canonical" href="https://socialmachines.ai">
10<script src="./support.js"></script>
vendor: 1 bytes, line 10
10
11<script src="./cms-sync.js"></script>
11
12<!-- Product analytics: consent-gated PostHog (EU-hosted). Paste the public
13     project key below; empty key = analytics stays off. Never runs on /admin. -->
14<script>window.SM_PH={key:"phc_uhKSA5hdKE2dUm2Z4e9idjxWXunRvuHC4Mmn2XJD9vXu",host:"https://eu.posthog.com",apiHost:"/ph",assetHost:"/ph"};</script>
vendor: 1 bytes, line 14
14
15<script src="./analytics.js" defer></script>
15
16</head>
17<body>
18<x-dc>
19<helmet>
20<link rel="stylesheet" href="./fonts.css">
21<style>
22  * { box-sizing: border-box; }
23  html, body { margin: 0; padding: 0; background: #0b0b0c; }
24  body { -webkit-font-smoothing: antialiased; }
25  ::selection { background: #FF4A1C; color: #0b0b0c; }
26  @keyframes sm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
27  @keyframes sm-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
28  @keyframes sm-cue { 0% { transform: translateY(0); opacity: .25; } 50% { transform: translateY(7px); opacity: 1; } 100% { transform: translateY(0); opacity: .25; } }
29  @keyframes sm-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
30  @media (hover: hover) and (pointer: fine) { * { cursor: none !important; } input, textarea { cursor: text !important; } }
31  @media (hover: none) { .sm-cursor { display: none !important; } }
32</style>
33<script src="./image-slot.js"></script>
33
34</helmet>
35<div ref="{{ rootRef }}" style="position:relative; background:#0b0b0c; color:#f4f1ec; font-family:'Archivo',sans-serif; overflow-x:hidden; min-height:100vh;">
36
37  <!-- grain / noise overlay -->
38  <div style="position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');"></div>
39
40  <!-- custom cursor -->
41  <div ref="{{ glowRef }}" class="sm-cursor" style="position:fixed; top:0; left:0; width:260px; height:260px; border-radius:50%; z-index:9998; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(circle, rgba(255,74,28,0.34) 0%, rgba(255,74,28,0.14) 32%, rgba(255,74,28,0) 68%); transition:opacity .3s ease; will-change:transform;"></div>
42  <div ref="{{ ringRef }}" class="sm-cursor" style="position:fixed; top:0; left:0; width:26px; height:26px; border:1px solid rgba(255,255,255,0.6); border-radius:50%; z-index:9999; pointer-events:none; transition:width .25s ease, height .25s ease, border-color .25s ease; mix-blend-mode:difference;"></div>
43  <div ref="{{ dotRef }}" class="sm-cursor" style="position:fixed; top:0; left:0; width:4px; height:4px; background:#FF4A1C; border-radius:50%; z-index:9999; pointer-events:none;"></div>
44  <div ref="{{ labelRef }}" class="sm-cursor" style="position:fixed; top:0; left:0; z-index:9999; pointer-events:none; opacity:0; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.18em; color:#FF4A1C; transition:opacity .2s ease; white-space:nowrap;"></div>
45
46  <!-- top ticker -->
47  <div style="position:fixed; top:0; left:0; right:0; z-index:60; height:26px; background:#0b0b0c; border-bottom:1px solid rgba(255,255,255,0.10); overflow:hidden; display:flex; align-items:center;">
48    <div style="display:inline-flex; white-space:nowrap; animation:sm-marquee 38s linear infinite; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.22em; color:#6a6862;">
49      <sc-for list="{{ tick }}" as="t" hint-placeholder-count="6"><span style="padding:0 14px;">{{ t }}</span><span style="color:#FF4A1C; padding:0 14px;">/</span></sc-for>
50      <sc-for list="{{ tick }}" as="t" hint-placeholder-count="6"><span style="padding:0 14px;">{{ t }}</span><span style="color:#FF4A1C; padding:0 14px;">/</span></sc-for>
51    </div>
52  </div>
53
54  <!-- header -->
55  <header style="position:fixed; top:26px; left:0; right:0; z-index:55; display:flex; align-items:center; justify-content:space-between; padding:18px 32px; backdrop-filter:blur(6px); background:linear-gradient(180deg, rgba(11,11,12,0.85), rgba(11,11,12,0));">
56    <a href="#top" data-cursor="TOP" style="display:flex; align-items:center; gap:12px; text-decoration:none; color:#f4f1ec;">
57      <span style="width:13px; height:13px; border-radius:50%; background:linear-gradient(90deg,#f4f1ec 50%, #0b0b0c 50%); border:1px solid #f4f1ec; display:inline-block;"></span>
58      <span style="font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.24em; font-weight:700;">SOCIAL&nbsp;MACHINES</span>
59      <span style="font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.24em; color:#FF4A1C;">AI</span>
60    </a>
61    <nav style="display:flex; align-items:center; gap:26px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; color:#a7a49d;">
62      <a href="#manifesto" data-cursor="01" style="text-decoration:none; color:inherit;" style-hover="color:#f4f1ec;">MANIFESTO</a>
63      <a href="#portfolio" data-cursor="02" style="text-decoration:none; color:inherit;" style-hover="color:#f4f1ec;">PORTFOLIO</a>
64      <a href="#approach" data-cursor="03" style="text-decoration:none; color:inherit;" style-hover="color:#f4f1ec;">APPROACH</a>
65      <a href="#journal" data-cursor="04" style="text-decoration:none; color:inherit;" style-hover="color:#f4f1ec;">JOURNAL</a>
66      <a href="#newsletter" data-cursor="JOIN" style="display:flex; align-items:center; gap:8px; text-decoration:none; color:#0b0b0c; background:#f4f1ec; padding:9px 16px;" style-hover="background:#FF4A1C; color:#0b0b0c;">NEWSLETTER<span style="font-weight:700;">→</span></a>
67    </nav>
68  </header>
69
70  <!-- ============ HERO ============ -->
71  <section id="top" data-screen-label="Hero" style="position:relative; min-height:100vh; padding:140px 32px 48px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;">
72    <canvas ref="{{ canvasRef }}" style="position:absolute; inset:0; width:100%; height:100%; display:block;"></canvas>
73    <div style="position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 30%, rgba(11,11,12,0) 30%, rgba(11,11,12,0.55) 75%, rgba(11,11,12,0.95) 100%); pointer-events:none;"></div>
74
75    <!-- HUD corners -->
76    <div style="position:absolute; top:90px; left:32px; width:34px; height:34px; border-left:1px solid rgba(255,255,255,0.35); border-top:1px solid rgba(255,255,255,0.35); pointer-events:none;"></div>
77    <div style="position:absolute; top:90px; right:32px; width:34px; height:34px; border-right:1px solid rgba(255,255,255,0.35); border-top:1px solid rgba(255,255,255,0.35); pointer-events:none;"></div>
78    <div style="position:absolute; bottom:42px; right:32px; width:34px; height:34px; border-right:1px solid rgba(255,255,255,0.35); border-bottom:1px solid rgba(255,255,255,0.35); pointer-events:none;"></div>
79
80    <!-- vertical edge label -->
81    <div style="position:absolute; left:34px; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.34em; color:#5a5854; pointer-events:none;">INDEX&nbsp;//&nbsp;00&nbsp;—&nbsp;A&nbsp;FRONTIER&nbsp;AI&nbsp;LAB</div>
82
83    <div style="position:relative; z-index:3; max-width:1500px; margin:0 auto; width:100%;">
84      <div data-reveal data-delay="0" style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; align-items:center; gap:16px; margin-bottom:30px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:#a7a49d;">
85        <span style="width:8px; height:8px; background:#FF4A1C; display:inline-block;"></span>
86        <span>{{ heroEyebrow }}</span>
87      </div>
88
89      <h1 data-parallax="-0.04" style="margin:0; font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:clamp(44px,8.6vw,142px); line-height:0.88; letter-spacing:-0.02em; color:#f4f1ec; text-wrap:balance;">
90        <span data-reveal data-delay="60" style="display:block; animation:sm-reveal 1s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 16%;">{{ heroLine1 }}</span>
91        <span data-reveal data-delay="160" style="display:block; animation:sm-reveal 1s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 16%;"><span ref="{{ flapRef }}" aria-label="perceive" style="color:#FF4A1C; display:inline-flex; vertical-align:baseline; perspective:400px;">PERCEIVE</span> {{ heroLine2Tail }}</span>
92        <span data-reveal data-delay="260" style="display:block; animation:sm-reveal 1s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 16%;">{{ heroLine3 }}</span>
93      </h1>
94
95      <div data-reveal data-delay="360" style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px; margin-top:38px;">
96        <p style="margin:0; max-width:560px; font-size:clamp(15px,1.25vw,19px); line-height:1.6; color:#b7b4ac;">{{ heroSub }}</p>
97        <div style="display:flex; align-items:center; gap:10px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.22em; color:#6a6862;">
98          <span style="display:inline-block; animation:sm-cue 1.8s ease-in-out infinite;">↓</span><span>SCROLL&nbsp;TO&nbsp;EXPLORE</span>
99        </div>
100      </div>
101    </div>
102  </section>
103
104  <!-- ============ MANIFESTO (light) ============ -->
105  <section id="manifesto" data-screen-label="Manifesto" style="position:relative; background:#e9e5dd; color:#16140f; padding:130px 32px;">
106    <div style="max-width:1500px; margin:0 auto;">
107      <div data-reveal style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(0,0,0,0.18); padding-top:16px; margin-bottom:70px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:#6b6760;">
108        <span>01&nbsp;—&nbsp;MANIFESTO</span><span>WHAT&nbsp;WE&nbsp;BELIEVE</span>
109      </div>
110      <div style="display:grid; grid-template-columns:0.32fr 1fr; gap:48px; align-items:start;">
111        <div data-reveal data-delay="80" style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; font-family:'Space Mono',monospace; font-size:12px; line-height:1.9; letter-spacing:.04em; color:#6b6760;">
112          <p style="margin:0;">{{ manifestoAside }}</p>
113        </div>
114        <h2 data-reveal data-delay="120" style="margin:0; font-family:'Archivo',sans-serif; font-weight:500; font-size:clamp(26px,3.9vw,60px); line-height:1.08; letter-spacing:-0.01em; text-wrap:pretty;">{{ manifestoHeading }}</h2>
115      </div>
116    </div>
117  </section>
118
119  <!-- ============ PORTFOLIO ============ -->
120  <section id="portfolio" data-screen-label="Portfolio" style="position:relative; background:#0b0b0c; color:#f4f1ec; padding:120px 32px 60px;">
121    <div style="max-width:1500px; margin:0 auto;">
122      <div data-reveal style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid rgba(255,255,255,0.14); padding-top:18px; margin-bottom:18px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:#6a6862;">
123        <span>02&nbsp;—&nbsp;PORTFOLIO</span><span>FOUR&nbsp;COMPANIES&nbsp;/&nbsp;ONE&nbsp;LAB</span>
124      </div>
125      <h2 data-reveal data-delay="60" style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; margin:0 0 28px;
125 font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,54px); line-height:1; letter-spacing:-0.01em; color:#f4f1ec;">{{ portfolioHeading }}</h2>
126
127      <div style="border-bottom:1px solid rgba(255,255,255,0.12);">
128        <sc-for list="{{ rows }}" as="row" hint-placeholder-count="4">
129          <div data-cursor="{{ row.cursor }}" onClick="{{ row.open }}" style="position:relative; padding:44px 0 48px; color:#5a5854; border-top:1px solid rgba(255,255,255,0.12); transition:background .45s ease, color .45s ease;" style-hover="color:#FF4A1C; background:rgba(255,255,255,0.018);">
130            <div style="display:flex; align-items:baseline; gap:28px;">
131              <span style="font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.1em; color:inherit; width:24px; flex:none;">{{ row.idx }}</span>
132              <div style="flex:1; min-width:0;">
133                <div style="display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;">
134                  <h3 style="margin:0; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:clamp(30px,5vw,76px); line-height:0.96; letter-spacing:-0.015em; color:#e8e5de;">{{ row.name }}</h3>
135                  <span style="font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.18em; color:#6a6862;">{{ row.tag }}</span>
136                </div>
137                <div style="padding:26px 0 0; display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:start;">
138                <div>
139                  <p style="margin:0; font-size:clamp(15px,1.15vw,18px); line-height:1.62; color:#b7b4ac; max-width:520px;">{{ row.desc }}</p>
140                  <div style="display:flex; flex-wrap:wrap; gap:9px; margin-top:24px;">
141                    <sc-for list="{{ row.tags }}" as="t" hint-placeholder-count="3">
142                      <span style="font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; color:#cfccc4; border:1px solid rgba(255,255,255,0.18); padding:6px 11px;">{{ t }}</span>
143                    </sc-for>
144                  </div>
145                </div>
146                <div style="position:relative; aspect-ratio:16/10;">
147                  <image-slot id="{{ row.slot }}" placeholder="{{ row.media }}" shape="rect" fit="cover" style="position:absolute; inset:0; width:100%; height:100%; display:block; background:#0e0e10; border:1px solid rgba(255,255,255,0.14);"></image-slot>
148                  <div style="{{ row.imgStyle }}"></div>
149                  <video src="{{ row.vid }}" style="{{ row.vidStyle }}" autoplay muted loop playsinline></video>
150                  <div style="position:absolute; top:10px; left:10px; width:18px; height:18px; border-left:1px solid rgba(255,255,255,0.35); border-top:1px solid rgba(255,255,255,0.35); pointer-events:none;"></div>
151                  <div style="position:absolute; top:10px; right:10px; width:18px; height:18px; border-right:1px solid rgba(255,255,255,0.35); border-top:1px solid rgba(255,255,255,0.35); pointer-events:none;"></div>
152                  <div style="position:absolute; bottom:10px; right:10px; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.16em; color:#FF4A1C; pointer-events:none;">[ MEDIA ]</div>
153                  <div style="{{ row.comingSoonStyle }}">
154                    <span style="font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.28em; color:#f4f1ec; border:1px solid #FF4A1C; padding:10px 18px; background:rgba(11,11,12,0.55);">COMING&nbsp;SOON</span>
155                  </div>
156                </div>
157              </div>
158            </div>
159          </div>
160          </div>
161        </sc-for>
162      </div>
163    </div>
164  </section>
165
166  <!-- ============ APPROACH ============ -->
167  <section id="approach" data-screen-label="Approach" style="position:relative; background:#0b0b0c; color:#f4f1ec; padding:110px 32px 130px; border-top:1px solid rgba(255,255,255,0.08);">
168    <div style="max-width:1500px; margin:0 auto;">
169      <div data-reveal style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid rgba(255,255,255,0.14); padding-top:18px; margin-bottom:56px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:#6a6862;">
170        <span>03&nbsp;—&nbsp;APPROACH</span><span>THE&nbsp;STACK</span>
171      </div>
172      <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12);">
173        <sc-for list="{{ pillars }}" as="p" hint-placeholder-count="4">
174          <div data-cursor="" style="background:#0b0b0c; padding:34px 26px 40px; min-height:300px; display:flex; flex-direction:column; justify-content:space-between;" style-hover="background:#0f0f10;">
175            <div style="font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.18em; color:#FF4A1C;">{{ p.k }}</div>
176            <div>
177              <h3 style="margin:0 0 14px; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:clamp(20px,1.7vw,28px); letter-spacing:-0.01em;">{{ p.t }}</h3>
178              <p style="margin:0; font-size:14px; line-height:1.6; color:#9a978f; min-height:8em; display:flex; align-items:flex-end;">{{ p.d }}</p>
179            </div>
180          </div>
181        </sc-for>
182      </div>
183    </div>
184  </section>
185
186  <!-- ============ JOURNAL / BLOG ============ -->
187  <section id="journal" data-screen-label="Journal" style="position:relative; background:#0b0b0c; color:#f4f1ec; padding:110px 32px 130px; border-top:1px solid rgba(255,255,255,0.08);">
188    <div style="max-width:1500px; margin:0 auto;">
189      <div data-reveal style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid rgba(255,255,255,0.14); padding-top:18px; margin-bottom:18px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:#6a6862;">
190        <span>04&nbsp;—&nbsp;JOURNAL</span><span>NEWS&nbsp;/&nbsp;ARTICLES&nbsp;/&nbsp;ANNOUNCEMENTS</span>
191      </div>
192      <div data-reveal data-delay="60" style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:44px;">
193        <h2 style="margin:0; font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,54px); line-height:1; letter-spacing:-0.01em; color:#f4f1ec;">{{ journalHeading }}</h2>
194        <a href="#" data-cursor="ALL" style="text-decoration:none; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; color:#a7a49d; border-bottom:1px solid rgba(255,255,255,0.25); padding-bottom:4px;" style-hover="color:#FF4A1C; border-color:#FF4A1C;">VIEW&nbsp;ALL&nbsp;POSTS&nbsp;→</a>
195      </div>
196
197      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;">
198        <sc-for list="{{ posts }}" as="post" hint-placeholder-count="3">
199          <a data-cursor="READ" onClick="{{ post.openArticle }}" style="text-decoration:none; color:inherit; display:flex; flex-direction:column; cursor:pointer;">
200            <div style="position:relative; aspect-ratio:16/10; margin-bottom:20px;">
201              <image-slot id="{{ post.slot }}" placeholder="{{ post.media }}" shape="rect" fit="cover" style="position:absolute; inset:0; width:100%; height:100%; display:block; background:#0e0e10; border:1px solid rgba(255,255,255,0.14);"></image-slot>
202              <div style="{{ post.imgStyle }}"></div>
203              <video src="{{ post.vid }}" style="{{ post.vidStyle }}" autoplay muted loop playsinline></video>
204              <div style="position:absolute; top:12px; left:12px; background:#FF4A1C; color:#0b0b0c; font-family:'Space Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.16em; padding:5px 9px;">{{ post.kind }}</div>
205              <div style="position:absolute; top:10px; right:10px; width:16px; height:16px; border-right:1px solid rgba(255,255,255,0.35); border-top:1px solid rgba(255,255,255,0.35); pointer-events:none;"></div>
206            </div>
207            <div style="display:flex; align-items:center; gap:12px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.16em; color:#6a6862; margin-bottom:12px;">
208              <span>{{ post.date }}</span><span style="color:#3f3d39;">/</span><span>{{ post.read }}</span>
209            </div>
210            <h3 style="margin:0 0 12px; font-family:'Archivo',sans-serif; font-weight:600; font-size:clamp(19px,1.5vw,23px); line-height:1.18; letter-spacing:-0.01em; color:#e8e5de; transition:color .35s ease;" style-hover="color:#FF4A1C;">{{ post.title }}</h3>
211            <p style="margin:0; font-size:14px; line-height:1.6; color:#9a978f;">{{ post.excerpt }}</p>
212          </a>
213        </sc-for>
214      </div>
215    </div>
216  </section>
217
218  <!-- ============ FOOTER / NEWSLETTER ============ -->
219  <footer id="newsletter" data-screen-label="Newsletter" style="position:relative; background:#e9e5dd; color:#16140f; padding:90px 32px 40px;">
220    <div style="max-width:1500px; margin:0 auto;">
221      <div data-reveal style="animation:sm-reveal .9s cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 0% cover 18%; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(0,0,0,0.2); padding-top:16px; margin-bottom:46px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:#6b6760;">
222        <span>05&nbsp;—&nbsp;NEWSLETTER</span><span>SIGNALS&nbsp;FROM&nbsp;THE&nbsp;FRONTIER</span>
223      </div>
224      <div style="display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:end; margin-bottom:64px;">
225        <h2 style="margin:0; font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:clamp(30px,4.4vw,68px); line-height:0.95; letter-spacing:-0.02em; white-space:pre-line;">{{ newsHeading }}</h2>
226        <div style="display:flex; flex-direction:column; gap:16px;">
227          <sc-if value="{{ subscribed }}" hint-placeholder-val="{{ false }}">
228            <div style="border:1px solid #16140f; background:#16140f; color:#e9e5dd; padding:22px 20px;">
229              <div style="font-family:'Archivo Expanded',sans-serif; font-weight:700; font-size:20px; margin-bottom:6px;">You're on the list.</div>
230              <div style="font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; color:#b8b3a8;">Watch your inbox for the next dispatch.</div>
231            </div>
232          </sc-if>
233          <sc-if value="{{ notSubscribed }}" hint-placeholder-val="{{ true }}">
234            <div>
235              <p style="margin:0 0 16px; font-size:15px; line-height:1.6; color:#3a352d;">{{ newsSub }}</p>
236              <form onSubmit="{{ subscribe }}" style="display:flex; flex-direction:column; gap:12px;">
237                <div style="display:flex; border:1px solid #16140f;">
238                  <input ref="{{ emailRef }}" type="email" required placeholder="[email protected]" style="flex:1; min-width:0; background:transparent; border:none; outline:none; padding:16px 18px; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.04em; color:#16140f;">
239                  <button type="submit" data-cursor="JOIN" style="flex:none; background:#16140f; color:#e9e5dd; border:none; padding:0 22px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em;" style-hover="background:#FF4A1C; color:#16140f;">SUBSCRIBE&nbsp;→</button>
240                </div>
241                <span style="font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; color:#6b6760;">RESEARCH · RELEASES · ANNOUNCEMENTS — UNSUBSCRIBE ANYTIME.</span>
242              </form>
243            </div>
244          </sc-if>
245          <a href="#" data-cursor="JOIN" style="display:inline-flex; align-items:center; justify-content:space-between; gap:12px; text-decoration:none; color:#16140f; border:1px solid rgba(0,0,0,0.25); padding:14px 18px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em;" style-hover="border-color:#FF4A1C; color:#FF4A1C;">CAREERS — WE'RE HIRING<span>→</span></a>
246        </div>
247      </div>
248
249      <!-- social row -->
250      <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(0,0,0,0.18); padding-top:28px; margin-bottom:36px;">
251        <span style="font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.2em; color:#6b6760; margin-right:8px;">FOLLOW&nbsp;//</span>
252        <sc-for list="{{ socials }}" as="s" hint-placeholder-count="5">
253          <a href="{{ s.href }}" data-cursor="{{ s.label }}" aria-label="{{ s.label }}" style="display:flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid rgba(0,0,0,0.3); color:#16140f; transition:background .3s ease, color .3s ease, border-color .3s ease;" style-hover="background:#16140f; color:#e9e5dd; border-color:#16140f;">
254            <span style="{{ s.iconStyle }}"></span>
255          </a>
256        </sc-for>
257      </div>
258
259      <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-top:1px solid rgba(0,0,0,0.18); padding-top:28px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; color:#4f4b44;">
260        <sc-for list="{{ fCols }}" as="c" hint-placeholder-count="4">
261          <div><div style="color:#16140f; margin-bottom:10px; letter-spacing:.18em;">{{ c.title }}</div><span style="white-space:pre-line;">{{ c.lines }}</span></div>
262        </sc-for>
263      </div>
264
265      <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em;">
266        <span style="color:#6b6760;">FOR&nbsp;MACHINES&nbsp;//</span>
267        <a href="#llms.txt" onClick="{{ openLlms }}" data-cursor="TXT" style="color:#16140f; text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.35); padding-bottom:2px;" style-hover="color:#FF4A1C; border-bottom-color:#FF4A1C;">LLMS.TXT</a>
268        <span style="color:#8f8a80;">PLAIN-TEXT SITE INDEX FOR AI CRAWLERS &amp; ANSWER ENGINES</span>
269      </div>
270
271      <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:14px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em;">
272        <span style="color:#6b6760;">LEGAL&nbsp;//</span>
273        <a href="/privacy" data-cursor="PRIVACY" style="color:#16140f; text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.35); padding-bottom:2px;" style-hover="color:#FF4A1C; border-bottom-color:#FF4A1C;">PRIVACY&nbsp;POLICY</a>
274        <a href="/terms" data-cursor="TERMS" style="color:#16140f; text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.35); padding-bottom:2px;" style-hover="color:#FF4A1C; border-bottom-color:#FF4A1C;">TERMS&nbsp;OF&nbsp;USE</a>
275      </div>
276
277      <div style="margin-top:52px; overflow:hidden; width:100%;">
278        <div style="display:flex; width:max-content; white-space:nowrap; animation:sm-marquee 26s linear infinite; font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:clamp(46px,14vw,220px); line-height:0.9; letter-spacing:-0.03em; color:#16140f;">
279          <sc-for list="{{ marquee }}" as="m" hint-placeholder-count="8">
280            <span style="flex:none; padding-right:0.34em; white-space:pre;">{{ fMarquee }}<span style="color:#FF4A1C; font-weight:400; padding:0 0.34em;">/</span></span>
281          </sc-for>
282        </div>
283      </div>
284    </div>
285  </footer>
286
287  <!-- article overlay -->
288  <sc-if value="{{ postOpen }}" hint-placeholder-val="{{ false }}">
289    <div data-screen-label="Article" style="position:fixed; inset:0; z-index:80; background:rgba(11,11,12,0.985); overflow-y:auto;">
290      <button onClick="{{ closeArticle }}" data-cursor="CLOSE" style="position:fixed; top:44px; right:32px; background:transparent; color:#f4f1ec; border:1px solid rgba(255,255,255,0.3); width:46px; height:46px; font-size:16px; cursor:pointer; z-index:81;" style-hover="border-color:#FF4A1C; color:#FF4A1C;">✕</button>
291      <div style="max-width:860px; margin:0 auto; padding:110px 32px 120px;">
292        <div style="display:flex; align-items:center; gap:12px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.18em; color:#6a6862; margin-bottom:22px;">
293          <span style="background:#FF4A1C; color:#0b0b0c; font-weight:700; padding:5px 9px;">{{ curPost.kind }}</span>
294          <span>{{ curPost.date }}</span><span style="color:#3f3d39;">/</span><span>{{ curPost.read }}</span>
295        </div>
296        <h1 style="margin:0 0 30px; font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:clamp(30px,4.6vw,64px); line-height:1.02; letter-spacing:-0.015em; color:#f4f1ec; text-wrap:balance;">{{ curPost.title }}</h1>
297        <div style="position:relative; aspect-ratio:16/9; margin-bottom:38px; background:#0e0e10; border:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center;">
298          <span style="font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.2em; color:#FF4A1C;">[ {{ curPost.media }} ]</span>
299          <div style="{{ curPost.imgStyle }}"></div>
300          <video src="{{ curPost.vid }}" style="{{ curPost.vidStyle }}" autoplay muted loop playsinline></video>
301        </div>
302        <p style="margin:0 0 26px; font-size:19px; line-height:1.65; color:#cfccc4;">{{ curPost.excerpt }}</p>
303        <div style="font-size:16px; line-height:1.85; color:#a9a69e; white-space:pre-line;">{{ curPost.body }}</div>
304      </div>
305    </div>
306  </sc-if>
307
308  <!-- llms.txt overlay -->
309  <sc-if value="{{ llmsOpen }}" hint-placeholder-val="{{ false }}">
310    <div data-screen-label="llms.txt" style="position:fixed; inset:0; z-index:90; background:#0b0b0c; overflow-y:auto;">
311      <div style="position:sticky; top:0; background:rgba(11,11,12,0.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 32px; z-index:91;">
312        <div style="display:flex; align-items:baseline; gap:14px; min-width:0;">
313          <span style="font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.2em; color:#FF4A1C; flex:none;">/LLMS.TXT</span>
314          <span style="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.14em; color:#6a6862; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">PLAIN-TEXT SITE INDEX FOR AI CRAWLERS &amp; ANSWER ENGINES</span>
315        </div>
316        <div style="display:flex; gap:10px; flex:none;">
317          <button onClick="{{ copyLlms }}" data-cursor="COPY" style="background:transparent; color:#f4f1ec; border:1px solid rgba(255,255,255,0.3); height:46px; padding:0 18px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; cursor:pointer;" style-hover="border-color:#FF4A1C; color:#FF4A1C;">{{ copyLabel }}</button>
318          <button onClick="{{ closeLlms }}" data-cursor="CLOSE" style="background:transparent; color:#f4f1ec; border:1px solid rgba(255,255,255,0.3); width:46px; height:46px; font-size:16px; cursor:pointer;" style-hover="border-color:#FF4A1C; color:#FF4A1C;">✕</button>
319        </div>
320      </div>
321      <pre style="max-width:960px; margin:0 auto; padding:56px 32px 120px; font-family:'Space Mono',monospace; font-size:12.5px; line-height:1.8; letter-spacing:.02em; color:#cfccc4; white-space:pre-wrap; word-break:break-word;">{{ llmsText }}</pre>
322    </div>
323  </sc-if>
324
325</div>
326</x-dc>
327<script type="text/x-dc" data-dc-script>
328class Component extends DCLogic{state={subscribed:!1,openPost:-1,llms:!1,copied:!1};constructor(props){super(props),this.rootRef=React.createRef(),this.canvasRef=React.createRef(),this.ringRef=React.createRef(),this.glowRef=React.createRef(),this.flapRef=React.createRef(),this.dotRef=React.createRef(),this.labelRef=React.createRef(),this.emailRef=React.createRef(),this.state.cms=this.loadCms()}componentDidMount(){this.initCanvas(),this.initCursor(),this.initParallax(),this.initSplitFlap(),this._onStore=()=>{this.setState({cms:this.loadCms()})},window.addEventListener("storage",this._onStore),this._onMsg=e=>{e&&e.data&&e.data.type==="sm-cms"&&e.data.content&&this.setState({cms:this.mergeCms(e.data.content)})},window.addEventListener("message",this._onMsg),this._onHash=()=>this.setState({llms:/llms\.txt/i.test(location.hash),copied:!1}),window.addEventListener("hashchange",this._onHash),/llms\.txt/i.test(location.hash)&&this._onHash(),this.applySeo()}componentDidUpdate(pp,ps){ps&&ps.cms!==this.state.cms&&(this._flapInt&&clearInterval(this._flapInt),this.initSplitFlap(),this.applySeo())}componentWillUnmount(){cancelAnimationFrame(this._raf),cancelAnimationFrame(this._craf),window.removeEventListener("resize",this._onResize),window.removeEventListener("mousemove",this._onMove),window.removeEventListener("mousemove",this._cmm),window.removeEventListener("scroll",this._onScroll),window.removeEventListener("scroll",this._onScroll2),this._flapT&&this._flapT.forEach(clearTimeout),this._flapInt&&clearInterval(this._flapInt),window.removeEventListener("storage",this._onStore),window.removeEventListener("message",this._onMsg),this._onHash&&window.removeEventListener("hashchange",this._onHash),this._io&&this._io.disconnect()}cmsDefaults(){return{media:[],hero:{eyebrow:"FRONTIER AI LAB \u2014 SINGAPORE \u2014 EST. 2026",line1:"MACHINES THAT",line2Tail:"THE",line3:"REAL WORLD",sub:"Social Machines is a frontier AI lab building the compute, perception, and autonomy layer for the physical world \u2014 from distributed inference to defense-grade situational awareness.",flapWords:[{w:"PERCEIVE",c:"#FF4A1C"},{w:"SEE",c:"#FFB020"},{w:"HEAR",c:"#37C8C3"},{w:"FEEL",c:"#FF5D8F"},{w:"TOUCH",c:"#7C6BFF"},{w:"TASTE",c:"#8FD14F"},{w:"SMELL",c:"#4EA8FF"},{w:"SENSE",c:"#EDE9E1"}]},manifesto:{aside:"Most AI talks. We build AI that *acts* \u2014 wired 
328into sensors, cameras, compute, and the field.",heading:"We don't build chatbots. We build machines that *see*, *sense*, and *reason* about physical space \u2014 and the infrastructure to run them anywhere on Earth."},portfolio:{heading:"The portfolio",rows:[{name:"SupaDirect",tag:"DISTRIBUTED COMPUTE",media:"INFRASTRUCTURE / FABRIC",slot:"pf-supadirect",mediaId:"",url:"",desc:"A distributed AI compute, hosting, and streaming fabric that puts frontier models wherever they are needed \u2014 low-latency inference at the edge, sovereign by design, elastic at planetary scale.",tags:"COMPUTE, HOSTING, STREAMING, EDGE"},{name:"Aiko",tag:"AI APP BUILDER \xB7 PART OF SUPADIRECT",media:"AIKO BUILDER UI",slot:"pf-aiko",mediaId:"",url:"",desc:"Turn intent into deployed software. Aiko composes, builds, and ships AI applications directly onto the SupaDirect fabric \u2014 no scaffolding, no DevOps tax.",tags:"APP BUILDER, AGENTS, ONE-CLICK DEPLOY"},{name:"XRAM Ai",tag:"DEFENSE \xB7 INTELLIGENCE \xB7 SECURITY",media:"XRAM AWARENESS DISPLAY",slot:"pf-xram",mediaId:"",url:"",desc:"AI software and hardware for the defense and intelligence community. Advanced sensor fusion and digital twins resolve into live tracking and real-time situational awareness across contested environments.",tags:"SENSOR FUSION, DIGITAL TWIN, C2, HARDWARE"},{name:"HorusXR",tag:"SURVEILLANCE PLATFORM \xB7 VMS",media:"HORUSXR 3D RECONSTRUCTION",slot:"pf-horusxr",mediaId:"",url:"",desc:"A video management system that reconstructs the world in three dimensions. Gaussian splatting turns camera networks into live, navigable digital twins of any environment.",tags:"VMS, 3D TRACKING, GAUSSIAN SPLAT"}]},approach:{pillars:[{k:"A / PERCEPTION",t:"Perception",d:"Sensor fusion, computer vision, and 3D reconstruction that let machines understand physical space."},{k:"B / COMPUTE",t:"Compute",d:"A distributed fabric to train, host, and stream frontier models anywhere \u2014 to the edge and back."},{k:"C / AUTONOMY",t:"Autonomy",d:"Agents and digital twins that reason, track, and act on live data in real time."},{k:"D / SOVEREIGNTY",t:"Sovereignty",d:"Edge-first and deployable in air-gapped, contested, and field environments."}]},journal:{heading:"Field notes & dispatches",posts:[{slot:"jr-1",kind:"ANNOUNCEMENT",date:"JUN 2026",read:"3 MIN",media:"COVER / STEALTH",mediaId:"",title:"Social Machines AI emerges from stealth in Singapore",excerpt:"A new frontier lab building the compute, perception, and autonomy layer for the physical world \u2014 and the four companies behind it.",body:`Singapore has quietly become one of the most important nodes in the global AI buildout. Today we are introducing Social Machines AI \u2014 a frontier lab founded to build the layer most of the industry skips: the one that touches the physical world.
329
330The lab operates four companies as a single stack. SupaDirect provides the distributed compute fabric. Aiko turns intent into deployed software on top of it. XRAM Ai brings sensor fusion and digital twins to the defense and intelligence community. HorusXR reconstructs the world in three dimensions from ordinary camera networks.
331
332We are hiring across perception, infrastructure, and autonomy. If you want your work to ship into the field \u2014 not into a demo \u2014 we want to hear from you.`},{slot:"jr-2",kind:"RESEARCH",date:"MAY 2026",read:"8 MIN",media:"SPLAT / RECONSTRUCTION",mediaId:"",title:"Gaussian splatting for real-time situational awareness",excerpt:"How HorusXR turns ordinary camera networks into live, navigable 3D digital twins \u2014 and why splats beat point clouds at the edge.",body:`Point clouds are heavy, meshes are slow, and neither degrades gracefully at the edge. Gaussian splatting changes the calculus: photorealistic, navigable reconstructions that render in real time on commodity hardware.
333
334HorusXR uses splats as the substrate for situational awareness. Every camera in a network contributes to a single live digital twin \u2014 one you can fly through, measure, and track against. The result is a VMS that answers questions video walls cannot.
335
336This post walks through our pipeline, the trade-offs against NeRF-style approaches, and why edge deployment was the forcing function for every architectural decision.`},{slot:"jr-3",kind:"NEWS",date:"APR 2026",read:"2 MIN",media:"SUPADIRECT / PARTNERS",mediaId:"",title:"SupaDirect opens distributed inference to early partners",excerpt:"Sovereign, low-latency model hosting and streaming is now in limited release. Aiko ships with it for one-click app deployment.",body:`SupaDirect is now open to early partners. The offer is simple: sovereign, low-latency inference wherever your workloads live \u2014 cloud, on-prem, or air-gapped edge.
337
338Early partners get dedicated capacity, direct engineering support, and Aiko included for one-click application deployment onto the fabric.
339
340We are onboarding a small number of teams this quarter. If your workloads need to run close to the physical world, get in touch.`}]},newsletter:{heading:`Signals from
341the frontier.`,sub:"Research notes, product releases, and announcements \u2014 direct to your inbox. No noise."},ticker:`FRONTIER AI LAB
342SINGAPORE 01\xB017\u2032N 103\xB051\u2032E
343COMPUTE
344PERCEPTION
345AUTONOMY
346EST. 2026`,footer:{marquee:"SOCIAL MACHINES *AI*",cols:[{title:"HQ",lines:`SINGAPORE
34701\xB017\u2032N 103\xB051\u2032E`},{title:"PORTFOLIO",lines:`SUPADIRECT
348AIKO
349XRAM AI
350HORUSXR`},{title:"CONNECT",lines:`PRESS
351INVESTORS
352CAREERS
353GENERAL ENQUIRIES`},{title:"LEGAL",lines:`\xA9 2026 SOCIAL MACHINES AI
354ALL RIGHTS RESERVED`}]},seo:{title:"Social Machines AI \u2014 Machines that perceive the real world",description:"Social Machines is a frontier AI lab in Singapore building the compute, perception, and autonomy layer for the physical world.",keywords:"frontier AI lab, distributed compute, sensor fusion, digital twins, situational awareness, Singapore",canonical:"https://socialmachines.ai",aiSummary:"Social Machines AI is a Singapore-based frontier AI lab (est. 2026). It builds the compute, perception, and autonomy layer for the physical world through four companies: SupaDirect (distributed AI compute fabric), Aiko (AI app builder), XRAM Ai (defense and intelligence AI), and HorusXR (3D video management with Gaussian splatting).",geoRegion:"SG",geoPlacename:"Singapore",geoPosition:"1.2833;103.8500"},socials:[{label:"X",href:"#"},{label:"BLUESKY",href:"#"},{label:"INSTAGRAM",href:"#"},{label:"YOUTUBE",href:"#"},{label:"GITHUB",href:"#"}]}}mergeCms(stored){const d=this.cmsDefaults();if(!stored)return d;const o={};return Object.keys(d).forEach(k=>{stored[k]===void 0?o[k]=d[k]:Array.isArray(d[k])?o[k]=stored[k]:typeof d[k]=="object"?o[k]=Object.assign({},d[k],stored[k]):o[k]=stored[k]}),o}loadCms(){try{const pv=/cmsPreview/.test(location.hash)||/cmsPreview/.test(location.search);this._pv=pv;let raw=null;return pv&&(raw=localStorage.getItem("sm_cms_draft")),raw||(raw=localStorage.getItem("sm_cms_published")),this.mergeCms(raw?JSON.parse(raw):null)}catch{return this.cmsDefaults()}}rich(text,hi){const parts=String(text||"").split("*");return parts.length<3?String(text||""):parts.map((p,i)=>i%2?React.createElement("span",{key:i,style:hi},p):p)}buildLlmsTxt(d){const strip=s=>String(s||"").split("*").join("").replace(/\s+/g," ").trim(),seo=d.seo||{},base=String(seo.canonical||"https://socialmachines.ai").trim().replace(/\/+$/,"")||"https://socialmachines.ai",hid=x=>{const v=String(x.hidden==null?"":x.hidden).trim().toUpperCase();return v==="YES"||v==="TRUE"||v.slice(0,6)==="HIDDEN"},rows=(d.portfolio&&d.portfolio.rows||[]).filter(r=>!hid(r)),posts=(d.journal&&d.journal.posts||[]).filter(p=>!hid(p)),pillars=d.approach&&d.approach.pillars||[],cols=d.footer&&d.footer.cols||[],L=[];return L.push("# "+(strip(seo.title)||"Social Machines AI")),L.push(""),L.push("> "+strip(seo.aiSummary||seo.description)),L.push(""),L.push(strip((d.hero||{}).eyebrow)),L.push(strip((d.manifesto||{}
354).heading)),L.push(""),L.push("## Approach"),pillars.forEach(p=>L.push("- "+strip(p.t)+" \u2014 "+strip(p.d))),L.push(""),L.push("## Portfolio"),rows.forEach(r=>{const u=String(r.url||"").trim()||base+"/#portfolio";L.push("- ["+strip(r.name)+"]("+u+"): "+strip(r.tag)+". "+strip(r.desc))}),L.push(""),L.push("## Journal \u2014 "+strip((d.journal||{}).heading)),posts.forEach(p=>L.push("- ["+strip(p.title)+"]("+base+"/#journal): "+strip(p.date)+" \xB7 "+strip(p.kind)+" \u2014 "+strip(p.excerpt))),L.push(""),L.push("## Site map"),L.push("- [Hero]("+base+"/#top): "+(strip((d.hero||{}).sub)||"Introduction")),L.push("- [Manifesto]("+base+"/#manifesto): "+strip((d.manifesto||{}).aside)),L.push("- [Portfolio]("+base+"/#portfolio): "+rows.map(r=>strip(r.name)).join(", ")),L.push("- [Approach]("+base+"/#approach): "+pillars.map(p=>strip(p.t)).join(", ")),L.push("- [Journal]("+base+"/#journal): "+posts.length+" posts"),L.push("- [Newsletter]("+base+"/#newsletter): "+strip((d.newsletter||{}).sub)),L.push("- [llms.txt]("+base+"/llms.txt): this file"),L.push(""),L.push("## Organization"),cols.forEach(c=>{const lines=String(c.lines||"").split(`
355`).map(strip).filter(Boolean).join(" \xB7 ");lines&&L.push("- "+strip(c.title)+": "+lines)}),seo.keywords&&L.push("- Keywords: "+strip(seo.keywords)),(seo.geoPlacename||seo.geoPosition)&&L.push("- Geo: "+[strip(seo.geoPlacename),seo.geoRegion?"("+strip(seo.geoRegion)+")":"",strip(seo.geoPosition)].filter(Boolean).join(" ")),L.push(""),L.push("Generated "+new Date().toISOString().slice(0,10)+" \xB7 Format: https://llmstxt.org"),L.join(`
356`)}
356applySeo(){const seo=(this.state.cms||this.cmsDefaults()).seo||{};try{seo.title&&(document.title=seo.title);const up=(attr,name,content)=>{if(content==null||content==="")return;let el=document.head.querySelector("meta["+attr+'="'+name+'"]');el||(el=document.createElement("meta"),el.setAttribute(attr,name),document.head.appendChild(el)),el.setAttribute("content",content)};up("name","description",seo.description),up("name","keywords",seo.keywords),up("name","ai-summary",seo.aiSummary),up("name","geo.region",seo.geoRegion),up("name","geo.placename",seo.geoPlacename),up("name","geo.position",seo.geoPosition),up("name","ICBM",String(seo.geoPosition||"").replace(";",", ")),up("property","og:title",seo.title),up("property","og:description",seo.description),up("property","og:url",seo.canonical);let ln=document.head.querySelector('link[rel="canonical"]');ln||(ln=document.createElement("link"),ln.setAttribute("rel","canonical"),document.head.appendChild(ln)),seo.canonical&&ln.setAttribute("href",seo.canonical)}catch{}}initCanvas(){const c=this.canvasRef.current;if(!c)return;const ctx=c.getContext("2d"),N=88;let w=0,h=0,dpr=1;const pts=[],resize=()=>{dpr=Math.min(window.devicePixelRatio||1,2),w=c.clientWidth,h=c.clientHeight,c.width=w*dpr,c.height=h*dpr,ctx.setTransform(dpr,0,0,dpr,0,0)};this._onResize=resize,window.addEventListener("resize",resize),resize();for(let i=0;i<N;i++)pts.push({x:Math.random()*w,y:Math.random()*h,vx:(Math.random()-.5)*.22,vy:(Math.random()-.5)*.22,a:Math.random()<.11});const mouse={x:-9999,y:-9999};this._cmm=e=>{const r=c.getBoundingClientRect();mouse.x=e.clientX-r.left,mouse.y=e.clientY-r.top},window.addEventListener("mousemove",this._cmm);const TH=132,draw=()=>{ctx.clearRect(0,0,w,h);for(const p of pts){p.x+=p.vx,p.y+=p.vy,(p.x<0||p.x>w)&&(p.vx*=-1),(p.y<0||p.y>h)&&(p.vy*=-1);const dx=p.x-mouse.x,dy=p.y-mouse.y,dm=Math.hypot(dx,dy);dm<150&&dm>.01&&(p.x+=dx/dm*.7,p.y+=dy/dm*.7)}for(let i=0;i<N;i++)for(let j=i+1;j<N;j++){const a=pts[i],b=pts[j],d=Math.hypot(a.x-b.x,a.y-b.y);if(d<TH){const o=1-d/TH;ctx.strokeStyle=a.a||b.a?"rgba(255,74,28,"+o*.5+")":"rgba(255,255,255,"+o*.32+")",ctx.lineWidth=.6,ctx.beginPath(),ctx.moveTo(a.x,a.y),ctx.lineTo(b.x,b.y),ctx.stroke()}}for(const p of pts)ctx.beginPath(),ctx.arc(p.x,p.y,p.a?2.4:1.3,0,6.2832),ctx.fillStyle=p.a?"rgba(255,74,28,0.95)":"rgba(255,255,255,0.5)",ctx.fill();this._raf=requestAnimationFrame(draw)};draw()}initCursor(){const ring=this.ringRef.current,dot=this.dotRef.current,label=this.labelRef.current,glow=this.glowRef.current;if(!ring||!dot)return;let mx=window.innerWidth/2,my=window.innerHeight/2,rx=mx,ry=my;this._onMove=e=>{mx=e.clientX,my=e.clientY,dot.style.transform="translate3d("+mx+"px,"+my+"px,0) translate(-50%,-50%)",glow&&(glow.style.transform="translate3d("+mx+"px,"+my+"px,0) translate(-50%,-50%)");const t=e.target.closest?e.target.closest("[data-cursor]"):null;if(t){const lbl=t.getAttribute("data-cursor")||"";ring.style.width=lbl?"58px":"40px",ring.style.height=lbl?"58px":"40px",ring.style.borderColor="#FF4A1C",label&&(label.style.opacity=lbl?"1":"0",label.textContent=lbl)}else ring.style.width="26px",ring.style.height="26px",ring.style.borderColor="rgba(255,255,255,0.6)",label&&(label.style.opacity="0")},window.addEventListener("mousemove",this._onMove);const loop=()=>{rx+=(mx-rx)*.18,ry+=(my-ry)*.18,ring.style.transform="translate3d("+rx+"px,"+ry+"px,0) translate(-50%,-50%)",label&&(label.style.transform="translate3d("+rx+"px,"+ry+"px,0) translate(-50%, 26px)"),this._craf=requestAnimationFrame(loop)};loop()}initSplitFlap(){const host=this.flapRef.current;if(!host)return;const list=(((this.state.cms||this.cmsDefaults()).hero||{}).flapWords||[]).filter(x=>x&&x.w);list.length||list.push({w:"PERCEIVE",c:"#FF4A1C"});const WORDS=list.map(x=>String(x.w).toUpperCase()),COLORS=list.map(x=>x.c||"#FF4A1C"),GLYPHS="ABCDEFGHIJKLMNOPQRSTUVWXYZ",N=Math.max.apply(null,WORDS.map(w=>w.length)),pad=w=>(w+Array(N+1).join(" ")).slice(0,N);host.textContent="",host.style.display="inline-flex";const cs=getComputedStyle(host),fpx=parseFloat(cs.fontSize)||100,ls=(parseFloat(cs.letterSpacing)||0)/fpx,_cv=document.createElement("canvas").getContext("2d");_cv.font=(cs.fontStyle||"normal")+" "+(cs.fontWeight||"800")+" "+cs.fontSize+" "+cs.fontFamily;const widthEm=ch=>
356ch===" "||!ch?0:_cv.measureText(ch).width/fpx+ls,cells=[];for(let i=0;i<N;i++){const cell=document.createElement("span");cell.style.cssText="display:inline-block; overflow:hidden; text-align:center; transform-origin:center; backface-visibility:hidden; transition:transform .13s cubic-bezier(.3,.8,.4,1), width .26s cubic-bezier(.4,0,.2,1), color .35s ease;";const first=pad(WORDS[0]),ch=first[i]===" "?"\xA0":first[i];cell.textContent=ch,cell.style.width=(ch==="\xA0"?0:widthEm(ch))+"em",cell.style.color=COLORS[0],host.appendChild(cell),cells.push(cell)}this._flapT=[];const T0=fn=>{const id=setTimeout(fn,12);return this._flapT.push(id),id},show=(cell,ch)=>{cell.textContent=ch===" "?"\xA0":ch,cell.style.transform="rotateX(-70deg)",T0(()=>{cell.style.transform="rotateX(0deg)"})},state=cells.map(()=>({remaining:0,settled:!0,target:"P"}));let phase="hold",hold=18,wi=0;const startRoll=()=>{wi=(wi+1)%WORDS.length;const target=pad(WORDS[wi]),color=COLORS[wi];state.forEach((st,i)=>{const blank=target[i]===" ";st.target=target[i],cells[i].style.width=blank?"0em":widthEm(target[i])+"em",cells[i].style.color=color,blank?(st.remaining=0,st.settled=!0,cells[i].textContent="\xA0"):(st.remaining=4+Math.floor(Math.random()*5)+i,st.settled=!1)}),phase="rolling"},tick=()=>{if(phase==="rolling"){let allDone=!0;state.forEach((st,i)=>{st.settled||(st.remaining>0?(show(cells[i],GLYPHS[Math.floor(Math.random()*GLYPHS.length)]),st.remaining--,allDone=!1):(show(cells[i],st.target),st.settled=!0))}),allDone&&(phase="hold",hold=18)}else--hold<=0&&startRoll()};this._flapInt=setInterval(tick,95)}initReveal(){const root=this.rootRef.current||document,els=Array.prototype.slice.call(root.querySelectorAll("[data-reveal]")),reveal=el=>{if(el.dataset.smShown)return;el.dataset.smShown="1";const d=parseInt(el.getAttribute("data-delay")||"0",10);el.style.transitionDelay=d+"ms",el.style.opacity="1",el.style.transform="none"};this._io=new IntersectionObserver(ents=>{ents.forEach(en=>{en.isIntersecting&&(reveal(en.target),this._io.unobserve(en.target))})},{threshold:.08,rootMargin:"0px 0px -6% 0px"}),els.forEach(el=>this._io.observe(el));const sweep=()=>{const vh=window.innerHeight||800;els.forEach(el=>{const r=el.getBoundingClientRect();r.top<vh*.94&&r.bottom>0&&reveal(el)})};requestAnimationFrame(sweep),setTimeout(sweep,400),this._onScroll2=sweep,window.addEventListener("scroll",sweep,{passive:!0}),setTimeout(()=>els.forEach(reveal),2600)}initParallax(){const root=this.rootRef.current||document,els=Array.prototype.slice.call(root.querySelectorAll("[data-parallax]"));this._onScroll=()=>{const y=window.scrollY||window.pageYOffset;
356els.forEach(el=>{const f=parseFloat(el.getAttribute("data-parallax")||"0");el.style.transform="translate3d(0,"+y*f+"px,0)"})},window.addEventListener("scroll",this._onScroll,{passive:!0})}subscribe(e){e&&e.preventDefault&&e.preventDefault(),this.setState({subscribed:!0})}iconStyle(path,evenodd){const url='url("'+("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black'"+(evenodd?" fill-rule='evenodd' clip-rule='evenodd'":"")+" d='"+path+"'/></svg>")+'")';return{width:"19px",height:"19px",display:"block",backgroundColor:"currentColor",WebkitMaskImage:url,maskImage:url,WebkitMaskRepeat:"no-repeat",maskRepeat:"no-repeat",WebkitMaskPosition:"center",maskPosition:"center",WebkitMaskSize:"contain",maskSize:"contain"}}renderVals(){const cms=this.state.cms||this.cmsDefaults();let lib=Array.isArray(cms.media)?cms.media:[];if(!lib.length)try{lib=JSON.parse(localStorage.getItem("sm_cms_media")||"[]")}catch{}const mediaProps=id=>{const m=lib.find(x=>x.id===id||x.name===id),src=m&&(m.dataUrl||m.url),base={position:"absolute",top:0,left:0,width:"100%",height:"100%",objectFit:"cover",display:"block"};return m&&src&&/^image\//.test(m.type)?{imgStyle:Object.assign({}
356,base,{backgroundImage:'url("'+src+'")',backgroundSize:"cover",backgroundPosition:"center"}),vid:void 0,vidStyle:{display:"none"}}:m&&src&&/^video\//.test(m.type)?{vid:src,vidStyle:base,imgStyle:{display:"none"}}:{imgStyle:{display:"none"},vid:void 0,vidStyle:{display:"none"}}},soonBase={position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:3,background:"rgba(11,11,12,0.62)",backdropFilter:"blur(2px)",pointerEvents:"none"},isHidden=r=>{const v=String(r.hidden==null?"":r.hidden).trim().toUpperCase();return v==="YES"||v==="TRUE"||v.slice(0,6)==="HIDDEN"},rows=(cms.portfolio.rows||[]).filter(r=>!isHidden(r)).map((r,i)=>{const soon=r.comingSoon===!0||r.comingSoon==="yes"||r.comingSoon==="true";return Object.assign({},r,{idx:("0"+(i+1)).slice(-2),slot:r.slot||"pf-"+i,tags:String(r.tags||"").split(",").map(s=>s.trim()).filter(Boolean),cursor:soon?"COMING SOON":r.url?"VISIT \u2197":"EXPLORE",open:()=>{!soon&&r.url&&window.open(r.url,"_blank")},comingSoon:soon,comingSoonStyle:soon?soonBase:{display:"none"}},mediaProps(r.mediaId))}),pillars=cms.approach.pillars||[],posts=(cms.journal.posts||[]).map((p,i)=>({p,i})).filter(x=>!isHidden(x.p)).map(x=>Object.assign({},x.p,{slot:x.p.slot||"jr-"+x.i,openArticle:()=>this.setState({openPost:x.i})},mediaProps(x.p.mediaId))),op=this.state.openPost,rawPost=op>=0?(cms.journal.posts||[])[op]:null,curPost=rawPost?Object.assign({},rawPost,mediaProps(rawPost.mediaId),{body:rawPost.body||rawPost.excerpt}):{},X_PATH="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",ICON={X:X_PATH,BLUESKY:"M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.479 0-.688-.139-1.86-.902-2.203-.659-.299-1.664-.621-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z",INSTAGRAM:"M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07c-1.28.06-2.15.26-2.91.56-.79.31-1.46.72-2.13 1.38C1.35 2.66.94 3.33.63 4.12c-.3.76-.5 1.63-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.31.79.72 1.46 1.38 2.13.67.66 1.34 1.07 2.13 1.38.76.3 1.63.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.28-.06 2.15-.26 2.91-.56.79-.31 1.46-.72 2.13-1.38.66-.67 1.07-1.34 1.38-2.13.3-.76.5-1.63.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.38-2.13C21.34 1.35 20.67.94 19.88.63c-.76-.3-1.63-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 12 18.16 6.16 6.16 0 0 0 12 5.84zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-10.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z",YOUTUBE:"M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6z",GITHUB:"M12 .5C5.37.5 0 5.78 0 12.29c0 5.2 3.44 9.6 8.21 11.16.6.11.82-.26.82-.58 0-.29-.01-1.04-.02-2.05-3.34.72-4.04-1.61-4.04-1.61-.55-1.38-1.34-1.75-1.34-1.75-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5.99.11-.77.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24
356-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.66.24 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.49 5.92.43.37.81 1.1.81 2.22 0 1.61-.01 2.9-.01 3.29 0 .32.22.7.83.58A12.01 12.01 0 0 0 24 12.29C24 5.78 18.63.5 12 .5z"},socials=(cms.socials||[]).map(s=>({label:s.label,href:s.href||"#",iconStyle:this.iconStyle(ICON[s.label]||X_PATH,s.label==="INSTAGRAM")})),marquee=[0,1,2,3,4,5,6,7],hi={color:"#FF4A1C"},hiHead={fontFamily:"'Archivo Expanded',sans-serif",fontWeight:700,color:"#FF4A1C"},tick=String(cms.ticker||"").split(`
357`).map(s=>s.trim()).filter(Boolean),pfFooterLines=rows.map(r=>String(r.name||"").trim().toUpperCase()).filter(Boolean).join(`
358`),fCols=((cms.footer||{}).cols||[]).map(c=>String(c.title||"").trim().toUpperCase()==="PORTFOLIO"?Object.assign({},c,{lines:pfFooterLines}):c),fMarquee=this.rich((cms.footer||{}).marquee||"SOCIAL MACHINES *AI*",{color:"#FF4A1C"}),llmsText=cms.seo&&String(cms.seo.llmsTxt||"").trim()?cms.seo.llmsTxt:this.buildLlmsTxt(cms);return{rows,pillars,posts,socials,marquee,tick,fCols,fMarquee,postOpen:!!rawPost,curPost,closeArticle:()=>this.setState({openPost:-1}),llmsOpen:!!this.state.llms,llmsText,copyLabel:this.state.copied?"COPIED \u2713":"COPY",openLlms:e=>{e&&e.preventDefault&&e.preventDefault(),location.hash="llms.txt"},closeLlms:()=>{location.hash=this._pv?"cmsPreview":""},copyLlms:()=>{try{navigator.clipboard.writeText(llmsText)}catch{}this.setState({copied:!0})},heroEyebrow:cms.hero.eyebrow,heroLine1:cms.hero.line1,heroLine2Tail:cms.hero.line2Tail,heroLine3:cms.hero.line3,heroSub:cms.hero.sub,manifestoAside:this.rich(cms.manifesto.aside,hi),manifestoHeading:this.rich(cms.manifesto.heading,hiHead),portfolioHeading:cms.portfolio.heading,journalHeading:cms.journal.heading,newsHeading:cms.newsletter.heading,newsSub:cms.newsletter.sub,subscribed:this.state.subscribed,notSubscribed:!this.state.subscribed,subscribe:e=>this.subscribe(e),emailRef:this.emailRef,rootRef:this.rootRef,canvasRef:this.canvasRef,ringRef:this.ringRef,glowRef:this.glowRef,dotRef:this.dotRef,labelRef:this.labelRef,flapRef:this.flapRef}}}
359
360</script>
vendor: 1 bytes, line 360
360
361<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a45d56a9daf9cdbd',t:'MTc5MTIxMjg3Mw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
361</body>
362</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.