-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhow.html
More file actions
429 lines (411 loc) · 28 KB
/
Copy pathhow.html
File metadata and controls
429 lines (411 loc) · 28 KB
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>frame - how</title>
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<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=Chakra+Petch:wght@700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
* { box-sizing: border-box; }
html, body {
margin: 0;
background: #ffffff;
color: #000000;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
body {
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 84px;
background: linear-gradient(to bottom, #ffffff 55%, rgba(255, 255, 255, 0));
pointer-events: none;
z-index: 6;
}
.brand {
position: fixed;
top: max(8px, env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px));
margin: 0;
z-index: 8;
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
color: #000000;
font-size: clamp(18px, 5vw, 40px);
letter-spacing: 0.08em;
line-height: 1;
}
.home-link { color: inherit; text-decoration: none; }
.hl-orange, .hl-gray, .hl-green, .hl-yellow, .hl-xpblue,
.hl-blue-w, .hl-purple, .hl-black-w, .hl-litegray, .hl-rose {
color: #000000;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 0.02em 0.12em;
}
.no-pl { padding-left: 0 !important; }
.no-pr { padding-right: 0 !important; }
.hl-orange { background: #ff8a00; }
.hl-gray { background: #d0d0d0; }
.hl-green { background: #4caf50; }
.hl-yellow { background: #ffe600; }
.hl-xpblue { background: #245edc; }
.hl-blue-w { background: #1a73e8; color: #ffffff; }
.hl-purple { background: #9b59b6; }
.hl-black-w { background: #000000; color: #ffffff; }
.hl-litegray { background: #e6e6e6; }
.hl-rose { background: #ffb3c1; }
.corner {
position: fixed;
width: clamp(28px, 6vw, 56px);
height: clamp(28px, 6vw, 56px);
border-color: #000000;
border-style: solid;
border-width: 0;
z-index: 10;
pointer-events: none;
}
.corner.tl { top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px); border-top-width: 2.5px; border-left-width: 2.5px; }
.corner.tr { top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); border-top-width: 2.5px; border-right-width: 2.5px; }
.corner.bl { bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); border-bottom-width: 2.5px; border-left-width: 2.5px; }
.corner.br { bottom: env(safe-area-inset-bottom, 0px); right: env(safe-area-inset-right, 0px); border-bottom-width: 2.5px; border-right-width: 2.5px; }
main {
max-width: 760px;
margin: 0 auto;
padding: max(88px, calc(env(safe-area-inset-top, 0px) + 72px)) max(16px, env(safe-area-inset-right, 0px), clamp(16px, 6vw, 48px)) max(96px, calc(env(safe-area-inset-bottom, 0px) + 64px)) max(16px, env(safe-area-inset-left, 0px), clamp(16px, 6vw, 48px));
}
.sec { margin: 0 0 clamp(40px, 7vh, 64px); }
.sec-head {
display: flex;
align-items: flex-end;
column-gap: clamp(12px, 2vw, 20px);
margin-left: calc(-1 * clamp(24px, 6vw, 96px));
padding-left: 0;
}
.sec-head h2 {
margin: 0;
flex: 0 1 auto;
text-align: left;
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: clamp(1.4rem, 4.5vw, 2rem);
letter-spacing: 0.02em;
line-height: 1.15;
}
.sec-head .hline {
flex: 1 1 24px;
min-width: 24px;
height: 0;
border-top: 1px solid #000000;
margin-bottom: 0;
}
.sec-body {
border-right: 1px solid #000000;
text-align: left;
padding: clamp(16px, 2.6vh, 24px) clamp(16px, 3vw, 28px) clamp(24px, 3.8vh, 36px) 0;
}
.lede .sec-head h2 {
font-size: clamp(2rem, 7vw, 3.2rem);
line-height: 1.05;
}
p {
font-size: clamp(1.02rem, 2.4vw, 1.18rem);
font-weight: 400;
line-height: 1.7;
margin: 0 0 clamp(14px, 2vh, 20px);
}
p.lead {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: clamp(1.15rem, 3vw, 1.5rem);
line-height: 1.35;
letter-spacing: 0.01em;
margin: 0 0 clamp(16px, 2.6vh, 24px);
}
.sec-body > *:last-child { margin-bottom: 0; }
p.spaced { margin-bottom: clamp(10px, 1.4vh, 14px); }
ul {
font-size: clamp(1.02rem, 2.4vw, 1.18rem);
line-height: 1.7;
margin: 0 0 clamp(16px, 2.4vh, 24px);
padding-left: 1.3em;
list-style-position: outside;
}
ul li { margin-bottom: 6px; }
.features {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(12px, 1.8vw, 18px);
margin-top: clamp(6px, 1.2vh, 12px);
}
.feat {
border: 1px solid #e6e6e6;
border-radius: 14px;
padding: clamp(14px, 2vw, 18px);
display: flex;
flex-direction: column;
gap: 8px;
background: #ffffff;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.feat:hover { border-color: #000000; transform: translateY(-2px); }
.feat .ic {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #f2f2f2;
color: #000000;
flex: 0 0 auto;
}
.feat .ic svg { width: 18px; height: 18px; display: block; }
@keyframes icon-rainbow { 0%{color:#ff004c} 17%{color:#ff8a00} 33%{color:#ffe600} 50%{color:#25d366} 67%{color:#00e0ff} 83%{color:#a34bff} 100%{color:#ff004c} }
@keyframes icon-ryg { 0%{color:#e11d2a} 33%{color:#e0a800} 66%{color:#17a34a} 100%{color:#e11d2a} }
.ic.ic-rainbow { animation: icon-rainbow 6s linear infinite; }
.ic.ic-ryg { animation: icon-ryg 3s linear infinite; }
.feat h3 {
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: clamp(0.98rem, 2vw, 1.08rem);
letter-spacing: 0.01em;
line-height: 1.2;
margin: 0;
}
.feat p {
font-size: clamp(0.88rem, 1.8vw, 0.98rem);
line-height: 1.5;
color: #444444;
margin: 0;
}
.footer-note {
text-align: center;
margin: clamp(48px, 8vh, 80px) 0 0;
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: clamp(1.2rem, 3.5vw, 1.6rem);
line-height: 1.4;
}
.site-footer {
border-top: 1px solid #000000;
padding: clamp(40px, 7vh, 88px) clamp(24px, 6vw, 64px) clamp(64px, 10vh, 120px);
}
.foot-inner {
max-width: 1180px;
margin: 0 auto;
}
.foot-kicker {
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: clamp(0.8rem, 2vw, 0.95rem);
margin: 0 0 clamp(12px, 2vh, 18px);
}
.foot-tag {
max-width: 620px;
font-size: clamp(1.05rem, 2.6vw, 1.35rem);
font-weight: 400;
line-height: 1.6;
margin: 0 0 clamp(28px, 5vh, 48px);
}
.foot-links {
display: flex;
flex-wrap: wrap;
gap: clamp(16px, 3vw, 36px);
margin: 0 0 clamp(36px, 7vh, 72px);
}
.flink {
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: clamp(0.85rem, 2vw, 1rem);
color: #000000;
cursor: pointer;
text-decoration: none;
opacity: 0.72;
transition: opacity 0.15s ease;
}
.flink:hover { opacity: 1; }
.foot-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px 24px;
padding-top: clamp(16px, 2.4vh, 22px);
border-top: 1px solid #000000;
font-size: clamp(0.82rem, 1.9vw, 0.95rem);
letter-spacing: 0.02em;
opacity: 0.72;
}
/* mobile: safe-area, overflow, touch */
html { overflow-x: hidden; }
@media (max-width: 480px) {
.row { grid-template-columns: minmax(72px, 34%) 1fr !important; }
}
@media (max-width: 480px) {
.sec-head { margin-left: 0; }
.features { grid-template-columns: 1fr; }
}
/* docs mobile */
</style>
</head>
<body>
<div class="topbar"></div>
<h1 class="brand"><a class="home-link" href="/">FRAME</a></h1>
<span class="corner tl"></span>
<span class="corner tr"></span>
<span class="corner bl"></span>
<span class="corner br"></span>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<defs>
<g id="i-base" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></g>
<symbol id="globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></symbol>
<symbol id="cloud" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-7.97A6 6 0 0 0 6 9.5 3.5 3.5 0 0 0 7 18Z"/></symbol>
<symbol id="brain" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5a3 3 0 0 0-5.6-1.5A3 3 0 0 0 4 9a3 3 0 0 0 1 5.8A2.6 2.6 0 0 0 9 19a2.5 2.5 0 0 0 3-2.4Z"/><path d="M12 5a3 3 0 0 1 5.6-1.5A3 3 0 0 1 20 9a3 3 0 0 1-1 5.8A2.6 2.6 0 0 1 15 19a2.5 2.5 0 0 1-3-2.4Z"/></symbol>
<symbol id="network" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8 6h8M7.5 8l3.5 8M16.5 8l-3.5 8"/></symbol>
<symbol id="key" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="4"/><path d="M11 11l9 9M17 17l2-2M14 14l2-2"/></symbol>
<symbol id="user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/></symbol>
<symbol id="idcard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8" cy="11" r="2"/><path d="M5.5 16c.8-1.6 4.2-1.6 5 0M14 10h4M14 14h4"/></symbol>
<symbol id="blocks" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></symbol>
<symbol id="monitor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></symbol>
<symbol id="refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12a8 8 0 0 1 13.5-5.5L20 9"/><path d="M20 4v5h-5"/><path d="M20 12a8 8 0 0 1-13.5 5.5L4 15"/><path d="M4 20v-5h5"/></symbol>
<symbol id="folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></symbol>
<symbol id="bolt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 4 14h7l-2 8 9-12h-7z"/></symbol>
<symbol id="database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></symbol>
<symbol id="layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></symbol>
<symbol id="map" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2z"/><path d="M9 4v14M15 6v14"/></symbol>
<symbol id="collab" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="5"/><circle cx="15" cy="12" r="5"/></symbol>
<symbol id="plug" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2v6M15 2v6"/><path d="M7 8h10v3a5 5 0 0 1-10 0z"/><path d="M12 16v6"/></symbol>
<symbol id="search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></symbol>
<symbol id="shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 5-3.5 8-7 9-3.5-1-7-4-7-9V6z"/></symbol>
<symbol id="verified" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></symbol>
<symbol id="document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4M9 12h6M9 16h6"/></symbol>
<symbol id="home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7"/><path d="M6 10v10h12V10"/></symbol>
<symbol id="rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c3 1 5 4.5 5 8.5L14 15h-4l-3-3.5C7 7.5 9 4 12 3z"/><circle cx="12" cy="9" r="1.4"/><path d="M9 15l-3 3M15 15l3 3M10 18c-1 1-1 3-1 3s2 0 3-1"/></symbol>
<symbol id="link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 15l6-6"/><path d="M8 12l-2 2a3 3 0 0 0 4 4l2-2M16 12l2-2a3 3 0 0 0-4-4l-2 2"/></symbol>
<symbol id="palette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a9 9 0 1 0 0 18c1.3 0 2-1 2-2s-.8-1-.8-2 .9-1.5 2-1.5H17a3 3 0 0 0 3-3c0-4-3.6-7.5-8-7.5z"/><circle cx="8" cy="11" r="1"/><circle cx="12" cy="8" r="1"/><circle cx="16" cy="11" r="1"/></symbol>
<symbol id="gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></symbol>
<symbol id="chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16h16"/><path d="M8 16v-4M12 16V8M16 16v-7"/></symbol>
<symbol id="eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></symbol>
<symbol id="flask" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h6M10 3v6l-5 9a2 2 0 0 0 1.8 3h10.4a2 2 0 0 0 1.8-3l-5-9V3"/><path d="M7.5 15h9"/></symbol>
<symbol id="bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 18h5M10.5 21h3"/><path d="M12 3a6 6 0 0 0-3.8 10.6c.8.7 1.3 1.6 1.3 2.4h5c0-.8.5-1.7 1.3-2.4A6 6 0 0 0 12 3z"/></symbol>
<symbol id="sync-device" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="9" height="12" rx="1.5"/><rect x="14" y="8" width="8" height="11" rx="1.5"/><path d="M11 9h2M11 13h2"/></symbol>
<symbol id="offline" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5a5 5 0 0 1 8-1"/><path d="M8.5 15.5a3 3 0 0 1 5 0"/><circle cx="12" cy="18.5" r="0.6"/><path d="M3 3l18 18"/></symbol>
</defs>
</svg>
<main>
<section class="sec lede">
<div class="sec-head"><h2><span class="hl-blue-w">How</span><span class="hl-litegray"> It Works</span></h2><span class="hline"></span></div>
<div class="sec-body">
<p class="lead">One FRAME. Run it anywhere. It behaves the same everywhere.</p>
<p>A FRAME is a single, self-contained instance you control, and you can run it in whatever way fits your setup:</p>
<ul>
<li>Open it directly in a web browser</li>
<li>Run it as a native desktop application</li>
<li>Launch it from the command line</li>
<li>Package it as an executable</li>
<li>Deploy it in a container</li>
<li>Boot it directly on bare metal</li>
</ul>
<p>Regardless of where it runs, it behaves the same way, because every FRAME uses the same kernel and protocols.</p>
</div>
</section>
<section class="sec">
<div class="sec-head"><h2><span class="hl-green">Apps Connect,</span><span class="hl-litegray"> They Don't Own</span></h2><span class="hline"></span></div>
<div class="sec-body">
<p class="lead">Applications connect to your FRAME instead of owning your data.</p>
<p>Applications (dApps) don't own your data.</p>
<p>Instead, they connect to your FRAME, request capabilities, and operate on the same shared foundation.</p>
</div>
</section>
<section class="sec">
<div class="sec-head"><h2><span class="hl-orange">Portable</span><span class="hl-litegray"> by Design</span></h2><span class="hline"></span></div>
<div class="sec-body">
<p class="lead">Copy it, clone it, sync it, or host it yourself.</p>
<p>A FRAME can be copied, backed up, cloned, synchronized with other trusted FRAME instances, or hosted entirely on your own hardware.</p>
<p>That lets everything from a personal laptop to a distributed, user-owned cloud run the exact same software, without changing how applications are built.</p>
</div>
</section>
<section class="sec">
<div class="sec-head"><h2><span class="hl-purple">What You Can</span><span class="hl-litegray"> Do</span></h2><span class="hline"></span></div>
<div class="sec-body">
<p class="lead">One foundation, countless capabilities, in plain terms.</p>
<div class="features">
<div class="feat"><span class="ic" style="color:#1a73e8"><svg><use href="#cloud"/></svg></span><h3>Host Your Own Cloud</h3><p>Run your own cloud on hardware you control.</p></div>
<div class="feat"><span class="ic" style="color:#e0457b"><svg><use href="#brain"/></svg></span><h3>Host Your Own AI</h3><p>Run AI models locally, right on your FRAME.</p></div>
<div class="feat"><span class="ic" style="color:#d4af37"><svg><use href="#key"/></svg></span><h3>Passwordless Authentication</h3><p>Sign in with secure capabilities instead of passwords.</p></div>
<div class="feat"><span class="ic" style="color:#17a34a"><svg><use href="#user"/></svg></span><h3>One Identity Across Every App</h3><p>The same identity works in every application.</p></div>
<div class="feat"><span class="ic" style="color:#8b5a2b"><svg><use href="#idcard"/></svg></span><h3>Custom dApp Accounts & Profiles</h3><p>Apps add their own profiles on top of your identity.</p></div>
<div class="feat"><span class="ic" style="color:#ff8a00"><svg><use href="#blocks"/></svg></span><h3>Composable dApps</h3><p>Apps build on each other and share the same data.</p></div>
<div class="feat"><span class="ic" style="color:#0ea5e9"><svg><use href="#monitor"/></svg></span><h3>Browser, Desktop, or Bare Metal</h3><p>The same FRAME runs wherever you need it.</p></div>
<div class="feat"><span class="ic" style="color:#14b8a6"><svg><use href="#cloud"/></svg></span><h3>User-Owned Decentralized Cloud</h3><p>A cloud made of many user-owned FRAME nodes.</p></div>
<div class="feat"><span class="ic" style="color:#1a73e8"><svg><use href="#refresh"/></svg></span><h3>Clone Your Entire FRAME</h3><p>Duplicate your whole setup in a single step.</p></div>
<div class="feat"><span class="ic" style="color:#e0a800"><svg><use href="#bolt"/></svg></span><h3>Distributed Compute</h3><p>Share processing power across trusted FRAMEs.</p></div>
<div class="feat"><span class="ic" style="color:#f59e0b"><svg><use href="#database"/></svg></span><h3>Shared Storage</h3><p>Pool storage across your FRAME nodes.</p></div>
<div class="feat"><span class="ic" style="color:#9b59b6"><svg><use href="#layers"/></svg></span><h3>Digital Twins</h3><p>Keep a live digital copy of real-world things.</p></div>
<div class="feat"><span class="ic" style="color:#1a73e8"><svg><use href="#map"/></svg></span><h3>Spatial Computing</h3><p>Work with 3D space and real locations.</p></div>
<div class="feat"><span class="ic" style="color:#17a34a"><svg><use href="#collab"/></svg></span><h3>Real-Time Collaboration</h3><p>Work together live on the same data.</p></div>
<div class="feat"><span class="ic" style="color:#ff5fa2"><svg><use href="#plug"/></svg></span><h3>IoT & Robotics</h3><p>Connect devices and robots to your FRAME.</p></div>
<div class="feat"><span class="ic" style="color:#1a73e8"><svg><use href="#refresh"/></svg></span><h3>Local-First Synchronization</h3><p>Works offline and syncs when you reconnect.</p></div>
<div class="feat"><span class="ic ic-rainbow"><svg><use href="#search"/></svg></span><h3>One Search Across Everything</h3><p>Search all your apps and data at once.</p></div>
<div class="feat"><span class="ic" style="color:#4da6ff"><svg><use href="#shield"/></svg></span><h3>Capability-Based Security</h3><p>Apps get only the exact access you grant.</p></div>
<div class="feat"><span class="ic" style="color:#17a34a"><svg><use href="#document"/></svg></span><h3>Verifiable Source Code</h3><p>Anyone can inspect and confirm the code.</p></div>
<div class="feat"><span class="ic" style="color:#17a34a"><svg><use href="#verified"/></svg></span><h3>Cryptographically Verified Apps</h3><p>Apps are proven authentic with cryptography.</p></div>
<div class="feat"><span class="ic" style="color:#43c463"><svg><use href="#verified"/></svg></span><h3>Signed & Reproducible Builds</h3><p>Builds are signed and can be rebuilt to match.</p></div>
<div class="feat"><span class="ic" style="color:#0f7a3d"><svg><use href="#refresh"/></svg></span><h3>Safe, Verifiable Updates</h3><p>Verify updates before you trust them.</p></div>
<div class="feat"><span class="ic" style="color:#9b59b6"><svg><use href="#layers"/></svg></span><h3>Shared Reality Across Apps</h3><p>Every app sees the same underlying truth.</p></div>
<div class="feat"><span class="ic" style="color:#e11d2a"><svg><use href="#rocket"/></svg></span><h3>Build Once, Run Anywhere</h3><p>Write an app once; it runs everywhere.</p></div>
<div class="feat"><span class="ic" style="color:#1a73e8"><svg><use href="#link"/></svg></span><h3>Universal Data Between Apps</h3><p>Data flows freely between all your apps.</p></div>
<div class="feat"><span class="ic ic-ryg"><svg><use href="#palette"/></svg></span><h3>Multiple Views of One Reality</h3><p>See the same data in many different ways.</p></div>
<div class="feat"><span class="ic" style="color:#e0457b"><svg><use href="#brain"/></svg></span><h3>AI That Understands Your FRAME</h3><p>AI can reason over everything in your FRAME.</p></div>
<div class="feat"><span class="ic" style="color:#17a34a"><svg><use href="#globe"/></svg></span><h3>Open Protocols</h3><p>Open, documented protocols anyone can use.</p></div>
<div class="feat"><span class="ic" style="color:#e0a800"><svg><use href="#gear"/></svg></span><h3>Open Source Kernel</h3><p>The core is fully open source.</p></div>
<div class="feat"><span class="ic" style="color:#1a73e8"><svg><use href="#network"/></svg></span><h3>Peer-to-Peer Networking</h3><p>FRAMEs connect directly to each other.</p></div>
<div class="feat"><span class="ic" style="color:#14b8a6"><svg><use href="#refresh"/></svg></span><h3>Versioned Data</h3><p>Every change is tracked and reversible.</p></div>
<div class="feat"><span class="ic" style="color:#0891b2"><svg><use href="#database"/></svg></span><h3>Content-Addressed Storage</h3><p>Data is found by its content, not its location.</p></div>
<div class="feat"><span class="ic" style="color:#ff8a00"><svg><use href="#blocks"/></svg></span><h3>Extensible Kernel</h3><p>Extend the core with new capabilities.</p></div>
<div class="feat"><span class="ic" style="color:#d4af37"><svg><use href="#key"/></svg></span><h3>No Vendor Lock-In</h3><p>Leave anytime; your data always stays yours.</p></div>
<div class="feat"><span class="ic" style="color:#1a73e8"><svg><use href="#sync-device"/></svg></span><h3>Seamless Device Migration</h3><p>Move between devices without friction.</p></div>
<div class="feat"><span class="ic" style="color:#9b59b6"><svg><use href="#layers"/></svg></span><h3>Modular by Design</h3><p>Built from clean, swappable parts.</p></div>
<div class="feat"><span class="ic" style="color:#17a34a"><svg><use href="#chart"/></svg></span><h3>Pi to Datacenter Scale</h3><p>Runs on tiny devices or huge servers.</p></div>
<div class="feat"><span class="ic" style="color:#4da6ff"><svg><use href="#eye"/></svg></span><h3>Transparent Permissions</h3><p>Always see exactly what apps can access.</p></div>
<div class="feat"><span class="ic" style="color:#9b59b6"><svg><use href="#flask"/></svg></span><h3>Reproducible Execution</h3><p>The same inputs always give the same result.</p></div>
<div class="feat"><span class="ic" style="color:#e0a800"><svg><use href="#bulb"/></svg></span><h3>Build the Internet You Control</h3><p>Own and shape your corner of the internet.</p></div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="foot-inner">
<p class="foot-kicker">Contribute</p>
<p class="foot-tag">We're building a shared foundation where software speaks the same language. Come build on it.</p>
<nav class="foot-links">
<a class="flink" href="/why.html">Why FRAME</a>
<a class="flink" href="/how.html">How it works</a>
<a class="flink" href="/problems.html">Problems solved</a>
<a class="flink" href="/inhabit.html">Inhabit</a>
<a class="flink" href="/attention.html">Attention</a>
<a class="flink" href="/start.html">Start</a>
<a class="flink" href="https://github.com/frameprotocol" target="_blank" rel="noopener">GitHub</a>
<a class="flink" href="https://x.com/frame_protocol" target="_blank" rel="noopener">X</a>
</nav>
<div class="foot-bottom">
<span>Open source · Local-first · Verifiable</span>
</div>
</div>
</footer>
</body>
</html>