This page converts the PDF brief into a standalone HTML experience and keeps the full information visible: core thesis, six narrative milestones, scroll-to-Z-space architecture, formulas, component responsibilities, and production implementation baseline.
1. Narrative Core: Philosophical Vision & End Goal
The experience translates the scientific and mathematical insight popularized by Veritasium's "You've (Likely) Been Playing The Game of Life Wrong." The visitor begins with the common subconscious model that life behaves like an additive normal distribution: consistency, low deviation, and aiming for the statistical mean. The page then moves them into a power-law model where averages can become irrelevant because extreme outliers dominate total outcome.
Critical thesis: Move the user's mental frame from additive consistency to multiplicative persistence. In volatile systems with capped downside and open exponential upside, aiming for the safe mean is mathematically suboptimal; life should be approached through repeated, intelligent chances.
Step 1: Disruption
A dark, minimalist, vacuum-like opening asks: "Are you playing the game of life wrong?" It interrupts standard landing-page rhythm and asks the user to scroll for the answer.
Step 2: Bifurcation Matrix
A normal curve sits beside a skewed long-tail curve. It isolates two frameworks: bounded physical systems like height, and scale-free systems like wealth, attention, creative output, or venture returns.
Step 3: Multiplication Avalanche
Additive random factors cancel toward normality. Multiplicative factors compound into asymmetric lognormal or power-law outcomes, shown as self-similar branches, preferential attachment, and compounding effects.
Step 4: Visualizing Asymmetric Risk
A physical risk model shows downside hitting a floor at zero while upside extends vertically. This reframes failure: a missed email or failed small project is bounded; a successful hit can scale across orders of magnitude.
Step 5: Venture Bet Sandbox
This deliberately modeled portfolio sets 47 of 50 attempts to failure—a 94% simulation rate—plus two break-even attempts and one recovering outlier. It demonstrates skew; it is not presented as a measured failure rate for startups or creative work.
Step 6: Epiphany
Abstract data collapses into personal strategy: do not strive to be average on a safe curve. Make repeated intelligent bets, optimize for persistence over standard consistency, and leverage structural volatility.
3. Scroll-to-Z-Space Rig
Instead of moving panels upward on the Y-axis, the interface maps native scroll progress to a Z-axis camera timeline. HTML layers sit at different virtual depths, and the camera appears to push through them. Native scroll is decoupled from viewport rendering, lowering layout recalculation risk and keeping transforms on the compositor.
| Component | CSS/JS configuration | Functional responsibility |
|---|
| Scroll Track Container | height: 600vh; position: relative; | Establishes total travel length and master timeline for interpolation. |
| Sticky Viewport Anchor | position: sticky; top: 0; height: 100vh; overflow: hidden; | Locks the visual canvas while the user scrolls through the track. |
| 3D Stage Container | perspective: 1000px; transform-style: preserve-3d; | Creates depth context for layers and camera-like motion. |
| GPU Compositor Layers | translate3d(); will-change: transform, opacity; | Maps each narrative panel to scroll progress with depth and opacity functions. |
Z-Space Translation Map
Let normalized scroll progress be p, where 0.0 <= p <= 1.0. The baseline brief mapped depth linearly, Tz = Oz + (p * v), but a purely linear camera leaves every chapter permanently mid-flight: it is always scaling, never legible at 1:1, and chapter 5 becomes a click target that moves under the cursor. Depth is instead piecewise, with an explicit hold:
Tz = (clamp(in0, p, in1) - in1) * vIn
+ (clamp(out0, p, out1) - out0) * vOut
Each layer approaches from far across [in0, in1], holds at Tz = 0 across [in1, out0], then departs past the camera across [out0, out1]. Both terms are clamp() on a single custom property, so the whole rig stays compositor-side. Every hold window sits inside its chapter's fully-opaque band, giving 264-456px of scroll at exactly 1:1 scale, the widest of them on the interactive chapter. Opacity remains localized around each layer's active band.
Production Implementation Notes
- Use a standalone HTML route with no framework dependency.
- Set
--scroll-p via requestAnimationFrame, not direct scroll mutation.
- Prefer CSS transforms and opacity for low-latency compositor work.
- Read
--scroll-p back from a cached JS value, never getComputedStyle, inside any per-frame loop.
- Give the interactive chapter the widest hold on the page so the simulation is never a moving target.
- On small screens: shorten the camera throw, drop
backdrop-filter (it forces a per-frame readback behind every moving panel), and scale the starfield budget and DPR cap to the device.
- Idle the starfield loop via
IntersectionObserver once the sticky viewport leaves the screen.
- Provide reduced-motion fallback where layers become normal stacked sections.
- Keep interactive sandbox state local and deterministic enough to demonstrate skew.
4. Baseline Implementation Pattern
<div class="scroll-container" id="scrollTrack">
<div class="viewport-sticky">
<main class="stage-3d">
<section class="layer" id="layer1">...</section>
<section class="layer" id="layer2">...</section>
<section class="layer" id="layer3">...</section>
<section class="layer" id="layer4">...</section>
<section class="layer" id="layer5">...</section>
<section class="layer" id="layer6">...</section>
</main>
</div>
</div>
const progress = Math.max(0, Math.min(1, scrollTop / trackHeight));
document.documentElement.style.setProperty("--scroll-p", progress);