Skip to content

redesign: serious academic look — drop calligraphy/codex framing #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
duanyiqun merged 1 commit into from
Jun 18, 2026
Merged

redesign: serious academic look — drop calligraphy/codex framing #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs-site/assets/og-image.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 37 additions & 58 deletions docs-site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,16 @@
<meta property="og:image:type" content="image/svg+xml" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="CogniFold codex title plate with a hand-drawn crayon brain and the line: ~60% of human memory modeled." />
<meta property="og:image:alt" content="CogniFold — a brain-inspired agent memory; ~60% of human memory systems modeled." />

<!-- Twitter / X card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="CogniFold — A brain-inspired always-on agent memory" />
<meta name="twitter:description" content="An always-on agent memory that folds events into self-emerging cognitive structure. ~60% of human memory systems modeled." />
<meta name="twitter:image" content="https://opennorve.github.io/CogniFold/assets/og-image.svg" />
<meta name="twitter:image:alt" content="CogniFold codex title plate with a hand-drawn crayon brain." />

<!-- Google Fonts: Cormorant Garamond (display serif), EB Garamond (body serif), Caveat (handwriting) -->
<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=Caveat:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
<meta name="twitter:image:alt" content="CogniFold — memory-system coverage map." />

<!-- System fonts only; no web-font dependency. -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
Expand Down Expand Up @@ -94,24 +90,14 @@
</header>

<main id="top">
<!-- ============ 1. HERO — manuscript title plate ============ -->
<!-- ============ 1. HERO ============ -->
<section class="hero" id="hero">
<div class="hero__guides" aria-hidden="true">
<svg viewBox="0 0 1000 700" preserveAspectRatio="xMidYMid slice">
<circle cx="500" cy="350" r="300" fill="none" stroke="var(--ink-faint)" stroke-width="0.8" />
<circle cx="500" cy="350" r="185" fill="none" stroke="var(--ink-faint)" stroke-width="0.6" />
<rect x="200" y="50" width="600" height="600" fill="none" stroke="var(--ink-faint)" stroke-width="0.6" />
<line x1="500" y1="50" x2="500" y2="650" stroke="var(--ink-faint)" stroke-width="0.5" />
<line x1="200" y1="350" x2="800" y2="350" stroke="var(--ink-faint)" stroke-width="0.5" />
</svg>
</div>

<div class="hero__inner reveal">
<p class="hero__eyebrow">Codex of Artificial Memory · MMXXVI</p>
<p class="hero__eyebrow">Brain-inspired agent memory</p>
<h1 class="hero__title">CogniFold</h1>
<p class="hero__tagline">
A brain-inspired, always-on agent memory that folds events into
<em>self-emerging cognitive structure.</em>
An always-on agent memory that folds events into self-emerging
cognitive structure, with proactive intent crystallization.
</p>

<div class="hero__ring" id="heroRing" aria-label="Approximately 60 percent of human memory systems modeled">
Expand All @@ -122,31 +108,29 @@ <h1 class="hero__title">CogniFold</h1>
<a class="pill pill--ink" href="https://github.com/OpenNorve/CogniFold" target="_blank" rel="noopener">
View on GitHub
</a>
<a class="pill pill--ghost" href="#brain">
Explore the brain <span aria-hidden="true">↓</span>
<a class="pill pill--ghost" href="https://arxiv.org/abs/2605.13438" target="_blank" rel="noopener">
Read the paper
</a>
</div>

<p class="margin-note hero__note">
<span class="caveat">“The noblest pleasure is the joy of understanding.”</span>
</p>
<p class="hero__note">Apache-2.0 · Python · MCP-compatible</p>
</div>
<div class="ink-divider" aria-hidden="true"></div>
</section>

<!-- ============ 2. THE MEMORY BRAIN — interactive centerpiece ============ -->
<!-- ============ 2. MEMORY-SYSTEM COVERAGE — interactive map ============ -->
<section class="brain-sec" id="brain">
<div class="section-head reveal">
<p class="kicker">Plate I</p>
<h2 class="display">The Memory Brain</h2>
<p class="kicker">Coverage map</p>
<h2 class="display">Memory systems</h2>
<p class="lede">
A living atlas of human memory, drawn by hand. Each region maps to a memory system —
hover, tab, or tap to wake its neurons and read the field notes.
CogniFold maps twelve human memory systems onto its topology. Each brain region links to a
system — hover, tab, or tap to inspect its mechanism, evidence, and status.
</p>
</div>

<div class="brain-layout">
<figure class="brain-stage reveal" aria-label="Interactive hand-drawn anatomical brain mapping memory systems">
<figure class="brain-stage reveal" aria-label="Interactive brain diagram mapping human memory systems to CogniFold mechanisms">
<div id="brainHost" class="brain-host"></div>
<figcaption class="brain-legend" aria-hidden="true">
<span class="lg lg--covered"><i></i>covered</span>
Expand All @@ -172,16 +156,16 @@ <h2 class="display">The Memory Brain</h2>
<!-- ============ 3. ARCHITECTURE — tri-layer CLS loop ============ -->
<section class="arch" id="architecture">
<div class="section-head reveal">
<p class="kicker">Plate II</p>
<h2 class="display">The Folding Loop</h2>
<p class="kicker">Architecture</p>
<h2 class="display">The folding loop</h2>
<p class="lede">
Complementary Learning Systems, redrawn for an agent. Episodes are inked, folded into
concepts, and — the differentiator — crystallized forward into <em>intent</em>.
A Complementary Learning Systems design for agents: episodes are captured, folded into
concepts, and crystallized forward into intent. Proactive intent is the differentiator.
</p>
</div>

<div class="arch__diagram reveal" id="archDiagram" aria-label="Three-layer memory loop: Event, Concept, Intent, anchored by Time">
<!-- sketched CLS diagram injected by app.js -->
<!-- CLS diagram injected by app.js -->
</div>

<div class="arch__cards">
Expand All @@ -201,16 +185,16 @@ <h3>Prefrontal · INTENT</h3>
<p>Concepts and time anchors crystallize into proactive intent — remembering to act, by topology.</p>
</div>
</div>
<p class="margin-note arch__note caveat">tempus — the fourth axis — threads through every layer</p>
<p class="arch__note note">Time is the fourth axis, threading through every layer.</p>
<div class="ink-divider" aria-hidden="true"></div>
</section>

<!-- ============ 4. BENCHMARKS — results ledger ============ -->
<!-- ============ 4. BENCHMARKS ============ -->
<section class="ledger" id="benchmarks">
<div class="section-head reveal">
<p class="kicker">Plate III</p>
<h2 class="display">The Results Ledger</h2>
<p class="lede">Measured on public benchmarks. No competitor figures invented; entries are CogniFold's own marks.</p>
<p class="kicker">Results</p>
<h2 class="display">Benchmarks</h2>
<p class="lede">CogniFold's measured results on public benchmarks. Figures are CogniFold's own; no competitor numbers are shown.</p>
</div>
<div class="ledger__grid" id="ledgerGrid">
<!-- benchmark cards injected by app.js -->
Expand All @@ -221,29 +205,29 @@ <h2 class="display">The Results Ledger</h2>
<!-- ============ 5. QUICKSTART + INTEGRATIONS ============ -->
<section class="quick" id="quickstart">
<div class="section-head reveal">
<p class="kicker">Plate IV</p>
<h2 class="display">A Recipe for Memory</h2>
<p class="lede">Install, serve, and connect over MCP. Three steps to an agent that remembers.</p>
<p class="kicker">Quickstart</p>
<h2 class="display">Get started</h2>
<p class="lede">Install, run the server, and connect any MCP-capable agent.</p>
</div>

<div class="quick__layout">
<div class="recipe reveal">
<div class="recipe__tab">recipe · in vitro</div>
<pre class="recipe__code"><code><span class="c"># 1 · install</span>
<div class="recipe__tab">shell</div>
<pre class="recipe__code"><code><span class="c"># install</span>
pip install cognifold

<span class="c"># 2 · run the memory server</span>
<span class="c"># run the memory server</span>
cognifold serve --port 8800

<span class="c"># 3 · connect any MCP-capable agent</span>
<span class="c"># connect any MCP-capable agent</span>
cognifold mcp --transport stdio</code></pre>
</div>

<ul class="quick__links reveal" aria-label="Documentation links">
<li><a href="../docs/DEPLOYMENT.md"><span class="caveat">i.</span> Deployment guide</a></li>
<li><a href="../docs/INTEGRATIONS.md"><span class="caveat">ii.</span> Integrations &amp; MCP</a></li>
<li><a href="../docs/PROMPTS.md"><span class="caveat">iii.</span> Prompt library</a></li>
<li><a href="https://github.com/OpenNorve/CogniFold" target="_blank" rel="noopener"><span class="caveat">iv.</span> Source on GitHub</a></li>
<li><a href="../docs/DEPLOYMENT.md"><span class="idx">01</span> Deployment guide</a></li>
<li><a href="../docs/INTEGRATIONS.md"><span class="idx">02</span> Integrations &amp; MCP</a></li>
<li><a href="../docs/PROMPTS.md"><span class="idx">03</span> Prompt library</a></li>
<li><a href="https://github.com/OpenNorve/CogniFold" target="_blank" rel="noopener"><span class="idx">04</span> Source on GitHub</a></li>
</ul>
</div>
<div class="ink-divider" aria-hidden="true"></div>
Expand All @@ -259,11 +243,6 @@ <h2 class="display">A Recipe for Memory</h2>
<a href="https://arxiv.org/abs/2605.13438" target="_blank" rel="noopener">arXiv:2605.13438</a> ·
<a href="https://github.com/OpenNorve/CogniFold" target="_blank" rel="noopener">OpenNorve / CogniFold</a>
</p>
<p class="footer__mirror">
<span class="mirror" tabindex="0" role="img"
aria-label="Mirror-writing easter egg, reading: memoria plicat ante — memory folds forward"
title="memoria plicat ante — read in the mirror, as Leonardo wrote">memoria plicat ante</span>
</p>
</div>
</footer>

Expand Down
51 changes: 27 additions & 24 deletions docs-site/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// app.js — data-driven entry point for the CogniFold codex.
// app.js — data-driven entry point for the CogniFold site.
// Loads memory_coverage.json (single source of truth) and wires up: nav,
// scroll-reveal, the coverage ring, the interactive brain, the notebook
// cards + system index, the CLS architecture diagram, and the results ledger.
Expand All @@ -8,6 +8,9 @@
import { renderBrain } from "./brain.js";

const SVG_NS = "http://www.w3.org/2000/svg";
// System font stacks for in-SVG text (no web fonts).
const SANS = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
const MONO = "ui-monospace, 'SF Mono', Menlo, Consolas, monospace";
const reduceMotion =
window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
Expand Down Expand Up @@ -308,43 +311,43 @@ function renderArchDiagram(rough) {
{ x: 825, y: 170, label: "INTENT", sub: "prefrontal", color: "#3f4f6b" },
];

// sketchy arrows between nodes
// arrows between nodes
const arrow = (x1, y, x2, label) => {
const g = el("g", {});
g.appendChild(rc.line(x1, y, x2, y, { stroke: "#2b2118", strokeWidth: 2, roughness: 2, bowing: 1.5 }));
g.appendChild(rc.line(x2, y, x2 - 14, y - 8, { stroke: "#2b2118", strokeWidth: 2, roughness: 1.6 }));
g.appendChild(rc.line(x2, y, x2 - 14, y + 8, { stroke: "#2b2118", strokeWidth: 2, roughness: 1.6 }));
const t = el("text", { x: (x1 + x2) / 2, y: y - 18, "text-anchor": "middle",
"font-family": "Caveat, cursive", "font-size": "22", fill: "#9c4a2f" });
g.appendChild(rc.line(x1, y, x2, y, { stroke: "#1d1d1f", strokeWidth: 1.6, roughness: 1, bowing: 0.8 }));
g.appendChild(rc.line(x2, y, x2 - 13, y - 7, { stroke: "#1d1d1f", strokeWidth: 1.6, roughness: 0.8 }));
g.appendChild(rc.line(x2, y, x2 - 13, y + 7, { stroke: "#1d1d1f", strokeWidth: 1.6, roughness: 0.8 }));
const t = el("text", { x: (x1 + x2) / 2, y: y - 16, "text-anchor": "middle",
"font-family": SANS, "font-size": "15", "font-weight": "500", fill: "#515154" });
t.textContent = label;
g.appendChild(t);
return g;
};
svg.appendChild(arrow(255, 170, 415, "fold"));
svg.appendChild(arrow(580, 170, 745, "crystallize"));

// feedback arc back (CONCEPT informs new EVENTs) — curved sketchy
// feedback arc back (CONCEPT informs new EVENTs)
svg.appendChild(rc.curve(
[[825, 235], [650, 320], [400, 320], [175, 235]],
{ stroke: "#6f7d55", strokeWidth: 1.6, roughness: 2.2, bowing: 2 }
{ stroke: "#86868b", strokeWidth: 1.4, roughness: 1, bowing: 1 }
));
const fb = el("text", { x: 500, y: 340, "text-anchor": "middle",
"font-family": "Caveat, cursive", "font-size": "20", fill: "#6f7d55" });
"font-family": SANS, "font-size": "14", fill: "#86868b" });
fb.textContent = "intent reshapes attention — the loop closes";
svg.appendChild(fb);

// nodes (hand-drawn circles + hachure)
// nodes
nodes.forEach((n, i) => {
const g = el("g", { filter: "url(#crayon)" });
const g = el("g", {});
g.appendChild(rc.circle(n.x, n.y, 130, {
stroke: n.color, strokeWidth: 2.4, roughness: 1.8, bowing: 1.3,
fill: n.color, fillStyle: "hachure", fillWeight: 1, hachureGap: 7,
stroke: n.color, strokeWidth: 2, roughness: 0.9, bowing: 0.8,
fill: n.color, fillStyle: "hachure", fillWeight: 0.8, hachureGap: 9,
}));
const t1 = el("text", { x: n.x, y: n.y - 2, "text-anchor": "middle",
"font-family": "Cormorant Garamond, serif", "font-weight": "700", "font-size": "30", fill: "#2b2118" });
const t1 = el("text", { x: n.x, y: n.y - 1, "text-anchor": "middle",
"font-family": SANS, "font-weight": "700", "font-size": "24", fill: "#1d1d1f" });
t1.textContent = n.label;
const t2 = el("text", { x: n.x, y: n.y + 22, "text-anchor": "middle",
"font-family": "IBM Plex Mono, monospace", "font-size": "11", fill: "#4a3b2b",
const t2 = el("text", { x: n.x, y: n.y + 20, "text-anchor": "middle",
"font-family": MONO, "font-size": "10", fill: "#515154",
"letter-spacing": "0.12em" });
t2.textContent = n.sub.toUpperCase();
svg.append(g, t1, t2);
Expand All @@ -353,11 +356,11 @@ function renderArchDiagram(rough) {
// TIME axis threading underneath
const timeY = 40;
svg.appendChild(rc.line(120, timeY, 880, timeY, {
stroke: "#3f4f6b", strokeWidth: 1.2, roughness: 2.6, bowing: 1.5, strokeLineDash: [2, 8],
stroke: "#86868b", strokeWidth: 1, roughness: 1, bowing: 1, strokeLineDash: [2, 8],
}));
const tlabel = el("text", { x: 500, y: timeY - 12, "text-anchor": "middle",
"font-family": "Caveat, cursive", "font-size": "22", fill: "#3f4f6b" });
tlabel.textContent = "TIME — the fourth axis";
"font-family": MONO, "font-size": "11", "letter-spacing": "0.1em", fill: "#86868b" });
tlabel.textContent = "TIME · the fourth axis";
svg.appendChild(tlabel);
// tick marks down to each node
nodes.forEach((n) => {
Expand Down Expand Up @@ -401,7 +404,7 @@ function renderBrainFallback(host, data) {
wrap.setAttribute("role", "list");
wrap.setAttribute("aria-label", "Memory systems mapped to brain regions");
wrap.innerHTML =
`<p class="brain-fallback__note caveat">interactive sketch unavailable — the atlas, in plain ink:</p>` +
`<p class="brain-fallback__note">Interactive diagram unavailable. Memory systems:</p>` +
data.systems
.map(
(s) => `<div class="brain-fallback__row" data-status="${s.status}" role="listitem">
Expand All @@ -428,8 +431,8 @@ function renderHardFallback() {
const host = document.getElementById("brainHost");
if (host) {
host.innerHTML =
`<div class="brain-fallback"><p class="brain-fallback__note caveat">` +
`The memory atlas could not be loaded right now. CogniFold models roughly 60% of ` +
`<div class="brain-fallback"><p class="brain-fallback__note">` +
`Coverage data could not be loaded. CogniFold models roughly 60% of ` +
`human memory systems — see the architecture and results below.</p></div>`;
}
}
Expand Down
17 changes: 3 additions & 14 deletions docs-site/js/brain.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const reduceMotion =
window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// --- Region geometry (lateral view, hand-tuned) -------------------------
// Each region: closed polygon (for rough fill), a label anchor, the systems
// it hosts, and whether the label is rendered as mirror-writing (easter egg).
// Each region: closed polygon (for rough fill), a label anchor, and the
// memory systems it hosts.
const REGIONS = [
{
id: "prefrontal",
Expand All @@ -42,7 +42,6 @@ const REGIONS = [
label: "neocortex",
systems: ["semantic", "priming"],
labelAt: [430, 95],
mirror: true,
poly: [[235, 150], [300, 110], [400, 95], [500, 110], [560, 160], [520, 215], [420, 215], [320, 210], [250, 190]],
},
{
Expand Down Expand Up @@ -71,7 +70,6 @@ const REGIONS = [
label: "cerebellum",
systems: ["procedural"],
labelAt: [600, 380],
mirror: true,
poly: [[540, 320], [620, 310], [675, 350], [675, 420], [610, 450], [545, 420], [525, 365]],
},
{
Expand Down Expand Up @@ -279,16 +277,7 @@ export function renderBrain(host, data, onSelect, rough) {
// label
const [lx, ly] = reg.labelAt;
const label = el("text", { class: "region__label", x: lx, y: ly, "text-anchor": "middle" });
if (reg.mirror) {
label.setAttribute("class", "region__label region__mirror");
label.setAttribute("transform", `translate(${2 * lx} 0) scale(-1 1)`);
label.textContent = reg.label;
const t = el("title");
t.textContent = `${reg.label} (mirror-writing, as Leonardo wrote)`;
label.appendChild(t);
} else {
label.textContent = reg.label;
}
label.textContent = reg.label;
g.appendChild(label);

regionEls.set(reg.id, { g, status, systems: reg.systems });
Expand Down
Loading