Memory bank

The real memory surface: facts from a chat get saved into the memory list, then recalled in a new chat

Prompt for your agentpaste into Claude Code or Codex

Add the "Memory bank" video component (ChatGPT memory, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/memory-bank.zip?v=f96b05cbf8e5 and unzip it into components/memory-bank/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/memory-bank && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o memory-bank.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.

Code

One file. The project download adds the fonts, skins and motion kit it runs on.

index.htmlhtmlDownload

1<!doctype html>
2<html lang="en" data-composition-variables='[
3  {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"ChatGPT memory"},{"value":"1","label":"Claude memory"},{"value":"2","label":"Obsidian second brain"}]},
4  {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}
5]'>
6  <head>
7    <meta charset="UTF-8" />
8    <meta name="viewport" content="width=1920, height=1080" />
9    <link rel="stylesheet" href="assets/fonts/fonts.css" />
10    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
11    <link rel="stylesheet" href="assets/skins/claude/skin.css" />
12    <link rel="stylesheet" href="assets/skins/device/skin.css" />
13    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
14    <script src="assets/kit/motion/motion.js"></script>
15    <script src="assets/skins/chatgpt/icons.js"></script>
16    <script src="assets/skins/claude/icons.js"></script>
17    <script src="assets/skins/device/icons.js"></script>
18    <style>
19      /* ---------- stage (DESIGN.md tokens) ---------- */
20      :root { --stage: #F5F5F4; }
21      body.is-dark { --stage: #0E0E0F; }
22      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }
23      * { box-sizing: border-box; }
24      #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); font-family: "Inter", sans-serif; }
25      #stage { position: absolute; inset: 0; background: var(--stage); }
26      #place { position: absolute; }
27      #frame { position: relative; }
28 
29      /* ---------- shared component pieces ---------- */
30      .mb-page { position: absolute; inset: 0; }
31      .mb-hwrap { overflow: hidden; }                  /* height-animated wrapper (new memory, recall disclosure) */
32      .mb-wash { position: absolute; inset: 0; pointer-events: none; }
33      .mb-chev { display: inline-flex; }
34      .mb-stackbtn { display: inline-grid; place-items: center; }
35      .mb-stackbtn > * { grid-area: 1 / 1; }
36      .mb-bd { position: absolute; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.22); }
37      [data-theme="dark"] .mb-bd { background: rgba(0, 0, 0, 0.55); }
38 
39      /* ==========================================================
40         Variant 0: chatgpt.com (classic 16px reading column)
41         ========================================================== */
42      /* chatgpt.com dark: page #212121 with the rail one step darker, so the rail reads as its own surface */
43      #frame.sk-chatgpt[data-theme="dark"] #win { --cg-page: #212121; --cg-rail: #181818; }
44      #frame.sk-chatgpt .mb-bd { background: rgba(0, 0, 0, 0.45); }
45      #frame.sk-chatgpt[data-theme="dark"] .mb-bd { background: rgba(0, 0, 0, 0.6); }
46      .sk-chatgpt .cg-web.is-classic .cg-user { padding: 12px 18px; border-radius: 26px; max-width: 76%; }
47      .mb-cg-thread { padding-top: 54px; }
48      .mb-cg-ai { margin-top: 22px; }

Open full file

Download project1 MB