That Thin Blue Line: Scrolling Through Earth's Atmosphere Into the Overview Effect
The story behind The Limb
Inspired by Overview effect on Wikipedia
Built with Three.js · ShaderMaterial · EffectComposer (UnrealBloomPass) · GSAP ScrollTrigger
Techniques Raymarched Volumetric Atmosphere · FBM Noise with Domain Warping · Gagarin 8-Stop Color Gradient · Scrub-Linked Text Overlays · Dynamic Bloom · Custom Vignette · Film Grain
Direction Map physical altitude to scroll position, compressing a full atmospheric gradient into a thin luminous arc while astronaut quotes materialize in the void
Result A scroll experience where the sky fills your entire view, then compresses to a single glowing thread as astronaut quotes independently confirm the same overwhelming truth
The Story
In April 1961, Yuri Gagarin became the first human to see Earth from space. He described the color sequence in his mission report with the precision of a painter: orange-red at the horizon, transitioning through pink, white, blue, turquoise, dark blue, violet, and finally coal black. Every astronaut since has described essentially the same thing. The atmosphere — everything that keeps every living thing alive — appears as a thin luminous band pressed against the planet’s surface.
This is the overview effect: a cognitive shift that every astronaut reports but none can fully prepare for. The atmosphere looks impossibly thin. Borders vanish. National identity dissolves. Edgar Mitchell called it “an instant global consciousness.” William Shatner, at 90 years old, stepped out of Blue Origin’s capsule and wept — not from awe, but from grief. “It was the death that I saw in space,” he said.
The human truth underneath: you cannot understand how fragile home is until you leave it.
The Take
The scroll is the ascent. At the bottom of the page, you’re standing at sea level, looking up through a sky filled with Gagarin’s color sequence — warm oranges flooding the bottom of the viewport, blues and turquoises above, violet dissolving into black at the top. The atmosphere fills your entire view.
Scroll, and you rise. The atmosphere begins to compress. The warm colors at the bottom squeeze together, the dark space above expands. Altitude markers flash on the left edge — Troposphere, 12 km. Stratosphere, 50 km. Mesosphere, 80 km. Each one appearing briefly and fading, the way a pilot calls out altitude.
The key moment happens around the Kármán Line at 100 km. The atmosphere, which filled your entire viewport at ground level, has compressed into a thin luminous arc at the bottom of the screen. The planetary curvature becomes visible — a subtle upward bend at the edges. Above: nothing but void and stars.
Then the quotes begin. One at a time, each astronaut’s words materializing in the empty space above that thin blue thread. Four voices, spanning sixty years, independently describing the same transformation.
The Tech
The entire visual is a single fullscreen GLSL fragment shader rendered to a Three.js quad via ShaderMaterial, with post-processing applied through EffectComposer.
Atmospheric Raymarching. The shader computes a volumetric atmosphere band whose vertical position and thickness are driven by a uAltitude uniform (0 = ground, 1 = deep space). At ground level, the band spans the bottom 75% of the viewport. At orbit, it compresses to roughly 8%. The density profile uses an exponential falloff (exp(-bandPos * 3.0)) with a Gaussian top edge, creating the characteristic atmospheric density gradient — thicker at the bottom, thinning toward space.
Gagarin’s Color Gradient. An 8-stop color function maps normalized height within the atmosphere band to Gagarin’s reported sequence: #E8A87C (warm orange-gold) → #D4917A (pink-salmon) → #C8BEB8 (pale warm white) → #6FA3C7 (clear blue) → #3D8EAE (turquoise) → #1B3A5C (dark blue) → #1A1A3E (violet-indigo) → #08080E (coal black). As altitude increases, the gradient compresses into the thinning band and shifts toward the blue-to-space end of the spectrum.
FBM Noise with Domain Warping. Four-octave fractal Brownian motion creates organic turbulence in the atmospheric density. Two noise samples warp the domain coordinates before the final FBM evaluation, producing the swirling, layered structure of real atmospheric scattering rather than uniform color bands. A breathing modulation (sin(uBreathPhase) * 0.05) creates slow atmospheric pulsing.
Planetary Curvature. As altitude increases, a cosine-based curvature offset bends the atmosphere band upward at the viewport edges, simulating the visible curvature of Earth’s limb at orbital altitude. The curvature smoothly increases from 0 at ground to 0.10 at orbit.
Thin Blue Line Glow. Above 50% altitude, the atmosphere band receives an additive glow in #7EC8E3 (thin blue), intensifying as the band compresses. Combined with dynamic bloom strength (ramping from 0.2 to 0.6), this creates the luminous quality astronauts describe — the atmosphere appearing to glow against the void.
Procedural Star Field. Two hash-based star layers (grid scales 80 and 150) appear as altitude increases and darkness deepens. Star visibility depends on both altitude factor and a brightness check against the rendered sky color, ensuring stars only appear where the background is dark enough. Twinkle is per-star sinusoidal with randomized phase and frequency.
Scroll-Linked Text. GSAP ScrollTrigger drives all text overlays with scrub: 0.3, meaning opacity and position are directly linked to scroll position rather than time-based. Each element gets a single timeline: fade in → hold → fade out, with the total range mapped to scroll percentages. This guarantees no overlaps regardless of scroll speed or programmatic position changes.
Post-Processing. Three passes: UnrealBloomPass with altitude-responsive strength for the thin blue line glow, a custom vignette shader for the “looking through a window” effect, and custom film grain for atmospheric texture.
The Experience
You open the page. The sky fills your view — Gagarin’s colors, warm and close. Orange at the bottom, turquoise in the middle, violet dissolving to black at the top. You can feel the air.
You scroll. “Sea Level — 0 km” flashes on the left and fades. The gradient begins to shift upward. More dark space appears above. “Troposphere — 12 km.”
You keep scrolling. The blues deepen. The atmosphere is compressing — you can see it happening, the warm colors squeezing together at the bottom of the viewport. “Stratosphere — 50 km.” Stars begin to appear in the darkness above.
“Kármán Line — Edge of Space — 100 km.”
The atmosphere is a band now. Not the sky anymore — a band. You can see the curvature. That thin luminous arc clinging to the bottom of the screen, and above it, nothing. Stars.
“I see Earth! It is so beautiful.” — Yuri Gagarin, 1961.
You scroll. The quote fades. Another appears.
“You develop an instant global consciousness, a people orientation, an intense dissatisfaction with the state of the world, and a compulsion to do something about it.” — Edgar Mitchell, 1971.
Another.
“You look down there and you can’t imagine how many borders and boundaries you cross, again and again and again, and you don’t even see them.” — Russell Schweickart, 1969.
Another.
“It was the death that I saw in space and the lifeforce that I saw coming from the planet. One was death and the other was life.” — William Shatner, 2021.
The quotes clear. Four lines appear, staggered:
Everything you have ever known. Everyone you have ever loved. Every human who has ever lived. All of it, balanced on that line.
The thin blue arc glows below. That’s all there is.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.