LM-38Science & education

Tether

One spacewalk over one orbit of the Earth, explaining the spacesuit part by part, live in 3D.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A complete science explainer told as one spacewalk. Scroll out through a station's airlock and float on a safety tether over one lap of the Earth while the page explains how the suit keeps one person alive outside, with every figure sourced, mostly from NASA's published material on the EMU suit. Everything behind the text is one live three.js scene: a ray-traced Earth from NASA imagery (Bahamas by day, a sunset, Java to Japan at night with city lights, lightning and aurora, then the orbital sunrise), a space station built in code, and a rigged astronaut you can spin with a drag. The chapters walk through the airlock's pure oxygen at 4.3 psi, a gold visor that reflects the next chapter's world before the camera flies through it, a false-colour infrared view with the cooling tubes glowing through the suit, the arm cut open into its fourteen layers, the backpack in x-ray, labels printed backwards for the wrist mirror, and the tether letting go while SAFER's nitrogen jets fly the astronaut home. Headlines are made of red, green and blue light that split with the scroll, the chapters run through the visible spectrum, and the progress bar is the tether itself. For museums, space and science brands, research labs, edtech and any story that should be explained, not just shown.

How it's made

  1. Facts first

    A fact sheet came before any code, written from NASA's EMU sources, and no figure went on the page without a source there. The page says plainly where it compresses the story: one lap of the Earth stands in for a six and a half hour spacewalk.

  2. The Earth from 408 km

    One full-screen pass draws the planet, its scattering air, clouds with their real tops, sun glint, city lights, lightning, aurora and airglow, the moon, the stars and the Milky Way, all driven by one orbit minute, from NASA imagery.

  3. A station built in code

    Modules, truss, airlock, handrails and solar arrays that turn to the sun, with surfaces baked in a worker at load. The tether runs from the airlock's handrail to the astronaut's waist.

  4. A real astronaut, prepared

    A rigged CC BY model, converted from specular to metal and roughness texel by texel, with the gold visor and helmet lamps split out as their own materials, then compressed in desktop and phone versions.

  5. The suit, part by part

    A visor that reflects the next chapter's world, a false-colour infrared view, the arm cut into fourteen layers, an x-ray of the backpack and SAFER's jets flying the astronaut home, each one an effect on the same live model.

  6. Type made of light

    Every headline is set three times in pure red, green and blue, screened into white, and the copies split with the scroll's speed. The chapters run through the visible spectrum and the progress bar is the tether.

  7. Fast where it counts

    Pixel ratio and buffer size are capped, the frame rate follows the display, and an adaptive ladder steps resolution, Earth quality, bloom and shadows down when frames run long. Every program compiles behind the loader.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • scripts/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.ts

  • tailwind.config.js

  • postcss.config.js

  • tsconfig.json

  • vercel.json

  • README.md

    Start here. What's inside and how to run it.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • HOW-IT-WAS-MADE.md

    How it was made. The build step by step, and a recipe to make your own.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite 8.3 · React 18.3 · TypeScript 5.9 · Tailwind CSS 3.4 · three.js 0.186 · Lenis 1.3 · Framer Motion 11 · GLSL shaders (atmosphere / clouds / aurora) · Infrared and x-ray views · HDR bloom · Web Worker bake (air tables and station surfaces) · Self-hosted fonts (Anybody and Azeret Mono)
File size
11.4 MB
Triangles
368,529
Browser
Needs WebGL 2: current Chrome, Edge, Firefox and Safari on desktop and phones. Pixel ratio is capped (1.5 desktop, 1.35 phones) and an adaptive ladder steps resolution, Earth quality, bloom, MSAA and shadows down when the display's rate can't be held. Without WebGL 2 the loader says the browser can't open the airlock; there is no still fallback. Reduced motion turns off the smooth scroller, the colour split and the drift. Tested in headless Chromium with software rendering at 1440 x 900 and 390 x 844: no errors, no failed requests, no sideways scroll. Not yet tested on a real GPU, in Safari or Firefox, or on real phones.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license

The astronaut is "Walking Astronaut" by hafizshayan245 on Sketchfab, CC BY 4.0, modified (materials converted, visor and lamps split out, rescaled, compressed); the credit is printed on the page and must stay. The space station and the tether are built in code with three.js. The Earth and sky use NASA and NASA-hosted public domain imagery and the Yale Bright Star Catalogue, credited on the page. Figures come from NASA's EMU material. The fonts are self-hosted under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction. No agency marks, no real people, no video.

Buy LM-38 Tether

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.