Scale — From the Planck Length to the Observable Universe
Fitting 62 orders of magnitude into a single canvas — uniform warp mapping, custom object rendering, and the challenge of relative scale
The Problem — 62 Orders of Magnitude
The Planck length is 10⁻³⁵m. The observable universe is 10²⁷m. Between them lie 62 orders of magnitude. With linear scrolling, you would have to scroll tens of thousands of screens just to get from the quantum realm to an atom.
The core challenge of any "Scale of the Universe" experience is making this extreme range feel natural to explore. Would a logarithmic scale solve it? Simple log scales have their own traps.
Uniform Placement — scaleWarp
The problem with a plain log scale is that objects are not evenly distributed. The quantum realm (10⁻³⁵ to 10⁻¹⁴) has 4 objects spread across 20 orders of magnitude, while the human realm (10⁻³ to 10¹) packs 4 objects into just 4. A naive log mapping leaves the quantum realm empty and the human realm cluttered.
The solution was a "visual warp" system. Every adjacent pair of objects is placed at an equal visual interval — 1 visual unit apart, regardless of their log-scale distance.
// Place every adjacent object pair at the same visual interval
const UNIFORM_GAP = 1;
function buildWarpTable(): WarpPoint[] {
const positions = [...objectLogPositions].sort((a, b) => a - b);
const points: WarpPoint[] = [{ log: positions[0], visual: 0 }];
let visual = 0;
for (let i = 1; i < positions.length; i++) {
visual += UNIFORM_GAP;
points.push({ log: positions[i], visual });
}
return points;
}
Binary-search logToVisual/visualToLog converters do the rest. The 20-order-of-magnitude void in the quantum realm gets compressed; dense regions get spread apart. Every scroll covers the same visual distance to the next object, so the user never wanders through empty space.
Relative Size — Visible yet Comparable
Rendering all 38 objects at the same size defeats the purpose of a scale comparison. But applying real physical ratios means a proton (10⁻¹⁵m) vanishes next to Earth (10⁷m).
The compromise is an "80% log ratio."
const delta = obj.logSize - logScale; // difference from current center
const RATIO_POWER = 0.8;
const sizeRatio = Math.pow(10, delta * RATIO_POWER);
const radius = Math.max(3, Math.min(maxDraw, baseR * sizeRatio));
An object at delta=0 (center of the viewport) renders at its base size (300px). Each order of magnitude away scales by 10⁰·⁸ ≈ 6.3×. Gentler than true physics (10×), but enough to feel the difference.
The anchor method matters too. Center-anchoring makes objects jump vertically as they grow. A "bottom-left corner anchor" keeps objects grounded on a baseline, expanding rightward and upward — a much more natural visual flow.
38 Objects, 14 Custom Shapes
Drawing every object as a plain circle would be visually dull. We built 14 custom shape renderers.
| Shape | Objects | Key Technique |
|---|---|---|
glow | Planck, quark, proton, electron | 3-layer radial glow + pulsation |
orbit | Hydrogen, carbon | Nucleus + electron orbit (ellipse + revolving dot) |
helix | DNA | Double helix — Catmull-Rom spline + rungs |
blob | Virus | Spike proteins + capsid pattern |
bacteria | E. coli | 4 flagella + 22 pili + 30 ribosomes |
cell | Red blood cell | Biconcave disc + gradient |
silhouette | Ant, human, whale | Ellipse-composite silhouettes |
circle | Sand grain, coin, soccer ball | Basic circle + texture detail |
mountain | Everest | Triangle composition + snow line + summit flag |
rect | ISS, Karman line | Solar panels, atmospheric boundary |
planet | Moon, Earth, Jupiter, Saturn | Atmosphere glow + surface detail (craters, continents, bands) |
star | Sun, Proxima Centauri | Corona layers + chromosphere + sunspots |
galaxy | Milky Way, Andromeda | Spiral arms (multi-layer gradient + star particles) |
cluster | Supercluster, filament, observable | Dot clusters + connecting lines (cosmic web) |
The DNA double helix was the trickiest. A simple pair of sine waves looks flat. We split front and back strands, interpolated with Catmull-Rom for smooth curves, and dimmed the back strand to create depth. The result reads as three-dimensional without any 3D math.
Bacteria was another challenge. Referencing microscope photos, we animated the undulating flagella, short pili, and internal ribosomes and plasmids. At 150+ canvas calls per frame it sounds expensive, but only one bacterium is ever visible at a time — performance is a non-issue.
Usability — The Experience of Discovery
The biggest UX risk with canvas-based interactive content is the "what do I do?" moment. There are no buttons, no scroll bars — just a dark canvas.
Three solutions address this.
First, an introductory guide text. On first load, "← Scroll to explore the universe →" appears at the center and fades out after about 3 seconds. It disappears immediately once the user starts scrolling.
Second, chevron arrows. Purple bouncing chevrons appear at the left and right edges whenever there is more content in that direction.
Third, a bottom gauge bar. It visualizes the current position within the entire scale range, alongside the current category label (Quantum Realm, Solar System, etc.) and the 10ᴺ m numeric indicator.
Input supports mouse wheel, touch swipe, and arrow keys. Every input is converted to visual-space units, so the distance to the next object feels consistent regardless of input method.
Mobile — Same Content, Different Density
A layout that works on desktop falls apart on mobile: objects overlap, labels get clipped, empty space feels too wide.
On mobile, the visual-unit-to-screen ratio is scaled up 2.5×.
const VIS_RATIO_PC = 0.18; // 1 visual unit = 18% of screen width
const VIS_RATIO_MOBILE = 0.44; // 1 visual unit = 44% of screen width
This widens the gap between adjacent objects on small screens, preventing overlap. Base object radius also drops from 150px to 90px, and the object-plus-label group is vertically centered between the header (64px) and the bottom gauge to maximize available space.
Closing Thoughts
Intuitively grasping the size of the universe is impossible. The human brain was not designed to process a 10²² fold difference.
But scrolling from DNA to a red blood cell in one gesture, then onward to an ant, a person, Everest — that sequence delivers something numbers alone cannot. If scrolling through 62 orders of magnitude from the Planck length to the observable universe makes you feel how narrow and yet how vast the place we stand really is — this page has done its job.