mirror of
https://github.com/PR0M3TH3AN/bitblocks.git
synced 2026-10-27 07:50:39 +00:00
BitBlocks umbrella site — the parent identity for the stack
A monochrome, architectural landing tying BitLogin/BitGate/BitFeed/BitUnlock/ Tessera into one message. Parent brand distinct from every product (Alphabet-to-Google): the five product colours are the only chroma; monumental condensed Ubuntu Sans display, mono annotation layer, theme-aware. Sections: tenant->owner thesis, the five blocks, how they compose (Tessera as the worked example), foundation principles, builders CTA. Static, no build, CSP-locked. Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Fable 5 committed
1 parent
d2efa33f0c
commit
34eac32224
7 files changed
+499
No files matched your search
@@ -0,0 +1,29 @@
|
|||||||
|
# bitblocks.network
|
||||||
|
|
||||||
|
The umbrella site for the BitBlocks stack — composable Nostr + Bitcoin building
|
||||||
|
blocks for apps that can't lock anyone in.
|
||||||
|
|
||||||
|
Static site, no build step. Deployed to the apex `bitblocks.network`.
|
||||||
|
|
||||||
|
## The blocks
|
||||||
|
|
||||||
|
| Block | Question | Site |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| BitLogin | who are you | login.bitblocks.network |
|
||||||
|
| BitGate | what may you do | gate.bitblocks.network |
|
||||||
|
| BitFeed | what do you see | feed.bitblocks.network |
|
||||||
|
| BitUnlock | how you're paid | bitunlock.network |
|
||||||
|
| Tessera | what you can do | tessera.bitblocks.network |
|
||||||
|
|
||||||
|
## Design
|
||||||
|
|
||||||
|
Deliberately distinct from any single product: a monochrome, architectural
|
||||||
|
parent identity where the five product colours are the only chroma — the
|
||||||
|
Alphabet-to-Google relationship rendered in design. Monumental condensed
|
||||||
|
Ubuntu Sans display, Ubuntu Sans Mono for annotations, theme-aware.
|
||||||
|
|
||||||
|
## Local
|
||||||
|
|
||||||
|
```sh
|
||||||
|
python3 -m http.server 8080 # then open localhost:8080
|
||||||
|
```
|
||||||
@@ -0,0 +1,208 @@
|
|||||||
|
/* BitBlocks — the foundation. A deliberately monochrome, architectural
|
||||||
|
identity for the parent: the colour belongs to the products (the five
|
||||||
|
blocks), not the holding brand. Think an architect's white table with
|
||||||
|
coloured blocks on it — Alphabet to the products' Google.
|
||||||
|
|
||||||
|
Type: Ubuntu Sans on a condensed, heavy width axis carries the monumental
|
||||||
|
display voice (distinct from the products' regular-width sans); Ubuntu Sans
|
||||||
|
Mono is the technical annotation layer. */
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Ubuntu Sans V';
|
||||||
|
src: url('./fonts/UbuntuSans-var.woff2') format('woff2');
|
||||||
|
font-weight: 100 800; font-stretch: 75% 125%; font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Ubuntu Sans Mono V';
|
||||||
|
src: url('./fonts/UbuntuSansMono-var.woff2') format('woff2');
|
||||||
|
font-weight: 100 800; font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Architectural monochrome — cooler and flatter than any product palette. */
|
||||||
|
--paper: #eef0f4;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--ink: #0b0c0e;
|
||||||
|
--muted: #5b6270;
|
||||||
|
--line: #d3d6de;
|
||||||
|
--line-soft: #e4e6ec;
|
||||||
|
--ink-invert: #ffffff;
|
||||||
|
|
||||||
|
/* The only chroma on the whole site: the five product blocks. */
|
||||||
|
--c-login: #6c4df6; /* BitLogin — identity */
|
||||||
|
--c-gate: #e0a12b; /* BitGate — policy */
|
||||||
|
--c-feed: #23b3c6; /* BitFeed — feed */
|
||||||
|
--c-unlock: #f7931a; /* BitUnlock — bitcoin */
|
||||||
|
--c-tessera: #e2478d; /* Tessera — capability*/
|
||||||
|
|
||||||
|
--tile: 68px;
|
||||||
|
--edge: min(7vw, 96px);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme='light']) {
|
||||||
|
--paper: #0a0b0d;
|
||||||
|
--surface: #101217;
|
||||||
|
--ink: #f2f3f6;
|
||||||
|
--muted: #8b91a0;
|
||||||
|
--line: #23262d;
|
||||||
|
--line-soft: #191b21;
|
||||||
|
--ink-invert: #0a0b0d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:root[data-theme='dark'] {
|
||||||
|
--paper: #0a0b0d; --surface: #101217; --ink: #f2f3f6; --muted: #8b91a0;
|
||||||
|
--line: #23262d; --line-soft: #191b21; --ink-invert: #0a0b0d;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
|
||||||
|
body {
|
||||||
|
margin: 0; background: var(--paper); color: var(--ink);
|
||||||
|
font-family: 'Ubuntu Sans V', system-ui, sans-serif;
|
||||||
|
font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
|
||||||
|
font-variation-settings: 'wdth' 100;
|
||||||
|
}
|
||||||
|
.mono { font-family: 'Ubuntu Sans Mono V', ui-monospace, 'SF Mono', Menlo, monospace; }
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* Monumental condensed display — the parent's distinct voice. */
|
||||||
|
.display {
|
||||||
|
font-variation-settings: 'wdth' 80;
|
||||||
|
font-weight: 800; letter-spacing: -0.02em; line-height: 0.9; text-wrap: balance;
|
||||||
|
}
|
||||||
|
.coord {
|
||||||
|
font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace;
|
||||||
|
font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame { max-width: 1280px; margin: 0 auto; padding: 0 var(--edge); }
|
||||||
|
/* Paint an explicit ground on every band so nothing relies on the body
|
||||||
|
showing through. */
|
||||||
|
header.hero, section, footer { background: var(--paper); }
|
||||||
|
section { border-top: 1px solid var(--line); }
|
||||||
|
|
||||||
|
/* ---------- top bar ---------- */
|
||||||
|
.topbar { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
|
||||||
|
.topbar .frame { display: flex; align-items: center; gap: 24px; height: 66px; }
|
||||||
|
.wordmark { display: flex; align-items: center; gap: 12px; font-variation-settings: 'wdth' 82; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
|
||||||
|
.logo-blocks { display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 2px; }
|
||||||
|
.logo-blocks i { display: block; width: 9px; height: 9px; }
|
||||||
|
.topbar nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
|
||||||
|
.topbar nav a { font-size: 14px; color: var(--muted); }
|
||||||
|
.topbar nav a:hover { color: var(--ink); }
|
||||||
|
.topbar nav a.cta { color: var(--ink); border: 1px solid var(--ink); padding: 7px 15px; }
|
||||||
|
.topbar nav a.cta:hover { background: var(--ink); color: var(--ink-invert); }
|
||||||
|
#theme { background: none; border: 1px solid var(--line); color: var(--muted); width: 32px; height: 32px; cursor: pointer; font-size: 14px; }
|
||||||
|
#theme:hover { border-color: var(--ink); color: var(--ink); }
|
||||||
|
@media (max-width: 720px) { .topbar nav a:not(.cta) { display: none; } }
|
||||||
|
|
||||||
|
/* ---------- hero ---------- */
|
||||||
|
.hero .frame { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
|
||||||
|
@media (max-width: 900px) { .hero .frame { grid-template-columns: 1fr; gap: 40px; } }
|
||||||
|
.hero .coord { margin-bottom: 26px; }
|
||||||
|
.hero h1 { margin: 0 0 24px; font-size: clamp(46px, 6.6vw, 92px); }
|
||||||
|
.hero h1 .own { position: relative; }
|
||||||
|
.hero h1 .own::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.09em; background: linear-gradient(90deg, var(--c-login), var(--c-gate), var(--c-feed), var(--c-unlock), var(--c-tessera)); }
|
||||||
|
.hero p.lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--muted); max-width: 46ch; margin: 0 0 30px; }
|
||||||
|
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||||
|
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ink); color: var(--ink); background: none; padding: 12px 22px; font: inherit; font-size: 15px; cursor: pointer; }
|
||||||
|
.btn:hover { background: var(--ink); color: var(--ink-invert); }
|
||||||
|
.btn.ghost { border-color: var(--line); color: var(--muted); }
|
||||||
|
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); background: none; }
|
||||||
|
|
||||||
|
/* the assembly — five coloured blocks locking into a foundation */
|
||||||
|
.assembly { position: relative; }
|
||||||
|
.assembly .stack { display: flex; flex-direction: column; gap: 10px; }
|
||||||
|
.block-bar {
|
||||||
|
display: flex; align-items: center; gap: 18px; padding: 18px 22px;
|
||||||
|
background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden;
|
||||||
|
transform: translateX(24px); opacity: 0; animation: bar-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||||||
|
}
|
||||||
|
.block-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bc); }
|
||||||
|
.block-bar:nth-child(1) { animation-delay: 0.15s; }
|
||||||
|
.block-bar:nth-child(2) { animation-delay: 0.30s; }
|
||||||
|
.block-bar:nth-child(3) { animation-delay: 0.45s; }
|
||||||
|
.block-bar:nth-child(4) { animation-delay: 0.60s; }
|
||||||
|
.block-bar:nth-child(5) { animation-delay: 0.75s; }
|
||||||
|
@keyframes bar-in { to { transform: translateX(0); opacity: 1; } }
|
||||||
|
@media (prefers-reduced-motion: reduce) { .block-bar { transform: none; opacity: 1; animation: none; } }
|
||||||
|
.block-bar .swatch { width: 16px; height: 16px; background: var(--bc); flex: none; }
|
||||||
|
.block-bar .bn { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
|
||||||
|
.block-bar .bq { margin-left: auto; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
|
||||||
|
.block-bar:hover { border-color: var(--bc); }
|
||||||
|
@media (max-width: 460px) { .block-bar .bq { display: none; } }
|
||||||
|
|
||||||
|
/* ---------- thesis ---------- */
|
||||||
|
.thesis .frame { padding: clamp(56px, 8vw, 104px) var(--edge); }
|
||||||
|
.thesis .lead { font-size: clamp(24px, 3.3vw, 40px); font-weight: 640; letter-spacing: -0.015em; line-height: 1.15; max-width: 20ch; margin: 0 0 22px; font-variation-settings: 'wdth' 92; }
|
||||||
|
.thesis .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 40px; }
|
||||||
|
@media (max-width: 760px) { .thesis .cols { grid-template-columns: 1fr; } }
|
||||||
|
.thesis .cols p { color: var(--muted); margin: 0; max-width: 52ch; }
|
||||||
|
.thesis .cols .k { display: block; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
|
||||||
|
|
||||||
|
/* ---------- the blocks ---------- */
|
||||||
|
.blocks .frame { padding: clamp(56px, 8vw, 100px) var(--edge); }
|
||||||
|
.section-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 48px; flex-wrap: wrap; }
|
||||||
|
.section-head h2 { margin: 0; font-size: clamp(30px, 4.4vw, 54px); font-variation-settings: 'wdth' 82; font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; }
|
||||||
|
.section-head p { color: var(--muted); margin: 0; max-width: 40ch; }
|
||||||
|
.block-list { display: flex; flex-direction: column; border: 1px solid var(--line); }
|
||||||
|
.block-row {
|
||||||
|
display: grid; grid-template-columns: 200px 1fr auto; gap: 32px; align-items: center;
|
||||||
|
padding: 30px var(--tile-pad, 30px); border-bottom: 1px solid var(--line-soft);
|
||||||
|
position: relative; transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.block-row:last-child { border-bottom: none; }
|
||||||
|
.block-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bc); transform: scaleY(0.25); transform-origin: center; transition: transform 0.25s; }
|
||||||
|
.block-row:hover { background: color-mix(in srgb, var(--bc) 7%, transparent); }
|
||||||
|
.block-row:hover::before { transform: scaleY(1); }
|
||||||
|
.block-row .id { display: flex; align-items: center; gap: 14px; }
|
||||||
|
.block-row .id .sq { width: 22px; height: 22px; background: var(--bc); flex: none; }
|
||||||
|
.block-row .id .nm { font-size: 21px; font-weight: 720; letter-spacing: -0.015em; font-variation-settings: 'wdth' 90; }
|
||||||
|
.block-row .id .q { font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bc); margin-top: 2px; }
|
||||||
|
.block-row .desc { color: var(--muted); font-size: 15.5px; max-width: 60ch; }
|
||||||
|
.block-row .desc b { color: var(--ink); font-weight: 600; }
|
||||||
|
.block-row .go { display: inline-flex; align-items: center; gap: 7px; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
|
||||||
|
.block-row:hover .go { color: var(--bc); }
|
||||||
|
@media (max-width: 860px) { .block-row { grid-template-columns: 1fr; gap: 12px; padding: 26px 22px; } .block-row .go { justify-self: start; } }
|
||||||
|
|
||||||
|
/* ---------- composition ---------- */
|
||||||
|
.compose, section.compose { background: var(--surface); }
|
||||||
|
.compose .frame { padding: clamp(56px, 8vw, 100px) var(--edge); }
|
||||||
|
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 12px; }
|
||||||
|
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }
|
||||||
|
.flow .node { background: var(--surface); padding: 26px 22px; position: relative; }
|
||||||
|
.flow .node .q { font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
|
||||||
|
.flow .node .sq { width: 20px; height: 20px; background: var(--bc); margin-bottom: 12px; }
|
||||||
|
.flow .node .nm { font-weight: 720; font-size: 18px; letter-spacing: -0.01em; }
|
||||||
|
.flow .node .role { color: var(--muted); font-size: 13px; margin-top: 3px; }
|
||||||
|
.compose .note { margin-top: 30px; color: var(--muted); max-width: 66ch; }
|
||||||
|
.compose .note b { color: var(--ink); font-weight: 600; }
|
||||||
|
|
||||||
|
/* ---------- principles ---------- */
|
||||||
|
.principles .frame { padding: clamp(56px, 8vw, 100px) var(--edge); }
|
||||||
|
.prin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
|
||||||
|
@media (max-width: 860px) { .prin-grid { grid-template-columns: 1fr; } }
|
||||||
|
.prin { background: var(--paper); padding: 28px 26px; }
|
||||||
|
.prin .n { font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 12px; color: var(--muted); }
|
||||||
|
.prin h3 { margin: 14px 0 8px; font-size: 18.5px; font-weight: 680; letter-spacing: -0.01em; }
|
||||||
|
.prin p { margin: 0; color: var(--muted); font-size: 14.5px; }
|
||||||
|
|
||||||
|
/* ---------- builders ---------- */
|
||||||
|
.builders .frame { padding: clamp(56px, 8vw, 100px) var(--edge); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
|
||||||
|
@media (max-width: 860px) { .builders .frame { grid-template-columns: 1fr; gap: 36px; } }
|
||||||
|
.builders h2 { margin: 0 0 18px; font-size: clamp(28px, 4vw, 48px); font-variation-settings: 'wdth' 82; font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; }
|
||||||
|
.builders p { color: var(--muted); max-width: 50ch; margin: 0 0 22px; }
|
||||||
|
.builders .term { background: var(--ink); color: var(--ink-invert); border: 1px solid var(--ink); padding: 22px 24px; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 13.5px; line-height: 1.9; }
|
||||||
|
.builders .term .c { opacity: 0.55; }
|
||||||
|
.builders .term .g { color: #7ee0b8; }
|
||||||
|
|
||||||
|
/* ---------- footer ---------- */
|
||||||
|
footer { border-top: 1px solid var(--line); }
|
||||||
|
footer .frame { padding: 46px var(--edge) 60px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
|
||||||
|
footer .fcol h4 { font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 500; }
|
||||||
|
footer .fcol a { display: block; font-size: 14px; color: var(--muted); padding: 3px 0; }
|
||||||
|
footer .fcol a:hover { color: var(--ink); }
|
||||||
|
footer .sign { font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
|
||||||
|
|
||||||
|
:focus-visible { outline: 2px solid var(--c-login); outline-offset: 3px; }
|
||||||
Binary file not shown.
Binary file not shown.
+217
@@ -0,0 +1,217 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>BitBlocks — composable infrastructure for an internet you own</title>
|
||||||
|
<meta name="description" content="A stack of composable Nostr and Bitcoin building blocks: identity, policy, feeds, payments, and agent capabilities — for apps that can't lock anyone in.">
|
||||||
|
<link rel="stylesheet" href="./assets/bitblocks.css">
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='9' height='9' fill='%236c4df6'/%3E%3Crect x='13' y='2' width='9' height='9' fill='%23e0a12b'/%3E%3Crect x='2' y='13' width='9' height='9' fill='%2323b3c6'/%3E%3Crect x='13' y='13' width='9' height='9' fill='%23f7931a'/%3E%3C/svg%3E">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="frame">
|
||||||
|
<a class="wordmark" href="./index.html" aria-label="BitBlocks home">
|
||||||
|
<span class="logo-blocks" aria-hidden="true">
|
||||||
|
<i style="background:var(--c-login)"></i><i style="background:var(--c-gate)"></i>
|
||||||
|
<i style="background:var(--c-feed)"></i><i style="background:var(--c-unlock)"></i>
|
||||||
|
</span>
|
||||||
|
bitblocks
|
||||||
|
</a>
|
||||||
|
<nav>
|
||||||
|
<a href="#blocks">the blocks</a>
|
||||||
|
<a href="#compose">how they compose</a>
|
||||||
|
<a href="#build">build</a>
|
||||||
|
<a class="cta" href="https://tessera.bitblocks.network">Tessera →</a>
|
||||||
|
<button id="theme" type="button" aria-label="Toggle theme">◑</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="frame">
|
||||||
|
<div class="lead">
|
||||||
|
<p class="coord">composable nostr · bitcoin infrastructure</p>
|
||||||
|
<h1 class="display">The web made you a tenant. <span class="own">Own</span> the stack.</h1>
|
||||||
|
<p class="lede">BitBlocks is a set of composable building blocks for apps that can't lock anyone
|
||||||
|
in — no server of record, no account to close, no algorithm you can't swap. Each block does
|
||||||
|
one thing, signs everything, and runs on open relays.</p>
|
||||||
|
<div class="actions">
|
||||||
|
<a class="btn" href="#blocks">See the blocks</a>
|
||||||
|
<a class="btn ghost" href="#compose">How they fit together</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="assembly" aria-label="The five building blocks">
|
||||||
|
<div class="stack">
|
||||||
|
<a class="block-bar" style="--bc:var(--c-login)" href="https://login.bitblocks.network"><span class="swatch"></span><span class="bn">BitLogin</span><span class="bq">who are you</span></a>
|
||||||
|
<a class="block-bar" style="--bc:var(--c-gate)" href="https://gate.bitblocks.network"><span class="swatch"></span><span class="bn">BitGate</span><span class="bq">what may you do</span></a>
|
||||||
|
<a class="block-bar" style="--bc:var(--c-feed)" href="https://feed.bitblocks.network"><span class="swatch"></span><span class="bn">BitFeed</span><span class="bq">what do you see</span></a>
|
||||||
|
<a class="block-bar" style="--bc:var(--c-unlock)" href="https://bitunlock.network"><span class="swatch"></span><span class="bn">BitUnlock</span><span class="bq">how you're paid</span></a>
|
||||||
|
<a class="block-bar" style="--bc:var(--c-tessera)" href="https://tessera.bitblocks.network"><span class="swatch"></span><span class="bn">Tessera</span><span class="bq">what you can do</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="thesis">
|
||||||
|
<div class="frame">
|
||||||
|
<p class="coord">§ 01 — the premise</p>
|
||||||
|
<p class="lead">Every platform you use owns the four things that matter: your name, your feed, your
|
||||||
|
money, and your right to be there.</p>
|
||||||
|
<div class="cols">
|
||||||
|
<div>
|
||||||
|
<span class="k">the tenant's web</span>
|
||||||
|
<p>Your identity is a row in someone's database. Your feed is an algorithm you can't read.
|
||||||
|
Your payments run through a processor that can freeze them. Your account can be closed,
|
||||||
|
and everything you built inside it goes with it. You are renting.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="k">the owner's web</span>
|
||||||
|
<p>BitBlocks moves each of those to open ground: a key you hold, a feed recipe you write,
|
||||||
|
money that settles cryptographically, and a presence no host can revoke. The apps become
|
||||||
|
clients over public data — replaceable, forkable, unable to hold you hostage.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="blocks" id="blocks">
|
||||||
|
<div class="frame">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="coord" style="width:100%">§ 02 — the blocks</p>
|
||||||
|
<h2 class="display">Five primitives.<br>One per question.</h2>
|
||||||
|
<p>Each block is small, opinionated, and independent. Use one, or snap them together — they were
|
||||||
|
designed to compose, not to depend.</p>
|
||||||
|
</div>
|
||||||
|
<div class="block-list">
|
||||||
|
<a class="block-row" style="--bc:var(--c-login)" href="https://login.bitblocks.network">
|
||||||
|
<div class="id"><span class="sq"></span><div><div class="nm">BitLogin</div><div class="q">who are you</div></div></div>
|
||||||
|
<p class="desc">A <b>portable Nostr identity</b> — a familiar username and password unlock a key
|
||||||
|
that's yours, backed by public relays with an independent recovery phrase. No account server,
|
||||||
|
no password-reset email, no database. Any app already written for a NIP-07 signer works
|
||||||
|
unchanged.</p>
|
||||||
|
<span class="go">login.bitblocks.network →</span>
|
||||||
|
</a>
|
||||||
|
<a class="block-row" style="--bc:var(--c-gate)" href="https://gate.bitblocks.network">
|
||||||
|
<div class="id"><span class="sq"></span><div><div class="nm">BitGate</div><div class="q">what may you do</div></div></div>
|
||||||
|
<p class="desc">A <b>policy engine</b> with four independent dimensions — rank, show, interact,
|
||||||
|
transact. You supply the policy; it supplies precedence, composition, and a readable
|
||||||
|
explanation of every decision. Moderation and access control without writing the machinery.</p>
|
||||||
|
<span class="go">gate.bitblocks.network →</span>
|
||||||
|
</a>
|
||||||
|
<a class="block-row" style="--bc:var(--c-feed)" href="https://feed.bitblocks.network">
|
||||||
|
<div class="id"><span class="sq"></span><div><div class="nm">BitFeed</div><div class="q">what do you see</div></div></div>
|
||||||
|
<p class="desc">A <b>headless feed engine</b>. You write the algorithm as providers and a recipe;
|
||||||
|
it sources, scores, mixes, orders, and explains — and contains no recommendation logic of its
|
||||||
|
own. Swap the recipe, swap the feed. The algorithm is yours, and it's legible.</p>
|
||||||
|
<span class="go">feed.bitblocks.network →</span>
|
||||||
|
</a>
|
||||||
|
<a class="block-row" style="--bc:var(--c-unlock)" href="https://bitunlock.network">
|
||||||
|
<div class="id"><span class="sq"></span><div><div class="nm">BitUnlock</div><div class="q">how you're paid</div></div></div>
|
||||||
|
<p class="desc"><b>Payment-verified delivery.</b> Every required Lightning leg settles before an
|
||||||
|
encrypted payload is released — re-encrypted to the buyer's own key. Sell digital goods,
|
||||||
|
access, and capabilities in bitcoin, with cryptographic proof instead of a payment processor.</p>
|
||||||
|
<span class="go">bitunlock.network →</span>
|
||||||
|
</a>
|
||||||
|
<a class="block-row" style="--bc:var(--c-tessera)" href="https://tessera.bitblocks.network">
|
||||||
|
<div class="id"><span class="sq"></span><div><div class="nm">Tessera</div><div class="q">what you can do</div></div></div>
|
||||||
|
<p class="desc">The <b>capability network for agents</b> — Agent Plugins published, curated, and
|
||||||
|
installed over Nostr, by people and by the agents themselves. Every listing is a signed event;
|
||||||
|
installs verify on your machine. Tessera is also the proof the stack composes: it's built from
|
||||||
|
the other four.</p>
|
||||||
|
<span class="go">tessera.bitblocks.network →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="compose" id="compose">
|
||||||
|
<div class="frame">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="coord" style="width:100%">§ 03 — how they compose</p>
|
||||||
|
<h2 class="display">A stack, not a suite.</h2>
|
||||||
|
<p>Read left to right, they answer the full lifecycle of a sovereign app. Any block can stand
|
||||||
|
alone; together they interlock.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flow">
|
||||||
|
<div class="node" style="--bc:var(--c-login)"><div class="q">who are you</div><div class="sq"></div><div class="nm">BitLogin</div><div class="role">a key you hold</div></div>
|
||||||
|
<div class="node" style="--bc:var(--c-gate)"><div class="q">what may you do</div><div class="sq"></div><div class="nm">BitGate</div><div class="role">policy you set</div></div>
|
||||||
|
<div class="node" style="--bc:var(--c-feed)"><div class="q">what do you see</div><div class="sq"></div><div class="nm">BitFeed</div><div class="role">an algorithm you write</div></div>
|
||||||
|
<div class="node" style="--bc:var(--c-unlock)"><div class="q">how you're paid</div><div class="sq"></div><div class="nm">BitUnlock</div><div class="role">money you custody</div></div>
|
||||||
|
<div class="node" style="--bc:var(--c-tessera)"><div class="q">what you can do</div><div class="sq"></div><div class="nm">Tessera</div><div class="role">capabilities you own</div></div>
|
||||||
|
</div>
|
||||||
|
<p class="note"><b>Tessera is the worked example.</b> It signs users in with BitLogin, moderates
|
||||||
|
with BitGate's four dimensions, ranks its feed with BitFeed-shaped recipes, and gates paid
|
||||||
|
plugins through BitUnlock — a real application assembled entirely from the blocks. Nothing about
|
||||||
|
it is special-cased; it's just a client over public events, which is the whole point.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="principles">
|
||||||
|
<div class="frame">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="coord" style="width:100%">§ 04 — what holds it together</p>
|
||||||
|
<h2 class="display">The shared foundation.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="prin-grid">
|
||||||
|
<div class="prin"><div class="n">01</div><h3>Signed by substrate</h3><p>Every action is a signed event. Provenance isn't a feature bolted on — it's the storage layer, verified on your device, not taken on a server's word.</p></div>
|
||||||
|
<div class="prin"><div class="n">02</div><h3>No server of record</h3><p>State lives on open relays. Any client can read it; no one can close your account or delete your history out from under you.</p></div>
|
||||||
|
<div class="prin"><div class="n">03</div><h3>Own the algorithm</h3><p>The feed, the policy, the trust graph, the price — all of it is data you write and swap. No opaque ranking, no locked-in rules.</p></div>
|
||||||
|
<div class="prin"><div class="n">04</div><h3>Static-first</h3><p>Each block embeds in a plain static site. The code that decides anything about you runs on your side, where you can read it.</p></div>
|
||||||
|
<div class="prin"><div class="n">05</div><h3>Bitcoin-native money</h3><p>Value moves over Lightning and settles cryptographically. Payment is proof, not a promise from a processor that can reverse it.</p></div>
|
||||||
|
<div class="prin"><div class="n">06</div><h3>No platform to capture</h3><p>Vendor-neutral format, vendor-neutral distribution. Fork any client; the network is the events, not the front door.</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="builders" id="build">
|
||||||
|
<div class="frame">
|
||||||
|
<div>
|
||||||
|
<p class="coord" style="margin-bottom:18px">§ 05 — for builders</p>
|
||||||
|
<h2 class="display">Assemble your own.</h2>
|
||||||
|
<p>Every block is open and composable, with a dependency-free core and a static build. Start with
|
||||||
|
the capability network — install its skill and let an agent search, publish, and install over
|
||||||
|
Nostr — or embed a single block in a site you already have.</p>
|
||||||
|
<div class="actions">
|
||||||
|
<a class="btn" href="https://tessera.bitblocks.network">Explore Tessera</a>
|
||||||
|
<a class="btn ghost" href="https://github.com/PR0M3TH3AN">Source on GitHub</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="term" aria-hidden="true">
|
||||||
|
<div><span class="c"># install the capability network's own skill</span></div>
|
||||||
|
<div><span class="g">$</span> tessera install tessera</div>
|
||||||
|
<div style="height:10px"></div>
|
||||||
|
<div><span class="c"># it verifies signature + hash on your machine</span></div>
|
||||||
|
<div><span class="c"># — signed by substrate, not our word</span></div>
|
||||||
|
<div style="height:10px"></div>
|
||||||
|
<div><span class="g">$</span> tessera search "pdf ocr"</div>
|
||||||
|
<div><span class="g">$</span> tessera inspect <naddr><span class="c"> # trust report</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="frame">
|
||||||
|
<div class="fcol">
|
||||||
|
<h4>the blocks</h4>
|
||||||
|
<a href="https://login.bitblocks.network">BitLogin — identity</a>
|
||||||
|
<a href="https://gate.bitblocks.network">BitGate — policy</a>
|
||||||
|
<a href="https://feed.bitblocks.network">BitFeed — feeds</a>
|
||||||
|
<a href="https://bitunlock.network">BitUnlock — payments</a>
|
||||||
|
<a href="https://tessera.bitblocks.network">Tessera — capabilities</a>
|
||||||
|
</div>
|
||||||
|
<div class="fcol">
|
||||||
|
<h4>build</h4>
|
||||||
|
<a href="https://github.com/PR0M3TH3AN">GitHub</a>
|
||||||
|
<a href="https://agent-plugins.org">Agent Plugins spec</a>
|
||||||
|
<a href="#compose">How they compose</a>
|
||||||
|
</div>
|
||||||
|
<div class="fcol" style="align-self:flex-end;text-align:right">
|
||||||
|
<span class="sign">bitblocks · an owner's internet</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="./js/bitblocks.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
// Theme toggle (light / dark / system), persisted. The page is theme-aware via
|
||||||
|
// CSS tokens; this only stamps an explicit choice on the root.
|
||||||
|
(() => {
|
||||||
|
const KEY = 'bitblocks:theme';
|
||||||
|
const root = document.documentElement;
|
||||||
|
const saved = localStorage.getItem(KEY);
|
||||||
|
if (saved === 'light' || saved === 'dark') root.setAttribute('data-theme', saved);
|
||||||
|
|
||||||
|
const btn = document.getElementById('theme');
|
||||||
|
const glyph = () => {
|
||||||
|
const t = root.getAttribute('data-theme');
|
||||||
|
btn.textContent = t === 'dark' ? '☾' : t === 'light' ? '☀' : '◑';
|
||||||
|
};
|
||||||
|
glyph();
|
||||||
|
btn?.addEventListener('click', () => {
|
||||||
|
const cur = root.getAttribute('data-theme');
|
||||||
|
const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
// Cycle: system → opposite of system → the other → system.
|
||||||
|
const next = !cur ? (prefersDark ? 'light' : 'dark') : cur === (prefersDark ? 'light' : 'dark') ? (prefersDark ? 'dark' : 'light') : null;
|
||||||
|
if (next) { root.setAttribute('data-theme', next); localStorage.setItem(KEY, next); }
|
||||||
|
else { root.removeAttribute('data-theme'); localStorage.removeItem(KEY); }
|
||||||
|
glyph();
|
||||||
|
});
|
||||||
|
})();
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://openapi.vercel.sh/vercel.json",
|
||||||
|
"buildCommand": null,
|
||||||
|
"installCommand": null,
|
||||||
|
"framework": null,
|
||||||
|
"outputDirectory": ".",
|
||||||
|
"headers": [
|
||||||
|
{
|
||||||
|
"source": "/(.*)",
|
||||||
|
"headers": [
|
||||||
|
{
|
||||||
|
"key": "Content-Security-Policy",
|
||||||
|
"value": "default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'; object-src 'none'; upgrade-insecure-requests"
|
||||||
|
},
|
||||||
|
{ "key": "X-Content-Type-Options", "value": "nosniff" },
|
||||||
|
{ "key": "Referrer-Policy", "value": "no-referrer" },
|
||||||
|
{ "key": "X-Frame-Options", "value": "DENY" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in new issue
Block a user