STATUS lo-fi exploration DATE 2026-04-18 FIDELITY wireframe
What you asked for
Pure prose by default. Paragraphs with visuals get a margin indicator. Click → a visual "slides out." Hovering code or diagram parts pulses the linked piece. One visual open at a time. One concept per page.
What I'm exploring
Four distinct layouts for the slide-out moment — side panel, inline-expand, margin gutter, and a persistent canvas. All share the same textual progress bar at the foot so context is never lost.
What's consistent
Serif-adjacent literate-programming vibe (hand-drawn placeholder). Warm terracotta accent. Yellow highlighter for hover links. JetBrains Mono for code & metadata only.
↑ click to compare approaches · 1–4 keys also work
Idea: prose stays on the left. Click an interactive paragraph → the visual slides in from the right.
·Persistence: clicking another paragraph replaces the panel.
·Best when: reader wants to skim prose uninterrupted.
Before we can talk about variables, we need a word for the things that variables hold. A value is a piece of data your program can compute with — a truth, a number, a piece of text. Each value has a type, and the type decides what you're allowed to do with it.
◆
Value types like int and bool are stored directly in the variable's slot of memory. When you write int x = 5;, the number five is literally written into the box labelled x.
tap to open the memory diagram
This is different from how reference types work — we'll meet those in Chapter 4 when we talk about classes and linked lists. For now, every value you create is its own little island.
◆
Assigning one value type to another copies the value. The two variables are now independent — changing one does not change the other. This surprises a lot of beginners.
tap to see copy behaviour
We'll come back to this idea in every chapter of the book. Each time we meet a new type, the very first question will always be: where does this live in memory?
Memory after int x = 5;close ✕
stack slot hovered linked
0x7ffc005x
0x7ffc04—y
0x7ffc08—
0x7ffc0c—
int x = 5; // box 'x' ← 5int y = x; // copy the value, not the boxy = y + 1; // only 'y' changes// x is still 5 — value types are independent
hover a code line to pulse the corresponding box.
hover a box to pulse its line.
Idea: the visual expands inline between paragraphs, pushing content down.
·Best when: reading linearly and you want the visual to feel part of the sentence rather than beside it.
Before we can talk about variables, we need a word for the things that variables hold. A value is a piece of data your program can compute with.
◆
Value types like int and bool are stored directly in the variable's slot of memory. When you write int x = 5;, the number five is literally written into the box labelled x.
diagram below — click marker to collapse
Memory after int x = 5;
0x7ffc005x
0x7ffc046y
0x7ffc08—
0x7ffc0c—
int x = 5;int y = x;y = y + 1;// x still 5, y is 6 — copies, not aliases
Hover any box ↔ code line — they pulse together. esc collapses.
This is different from how reference types work — we'll meet those in Chapter 4. For now, every value you create is its own little island.
◆
Assigning one value type to another copies the value. The two variables are now independent.
We'll come back to this idea in every chapter. Each time we meet a new type, we'll ask: where does it live in memory?
Idea: each interactive paragraph has a mini-preview in the right gutter. Click to enlarge into a floating overlay over the page.
·Best when: reader wants to see what's coming without committing.
Before we can talk about variables, we need a word for the things that variables hold. A value is a piece of data your program can compute with — a truth, a number, a piece of text.
◆
Value types like int and bool are stored directly in the variable's slot of memory. When you write int x = 5;, the number five is literally written into the box labelled x.
Every value you create is its own little island. Reference types — classes, linked lists — behave differently, and we'll meet them in Chapter 4. Hold that thought.
◆
Assigning one value type to another copies the value. The two variables are now independent — changing one does not change the other. This surprises a lot of beginners.
We'll come back to this idea in every chapter of the book. Each time we meet a new type, the very first question will always be: where does this live in memory?
◆
Try it yourself: this next block is a live code playground. Edit the values and watch the memory diagram update.
Idea: prose collapses into a reading rail on the left. The canvas in the center shows the diagram for the active paragraph. Code lives on the right. All three stay linked.
·Best when: re-reading / studying rather than first-pass reading.
READING RAIL
A value is a piece of data; each has a type.
◆
Value types are stored directly in the variable's slot. int x = 5; writes 5 into the box labelled x.
Every value is its own little island. Reference types come later.
◆
Assigning one value to another copies it. Changing one doesn't change the other.
We'll ask the same question every chapter: where does it live in memory?
Canvas — live diagram
linked to ◆ active paragraph
0x7ffc005x
0x7ffc04—y
0x7ffc08—
0x7ffc0c—
the box named x holds 5 directly — no indirection, no pointer, no shared reference.
TWEAK (live widget placeholder)
→ box x updates in the canvas
LINKED CODE
int x = 5;int y = x;y = y + 1;// x is still 5
Hover a code line → the matching box in the canvas pulses. Hover a box → its line pulses back.
NOTES
J/K jump between ◆ paragraphs. SPC hides the rail for focus mode.
1.1 Booleans
1.2 Numbers
1.3 Strings
2.0 Intro
2.1 Values
2.2 Bind
2.3 Scope
2.4 Copy
2.5 Practice
3.1 Arrays
3.2 Idx
3.3 Loop
concept 5 / 12
Open questions for you
1 · Should diagrams stay linked to a specific paragraph, or can a single diagram span several?
2 · Do you want a "diagrams-only" mode — revealing every ◆ marker at once for review?
3 · Should the progress bar also show how many ◆ paragraphs in this concept the reader has opened?
4 · Mobile: stack everything vertically, or hide visuals behind a bottom-sheet?
Likely next moves
→ Pick 1–2 directions and push to mid-fi (real type, real C# sample, real memory diagram).
→ Prototype the hover-link behaviour with a real code block + diagram on a working page.
→ Decide the ◆ marker affordance: margin dot, sidebar rail, or in-text underline.
→ Decide the authoring format so instructors can add ◆ paragraphs without hand-writing JS.