You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 56dc177
Browse filesBrowse the repository at this point in the historyBrowse files
It was a dark page that sat still. Four things move now, and each one is
enhancement over markup that is already complete and already readable — the
module turns itself off entirely under prefers-reduced-motion and the page is
exactly the page without it.
The hero's terminal runs its session. The transcript is in the HTML in full;
the script takes it away and gives it back at the speed it happened at, which
for a command-line tool is the one piece of motion on the page that is also
the product. It waits until it is scrolled to, because a terminal that
finished typing before the visitor arrived has only ever shown them a picture.
The providers move. Forty-six endpoints that were previously one link — the
first question anyone has is whether theirs works, and the answer was a
hyperlink. Two rows in opposite directions: one direction reads as a
slideshow, two reads as a field. Each track holds its names twice and slides
by exactly half its width, so the loop has no seam and needs no JavaScript.
Sections arrive as they are scrolled to, and the class stays on — a page that
re-animates every time you scroll back up is a page nobody can read twice.
A light follows the pointer across the lattice. One listener per grid, and all
it writes is two custom properties on the cell under the cursor; the gradient
is in the stylesheet, so it never touches layout.
Also a faint grid under the hero light, and a monospace index above each
statement, which is most of what makes a page like this read as built rather
than written.
One bug worth naming: the marquee's closing line sat directly on the moving
row. sets and is more specific than the
rule meant to push it down, so the margin was being
silently zeroed. Measured rather than eyeballed — the screenshot only said
cramped, the measurement said the gap was exactly 0, which is what pointed
at specificity rather than spacing.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: website/index.html
+72-36Lines changed: 72 additions & 36 deletions
Original file line number
Diff line number
Diff line change
@@ -49,6 +49,7 @@
49
49
and holds still for anyone who asked for less motion.
50
50
-->
51
51
<divclass="glow" aria-hidden="true"></div>
52
+
<divclass="grid-lines" aria-hidden="true"></div>
52
53
53
54
<divclass="wrap">
54
55
<aclass="badge" href="https://docs.opencli.ai">
@@ -82,23 +83,52 @@ <h1>The agent for the models<br />that <em>do not have one</em></h1>
82
83
The session is the model check from the documentation: six rows,
83
84
three planted problems, and those are the three.
84
85
-->
85
-
<divclass="terminal" role="img"
86
+
<divclass="terminal" data-terminalrole="img"
86
87
aria-label="A terminal running opencli against a six-row invoice file: it reads the rules and the rows, then reports three findings with their row numbers.">
<prearia-hidden="true"><spanclass="p">$</span> opencli exec <spanclass="s">"use the spreadsheet-review skill on invoices.csv"</span>
92
+
<!-- One span per line and no newlines between them: the lines are
93
+
blocks, so a line can be faded in without the ones under it
94
+
moving. The transcript is complete in the markup — the script
95
+
takes it away and gives it back at the speed it happened at. -->
96
+
<prearia-hidden="true"><spanclass="cmd"><spanclass="p">$</span><spandata-type>opencli exec "use the spreadsheet-review skill on invoices.csv"</span><spanclass="caret"></span></span><spandata-lineclass="gap"></span><spandata-line><spanclass="t">read</span> rules.md 3 rules</span><spandata-line><spanclass="t">read</span> invoices.csv 6 rows</span><spandata-lineclass="gap"></span><spandata-line><spanclass="f">row 2</span> INV-2202 11,800 over 10,000 with no PO number</span><spandata-line><spanclass="f">row 5</span> INV-2205 — no amount</span><spandata-line><spanclass="f">row 6</span> INV-2206 2026-13-02 month 13 is not a date</span><spandata-lineclass="gap"></span><spandata-line><spanclass="d">3 findings in 6 rows.</span></span></pre>
97
+
</div>
98
+
</div>
99
+
</section>
92
100
93
-
<spanclass="t">read</span> rules.md 3 rules
94
-
<spanclass="t">read</span> invoices.csv 6 rows
101
+
<!--
102
+
The providers, moving. This list is the answer to the first question
103
+
anybody has — "will it work with mine" — and it was a link. Each of
104
+
these was asked for its model list without a key before it went in.
95
105
96
-
<spanclass="f">row 2</span> INV-2202 11,800 over 10,000 with no PO number
97
-
<spanclass="f">row 5</span> INV-2205 — no amount
98
-
<spanclass="f">row 6</span> INV-2206 2026-13-02 month 13 is not a date
106
+
Two rows in opposite directions: one direction reads as a slideshow,
107
+
two reads as a field. The track holds the names twice and slides by
108
+
half its width, so the loop has no seam and no JavaScript.
109
+
-->
110
+
<sectionclass="providers" data-reveal>
111
+
<divclass="wrap">
112
+
<spanclass="kicker">00 — Reach</span>
113
+
<p>
114
+
One protocol, not a list of integrations. Anything answering
115
+
<code>/v1/chat/completions</code> the way OpenAI does can be pointed at — these were
116
+
each asked for their model list, without a key, before they went on this page.
117
+
</p>
118
+
</div>
99
119
100
-
<spanclass="d">3 findings in 6 rows.</span></pre>
101
-
</div>
120
+
<divclass="marquee" aria-hidden="true">
121
+
<divclass="track"><span>Ollama</span><span>LM Studio</span><span>llama.cpp</span><span>LocalAI</span><span>Jan</span><span>Xinference</span><span>KoboldCpp</span><span>llamafile</span><span>vLLM</span><span>SGLang</span><span>Text Generation Inference</span><span>NVIDIA NIM</span><span>LiteLLM</span><span>Fireworks</span><span>Together</span><span>Groq</span><span>DeepInfra</span><span>Baseten</span><span>Novita</span><span>Hyperbolic</span><span>Nebius</span><span>Cerebras</span><span>SambaNova</span><span>Featherless</span><span>Chutes</span><span>Hugging Face</span><span>OpenRouter</span><span>Vercel AI Gateway</span><span>Perplexity</span><span>Ollama</span><span>LM Studio</span><span>llama.cpp</span><span>LocalAI</span><span>Jan</span><span>Xinference</span><span>KoboldCpp</span><span>llamafile</span><span>vLLM</span><span>SGLang</span><span>Text Generation Inference</span><span>NVIDIA NIM</span><span>LiteLLM</span><span>Fireworks</span><span>Together</span><span>Groq</span><span>DeepInfra</span><span>Baseten</span><span>Novita</span><span>Hyperbolic</span><span>Nebius</span><span>Cerebras</span><span>SambaNova</span><span>Featherless</span><span>Chutes</span><span>Hugging Face</span><span>OpenRouter</span><span>Vercel AI Gateway</span><span>Perplexity</span></div>
<ahref="https://docs.opencli.ai/getting-started/providers">The whole list, with what
130
+
each one is</a> — including which of them give something away for free.
131
+
</p>
102
132
</div>
103
133
</section>
104
134
@@ -110,8 +140,9 @@ <h1>The agent for the models<br />that <em>do not have one</em></h1>
110
140
and needs no last-row or last-column special cases.
111
141
-->
112
142
113
-
<sectionclass="statement">
143
+
<sectionclass="statement"data-reveal>
114
144
<divclass="wrap">
145
+
<spanclass="kicker">01 — Shapes</span>
115
146
<h2>The same agent in <em>three shapes</em></h2>
116
147
<p>
117
148
A terminal program, a desktop app, and a local web UI. All three run on your machine
@@ -121,26 +152,27 @@ <h2>The same agent in <em>three shapes</em></h2>
121
152
</section>
122
153
123
154
<divclass="lattice two">
124
-
<divclass="cell">
155
+
<divclass="cell"data-reveal>
125
156
<h3>Bring your own model</h3>
126
157
<p>Ollama, LM Studio, vLLM, llama.cpp, or any hosted endpoint that speaks the OpenAI API. Declare it in one config file and it appears in the picker.</p>
127
158
</div>
128
-
<divclass="cell">
159
+
<divclass="cell"data-reveal>
129
160
<h3>Nothing phones home</h3>
130
161
<p>No built-in gateway, no telemetry account, no key baked into the binary. What it talks to is what you configured.</p>
131
162
</div>
132
-
<divclass="cell">
163
+
<divclass="cell"data-reveal>
133
164
<h3>It asks before it acts</h3>
134
165
<p>Commands and file writes are shown before they run, with a sandbox underneath. You choose how much it may do unattended.</p>
135
166
</div>
136
-
<divclass="cell">
167
+
<divclass="cell"data-reveal>
137
168
<h3>Organised like an office</h3>
138
169
<p>A <em>department</em> is a directory with standing instructions. A <em>bot</em> is a chat inside one, with a job. A <em>duty</em> comes round on its own and asks you when it is stuck.</p>
139
170
</div>
140
171
</div>
141
172
142
-
<sectionclass="statement">
173
+
<sectionclass="statement"data-reveal>
143
174
<divclass="wrap">
175
+
<spanclass="kicker">02 — Departments</span>
144
176
<h2>It is not only <em>for code</em></h2>
145
177
<p>
146
178
The agent reads files, runs commands and edits things. That is as true of a folder of
@@ -152,39 +184,39 @@ <h2>It is not only <em>for code</em></h2>
152
184
</section>
153
185
154
186
<divclass="lattice three compact">
155
-
<divclass="cell">
187
+
<divclass="cell"data-reveal>
156
188
<h3>Finance</h3>
157
189
<p>Reconcile <code>ledger.csv</code> against <code>statement.csv</code>; chase what is overdue</p>
158
190
</div>
159
-
<divclass="cell">
191
+
<divclass="cell"data-reveal>
160
192
<h3>Support</h3>
161
193
<p>Answer what came in; group questions by what they are really about</p>
162
194
</div>
163
-
<divclass="cell">
195
+
<divclass="cell"data-reveal>
164
196
<h3>Operations</h3>
165
197
<p>List every order still unshipped, and how long it has waited</p>
166
198
</div>
167
-
<divclass="cell">
199
+
<divclass="cell"data-reveal>
168
200
<h3>Marketing</h3>
169
201
<p>Turn notes into a week of posts; group contacts by what they bought</p>
170
202
</div>
171
-
<divclass="cell">
203
+
<divclass="cell"data-reveal>
172
204
<h3>People & admin</h3>
173
205
<p>Read applicants against a role; pull decisions and owners out of notes</p>
174
206
</div>
175
-
<divclass="cell">
207
+
<divclass="cell"data-reveal>
176
208
<h3>Legal</h3>
177
209
<p>Compare their draft against our terms, clause by clause, quoting both</p>
178
210
</div>
179
-
<divclass="cell">
211
+
<divclass="cell"data-reveal>
180
212
<h3>Research</h3>
181
213
<p>Where studies agree, where they conflict, and why</p>
182
214
</div>
183
-
<divclass="cell">
215
+
<divclass="cell"data-reveal>
184
216
<h3>Clinical records</h3>
185
217
<p>What is recorded, and what a clinician should look at, quoted</p>
186
218
</div>
187
-
<divclass="cell">
219
+
<divclass="cell"data-reveal>
188
220
<h3>Engineering</h3>
189
221
<p>Read a service and report what would give a wrong answer</p>
190
222
</div>
@@ -201,8 +233,9 @@ <h3>Engineering</h3>
201
233
</div>
202
234
</section>
203
235
204
-
<sectionclass="statement">
236
+
<sectionclass="statement"data-reveal>
205
237
<divclass="wrap">
238
+
<spanclass="kicker">03 — Models</span>
206
239
<h2>Which models <em>actually work</em></h2>
207
240
<p>
208
241
The question nobody else answers. Calling tools is what separates a model that can do
<p>Given a structured way to read a file, a model not trained towards agentic work will shell out anyway. That is a gap in the models, and no interface closes it.</p>
261
295
</div>
262
-
<divclass="cell">
296
+
<divclass="cell"data-reveal>
263
297
<h3>The builds are not signed</h3>
264
298
<p>No Apple or Microsoft certificate. Your operating system will warn you, and it is right to — it cannot tell who built them. The <ahref="/download.html">download page</a> says what to do.</p>
265
299
</div>
266
-
<divclass="cell">
300
+
<divclass="cell"data-reveal>
267
301
<h3>Scheduled work needs the app open</h3>
268
302
<p>This is a local agent, not a server. Anything that must fire while the machine sleeps belongs in the operating system's scheduler.</p>
269
303
</div>
270
-
<divclass="cell">
304
+
<divclass="cell"data-reveal>
271
305
<h3>Token counts are estimated</h3>
272
306
<p>The tokenizer belongs to the model, and this runs models it has never seen. Everything downstream of the count is approximate.</p>
273
307
</div>
274
-
<divclass="cell wide">
308
+
<divclass="cell wide"data-reveal>
275
309
<h3>A run may write anywhere inside its directory</h3>
276
310
<p>The sandbox's writable root <em>is</em> that directory — which is why a conversation opens in a workspace rather than your home folder, and why runs outside a department's directory are held until you allow the place by name.</p>
277
311
</div>
278
312
</div>
279
313
280
-
<sectionclass="statement">
314
+
<sectionclass="statement"data-reveal>
281
315
<divclass="wrap">
316
+
<spanclass="kicker">05 — Compared</span>
282
317
<h2>How it <em>compares</em></h2>
283
318
<p>Not a scorecard. These are different tools, and the row that matters is the first one.</p>
284
319
</div>
285
320
</section>
286
321
287
-
<sectionclass="tight">
322
+
<sectionclass="tight"data-reveal>
288
323
<divclass="wrap">
289
324
<table>
290
325
<thead>
@@ -343,8 +378,9 @@ <h2>How it <em>compares</em></h2>
0 commit comments