12 interactive widgets hidden in 16 chapters. Spin a casino. Plot your luck. Toggle dark mode. Watch your free-will break.
A reading system by Mike Perina
Sixteen chapters, each with its own interactive widget — a casino simulator, a luck calculator, a perception trick, a hedonic-curve plotter. Custom typography, reading-progress gauge, dark mode, a 720-pixel column that knows when you've stopped scrolling. Hand-built in vanilla HTML, CSS, and JavaScript. Zero framework.
The reading frame
A serif body at 1.1rem, a teal-and-cream palette that reverses in dark mode, a 720-pixel column that holds eight to twelve words per line. Each chapter loads in its own page — no SPA, no spinner, no Lighthouse penalty. Just paper-on-the-web with reading instrumentation underneath.
A red-orange bar pinned to the top of every chapter, tied to scroll position with a live percentage label — so the reader always knows how far in they are. Updates on requestAnimationFrame, not scroll-spam.
A single toggle inverts the entire color system through CSS custom properties. Cream becomes teal, teal becomes cream, the red-orange stays — because contrast is the point, not theme-switching as decoration.
Georgia / Times New Roman at 1.1rem with 1.8 line-height. The width is set so an average reader holds the whole line on a single eye sweep. No reflow, no awkward two-line widows, no measured-by-accident type.
Each chapter is its own file — /chapters/chapter-1.html, /chapter-2, and so on. Bookmarkable, shareable, indexable. No "next" button hijacking the URL bar.
A persistent “← All chapters” affordance at the top-left, hover-animated, that doesn't disappear when you scroll. Built so the reader never feels lost in a chapter.
Arrow keys flip between chapters. Space and Page-Down scroll. Escape exits the reading-progress overlay. The chrome stays out of the way until you ask for it.
The differentiator
Most chapters reach a point where the argument can't be made with another paragraph. So the chapter pauses, and a custom widget — built in vanilla JavaScript, no React, no library — appears inline. You play with it. The paradox is no longer abstract.
Click through a sequence of "decisions" and watch how many of them were already made by the time you noticed. Visualizes the 0.3-second delay between intent and awareness.
Type any post. The widget predicts how many likes it gets based on word count, emotional valence, and time of day. Then asks: would you still post it if you knew?
A three-question Cognitive Reflection Test embedded in the page. Wrong answers are the gut answers. Right answers require pausing. Most readers fail at least one.
An interactive optical illusion that recalibrates as you stare. Demonstrates the chapter's claim — you're not seeing the world, you're seeing a prediction of it.
Drag a marker across a 2D grid of "what's familiar" vs "what's chosen." Watch your comfort zone redraw itself in real-time as you reveal what you've never tried.
Plot any pleasure on the curve — money, food, attention. The widget shows the diminishing-returns slope, then asks where on the curve you currently are. Painfully accurate.
Set the genes, set the environment, watch two siblings diverge across a simulated lifetime. The first widget where the reader has to decide which parameter is "fair."
Layer five protective factors against three stressors. Watch which combinations produce a child who can withstand which kinds of breaks. Companion to Brothers Blueprint.
Identical twins, separated at birth. Decide the two environments. See how much of "personality" the simulator credits to each side. Calibrated against actual twin-study data.
Press “spin” a hundred times. The widget shows your bankroll trajectory and the house's edge converging on its theoretical value. The luckiest reader still loses.
Enter your surface area — relationships, time online, conversations started. The widget outputs your "luck-rate" — the number of opportunities per month statistically arriving at your door.
A live-force-graph of weak ties versus strong ties. Drag nodes around. Watch how a single weak-tie reconnect ripples through twelve degrees of separation in real time.
The architecture
The whole book ships as static HTML. No build step, no framework, no server. The slowest chapter loads in under 280ms on a 3G connection. Search engines see every word — including the closing transcript.
The design system
The whole reader runs on a handful of CSS custom properties. Change one, change the whole book. The palette is Bauhaus-by-way-of-Penguin: cream, teal, red-orange, with a calm light-cream as the resting state for sub-elements.