2026-09-05 09:41:44 +00:00
<!doctype html>
2026-09-06 14:09:17 +00:00
< html lang = "en" >
2026-09-05 09:41:44 +00:00
< head >
< meta charset = "utf-8" / >
< title > LazyBoy hero< / title >
< style >
@font-face {
font-family: Huninn;
font-weight: 400;
src: url("../apps/web/node_modules/@fontsource/huninn/files/huninn-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F;
}
@font-face {
font-family: Huninn;
font-weight: 400;
src: url("../apps/web/node_modules/@fontsource/huninn/files/huninn-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF;
}
@font-face {
font-family: Huninn;
font-weight: 400;
src: url("../apps/web/node_modules/@fontsource/huninn/files/huninn-chinese-traditional-400-normal.woff2") format("woff2");
unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF, U+3000-303F, U+FF00-FFEF;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 1280px;
height: 640px;
overflow: hidden;
background: #f3f3f5;
color: #161618;
font-family: Huninn, "jf open 粉圓", "PingFang TC", sans-serif;
}
.page {
width: 1280px;
height: 640px;
padding: 28px 48px 0;
position: relative;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
letter-spacing: .02em;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 28px;
padding: 0 12px;
border: 1px solid #e4e4e8;
border-radius: 999px;
background: #fff;
color: #5c5c64;
font-size: 12px;
}
.pill b {
color: #0f766e;
font-weight: 400;
}
.copy {
text-align: center;
margin: 22px auto 18px;
max-width: 760px;
}
h1 {
margin: 0;
font-size: 42px;
font-weight: 400;
letter-spacing: .01em;
line-height: 1.15;
}
.lead {
margin: 10px 0 0;
color: #6b6b73;
font-size: 15px;
line-height: 1.55;
}
.window {
width: 1184px;
height: 470px;
margin: 0 auto;
border-radius: 16px 16px 0 0;
overflow: hidden;
background: #0d0d0e;
box-shadow: 0 24px 70px rgba(16, 16, 20, .28), 0 0 0 1px rgba(0,0,0,.08);
display: grid;
grid-template-rows: 36px 1fr;
}
.chrome {
display: flex;
align-items: center;
gap: 7px;
padding: 0 14px;
background: #161618;
border-bottom: 1px solid #202023;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.r { background: #ff5f57; }
.dot.y { background: #febc2e; }
.dot.g { background: #28c840; }
.app {
display: grid;
grid-template-columns: 228px 1fr 300px;
min-height: 0;
color: #dfdfe2;
background: #050506;
}
.side, .chat, .desk {
min-width: 0;
min-height: 0;
}
.side {
background: #0b0b0c;
border-right: 1px solid #171719;
padding: 12px 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ws {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px 8px;
font-size: 14px;
}
.ws i {
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: #151517;
color: #85858a;
font-size: 9px;
font-style: normal;
letter-spacing: .04em;
}
.search {
height: 34px;
border: 1px solid #202023;
border-radius: 12px;
background: #121214;
color: #626267;
display: flex;
align-items: center;
padding: 0 10px;
font-size: 12px;
gap: 8px;
}
.search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.label {
padding: 8px 8px 2px;
color: #626267;
font-size: 10px;
letter-spacing: .06em;
}
.bot {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 12px;
}
.bot.on { background: #171719; }
.bot strong { display: block; font-size: 13px; font-weight: 400; }
.bot small { display: block; color: #85858a; font-size: 11px; margin-top: 1px; }
.bot .copy { min-width: 0; flex: 1; }
.bot .copy strong, .bot .copy small {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.time { color: #626267; font-size: 10px; align-self: start; }
.chat {
background: #0d0d0e;
display: grid;
grid-template-rows: 52px 1fr 118px;
}
.topbar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
border-bottom: 1px solid #171719;
font-size: 15px;
}
.grow { flex: 1; }
.tools {
display: flex; gap: 2px; padding: 3px;
border: 1px solid #29292d; border-radius: 11px; background: rgba(18,18,20,.86);
}
.tools i {
width: 26px; height: 26px; border-radius: 8px;
display: grid; place-items: center;
font-style: normal;
}
.tools i.on { background: #151517; }
.tools svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tools i.on svg { stroke: #f1f1f2; }
.tools i:not(.on) svg { stroke: #85858a; }
.msgs {
padding: 18px 28px 8px;
display: flex;
flex-direction: column;
gap: 12px;
}
.bubble {
max-width: 78%;
padding: 10px 14px;
border-radius: 18px;
line-height: 1.5;
font-size: 13px;
white-space: pre-wrap;
}
.me { align-self: flex-end; background: #f1f1ef; color: #1a1a1a; }
.them { align-self: flex-start; background: #19191c; }
.dock {
padding: 8px 22px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.think {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
}
.think .lbl {
background: linear-gradient(90deg, #7a8088 0%, #7a8088 28%, #fff 50%, #7a8088 72%, #7a8088 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.think small { color: #85858a; }
.composer {
height: 52px;
display: flex; align-items: center; gap: 8px;
border: 1px solid #29292d;
background: #121214;
border-radius: 22px;
padding: 6px 8px;
}
.plus, .send {
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
}
.plus { color: #85858a; font-size: 20px; }
.ph { flex: 1; color: #626267; font-size: 13px; }
.send { background: #f1f1ef; color: #1b1b1c; font-size: 14px; }
.desk {
background: #0a0a0b;
border-left: 1px solid #171719;
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.desk-h {
display: flex; align-items: center; gap: 8px;
color: #f1f1f2; font-size: 13px;
}
.desk-h .dot-run {
width: 7px; height: 7px; border-radius: 50%; background: #4ecb71;
}
.desk-h small { color: #85858a; margin-left: auto; font-size: 11px; }
.preview {
position: relative;
flex: 1;
border: 1px solid #29292d;
border-radius: 12px;
background: #101012;
overflow: hidden;
min-height: 168px;
}
.desktop {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 0%, #1a2430 0%, transparent 42%),
linear-gradient(180deg, #15202b, #0d1218);
}
.win {
position: absolute;
left: 14px; top: 12px; right: 14px; bottom: 28px;
border-radius: 8px;
background: #fff;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,.35);
display: grid;
grid-template-rows: 22px 28px 1fr;
}
.win-bar { background: #e8e8ea; display: flex; align-items: center; gap: 5px; padding: 0 8px; }
.win-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c4c4c8; font-style: normal; }
.addr {
background: #f4f4f6;
display: flex; align-items: center;
padding: 0 10px;
color: #444; font-size: 10px;
border-bottom: 1px solid #ececf0;
}
.page-body { padding: 12px 14px; color: #222; }
.page-body h3 { margin: 0 0 6px; font-size: 13px; font-weight: 400; }
.page-body p { margin: 0; color: #666; font-size: 11px; line-height: 1.45; }
.progress {
margin-top: 10px; height: 6px; border-radius: 99px; background: #ececf0; overflow: hidden;
}
.progress b { display: block; width: 62%; height: 100%; background: #3ec5a8; }
.next {
margin-top: 10px; height: 24px; width: 64px;
border-radius: 6px; background: #1a1a1c; color: #fff;
display: grid; place-items: center; font-size: 11px;
}
.panel {
position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
background: #1b242e; border-top: 1px solid #2a3540;
}
.cap {
display: flex; justify-content: space-between;
color: #85858a; font-size: 11px;
}
.btn {
height: 28px; padding: 0 10px; border-radius: 8px;
border: 1px solid #29292d; color: #dfdfe2; display: grid; place-items: center;
font-size: 12px;
}
.btn.cream { background: #f1f1ef; color: #181819; border-color: #f1f1ef; }
.actions { display: flex; justify-content: flex-end; gap: 6px; }
/* blobatar-ish faces */
.blob { width: 32px; height: 32px; flex: 0 0 32px; }
.blob.sm { width: 22px; height: 22px; flex-basis: 22px; }
.blob.md { width: 28px; height: 28px; flex-basis: 28px; }
.think-ring { position: relative; }
.think-ring:after {
content: "";
position: absolute; inset: -5px;
border-radius: 50%;
background: conic-gradient(from 40deg, transparent 0 8%, #ff4fd8 12%, #7c5cff 18%, transparent 26% 48%, #34d9ff 54%, transparent 62%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
< / style >
< / head >
< body >
< div class = "page" >
< div class = "top" >
< div class = "brand" >
< svg class = "blob md" viewBox = "0 0 64 64" aria-hidden = "true" >
< path fill = "#3ec5a8" d = "M33 5c11.5 1 24 11 23 26-1 14-11 27-25 28S6 47 7 31 21 4 33 5z" / >
< ellipse cx = "25.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / >
< ellipse cx = "40.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / >
< circle cx = "26.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / >
< circle cx = "41.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / >
< / svg >
LazyBoy
< / div >
2026-09-06 14:09:17 +00:00
< div class = "pill" > < b > Self-hosted< / b > a Linux desktop per agent< / div >
2026-09-05 09:41:44 +00:00
< / div >
< div class = "copy" >
2026-09-06 14:09:17 +00:00
< h1 > Give an agent a real computer< / h1 >
< p class = "lead" > Open bots in the browser. They browse, run commands, and learn the flows you demonstrate.< br / > Chats and desktops stay on your host. You choose the model.< / p >
2026-09-05 09:41:44 +00:00
< / div >
< div class = "window" >
< div class = "chrome" > < i class = "dot r" > < / i > < i class = "dot y" > < / i > < i class = "dot g" > < / i > < / div >
< div class = "app" >
< aside class = "side" >
2026-09-06 14:09:17 +00:00
< div class = "ws" > < i > LB< / i > Local workspace< / div >
< div class = "search" > < svg viewBox = "0 0 24 24" > < circle cx = "11" cy = "11" r = "7" / > < path d = "M20 20l-3.5-3.5" / > < / svg > Search< / div >
< div class = "label" > Pinned< / div >
2026-09-05 09:41:44 +00:00
< div class = "bot on" >
< span class = "think-ring" >
< svg class = "blob" viewBox = "0 0 64 64" > < path fill = "#3ec5a8" d = "M33 5c11.5 1 24 11 23 26-1 14-11 27-25 28S6 47 7 31 21 4 33 5z" / > < ellipse cx = "25.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / > < ellipse cx = "40.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / > < circle cx = "26.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / > < circle cx = "41.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / > < / svg >
< / span >
2026-09-06 14:09:17 +00:00
< div class = "copy" > < strong > Engineering< / strong > < small > Page 12, waiting for Next< / small > < / div >
2026-09-05 09:41:44 +00:00
< span class = "time" > 14:08< / span >
< / div >
< div class = "label" > Agent< / div >
< div class = "bot" >
< svg class = "blob" viewBox = "0 0 64 64" > < path fill = "#f5a03c" d = "M30 7c13-1 26 10 25 24-1 15-12 26-25 27S5 46 7 31 17 8 30 7z" / > < ellipse cx = "25" cy = "30" rx = "4" ry = "4.8" fill = "#1b1b22" / > < ellipse cx = "40" cy = "30" rx = "4" ry = "4.8" fill = "#1b1b22" / > < circle cx = "26.3" cy = "28.3" r = "1.2" fill = "#f3f3f6" / > < circle cx = "41.3" cy = "28.3" r = "1.2" fill = "#f3f3f6" / > < / svg >
2026-09-06 14:09:17 +00:00
< div class = "copy" > < strong > Morning digest< / strong > < small > Runs tomorrow at 9:00< / small > < / div >
2026-09-05 09:41:44 +00:00
< / div >
< div class = "bot" >
< svg class = "blob" viewBox = "0 0 64 64" > < path fill = "#6a6bf5" d = "M34 6c12 2 22 12 21 25s-12 26-25 27S6 46 8 32 22 4 34 6z" / > < ellipse cx = "26" cy = "29" rx = "4.1" ry = "5" fill = "#f3f3f6" / > < ellipse cx = "41" cy = "29" rx = "4.1" ry = "5" fill = "#f3f3f6" / > < circle cx = "24.8" cy = "27.4" r = "1.2" fill = "#1b1b22" / > < circle cx = "39.8" cy = "27.4" r = "1.2" fill = "#1b1b22" / > < / svg >
2026-09-06 14:09:17 +00:00
< div class = "copy" > < strong > Support< / strong > < small > Remembered the reply tone< / small > < / div >
2026-09-05 09:41:44 +00:00
< / div >
< / aside >
< main class = "chat" >
< header class = "topbar" >
< svg class = "blob sm" viewBox = "0 0 64 64" > < path fill = "#3ec5a8" d = "M33 5c11.5 1 24 11 23 26-1 14-11 27-25 28S6 47 7 31 21 4 33 5z" / > < ellipse cx = "25.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / > < ellipse cx = "40.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / > < circle cx = "26.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / > < circle cx = "41.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / > < / svg >
2026-09-06 14:09:17 +00:00
Engineering
< span style = "color:#85858a;font-size:12px" > STAR training < / span >
2026-09-05 09:41:44 +00:00
< span class = "grow" > < / span >
< div class = "tools" >
< i class = "on" > < svg viewBox = "0 0 24 24" > < rect x = "3" y = "5" width = "18" height = "12" rx = "2" / > < path d = "M8 21h8M12 17v4" / > < / svg > < / i >
< i > < svg viewBox = "0 0 24 24" > < path d = "M12 3a7 7 0 0 0-4 12.7V18h8v-2.3A7 7 0 0 0 12 3z" / > < path d = "M9 21h6" / > < / svg > < / i >
< i > < svg viewBox = "0 0 24 24" > < path d = "M12 5v2M12 17v2M5 12h2M17 12h2M7 7l1.5 1.5M15.5 15.5L17 17M7 17l1.5-1.5M15.5 8.5L17 7" / > < circle cx = "12" cy = "12" r = "3" / > < / svg > < / i >
< / div >
< / header >
< div class = "msgs" >
2026-09-06 14:09:17 +00:00
< div class = "bubble me" > Finish the STAR course and submit the quiz.< / div >
< div class = "bubble them" > Computer is up. Page 12 / 24 — I’ ’ < / div >
2026-09-05 09:41:44 +00:00
< / div >
< div class = "dock" >
< div class = "think" >
< span class = "think-ring" > < svg class = "blob sm" viewBox = "0 0 64 64" > < path fill = "#3ec5a8" d = "M33 5c11.5 1 24 11 23 26-1 14-11 27-25 28S6 47 7 31 21 4 33 5z" / > < ellipse cx = "25.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / > < ellipse cx = "40.5" cy = "29" rx = "4.2" ry = "5" fill = "#1b1b22" / > < circle cx = "26.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / > < circle cx = "41.8" cy = "27.2" r = "1.3" fill = "#f3f3f6" / > < / svg > < / span >
2026-09-06 14:09:17 +00:00
< span class = "lbl" > Working…< / span >
2026-09-05 09:41:44 +00:00
< small > click Next< / small >
< / div >
2026-09-06 14:09:17 +00:00
< div class = "composer" > < div class = "plus" > ＋ < / div > < div class = "ph" > Message Engineering< / div > < div class = "send" > ↑< / div > < / div >
2026-09-05 09:41:44 +00:00
< / div >
< / main >
< aside class = "desk" >
2026-09-06 14:09:17 +00:00
< div class = "desk-h" > Engineering’ < i class = "dot-run" > < / i > < small > Running< / small > < / div >
2026-09-05 09:41:44 +00:00
< div class = "preview" >
< div class = "desktop" >
< div class = "win" >
< div class = "win-bar" > < i > < / i > < i > < / i > < i > < / i > < / div >
< div class = "addr" > star.example / course / 12< / div >
< div class = "page-body" >
2026-09-06 14:09:17 +00:00
< h3 > Workplace Safety · page 12< / h3 >
< p > Read this, then press Next. It unlocks when the countdown ends.< / p >
2026-09-05 09:41:44 +00:00
< div class = "progress" > < b > < / b > < / div >
< div class = "next" > Next< / div >
< / div >
< / div >
< div class = "panel" > < / div >
< / div >
< / div >
2026-09-06 14:09:17 +00:00
< div class = "cap" > < span > This screen< / span > < span > Enlarge< / span > < / div >
< div class = "actions" > < div class = "btn cream" > Take over< / div > < div class = "btn" > Stop task< / div > < / div >
2026-09-05 09:41:44 +00:00
< / aside >
< / div >
< / div >
< / div >
< / body >
< / html >
