No dependencies
No framework, no build step, no package to install. Forty HTML files, one stylesheet, 216 lines of vanilla JavaScript. The repo is the deploy.
- No build step
- 8.2 KB of JS
- Readable in view-source
S3V
NO
S3V
NO
Ten worlds, built to no brief and no deadline. Every technique on those pages is one we bill for elsewhere - so rather than ask you to trust a case study, we left the work out in the open where you can open the source and check.
See the ten pagesA services page is a claim. Anyone can type "performance-first" into one. These ten pages are the same claim, spent - and if we cut a corner, it is in the source for you to find.
No framework, no build step, no package to install. Forty HTML files, one stylesheet, 216 lines of vanilla JavaScript. The repo is the deploy.
Four diagrams are written in SVG from the numbers they describe rather than traced off an illustration, so the geometry has to actually come out right.
Every scroll reveal, counting number, image-filled numeral and animated arc runs off a single IntersectionObserver. No scroll library, no animation library.
The front page loads 0.03 MB of imagery on a 393 px viewport, down from 5.74 MB. Measured, fixed, measured again - including the bug where preloading the numeral fills quietly defeated every lazy attribute on the page. Its hero is a video, art-directed rather than gated: 1.9 MB widescreen on a desktop, a 0.6 MB portrait cut on a phone, and neither on 2G, on metered data, or for anyone who asked for reduced motion - those get the poster frame.
Each world gets a composition built for that world. Uranus is a small disc in a lot of empty space because the best close-range photograph ever taken of it is a blank circle - the page says that rather than hiding it.
Every image is public domain, verified before download. The Speedmaster photograph beat three sharper candidates because they were CC BY and would have forced an attribution line into a footer we were deleting.
Eleven pages, eleven different problems to solve. What each one was actually for.
The only page here that computes what it shows. The JPL Keplerian elements are solved every frame, so the ten bodies stand where they actually stand, and not one surface is a photograph: 89 KB of hand-written WebGL2, no library, no textures.
See the page →The only hero that splits horizontally, image above and type below. One SVG draws the solar limb, Jupiter and Earth at a single scale: a 231 px disc beside a 21 px dot.
View the page →Hero mirrored, planet left and type right. The 3:2 resonance diagram derives itself - each surface mark sits at the orbital angle times 1.5, so the pattern is computed rather than illustrated.
View the page →A globe breathing on a 20-second CSS animation, and the descent told as a sticky-scrolling column: the altitude stays pinned while the atmosphere moves past it.
View the page →An atmosphere drawn to true scale against the planet's radius, where Everest and a cruising airliner land on the same hairline, plus a sequence that shrinks the planet five times down to a single pixel.
View the page →A photograph of the Speedmaster rather than an illustration of one, a landing log, and a spec block that stays legible at 393 px without a second layout.
View the page →The original template: chapter numerals clipped to a photograph, a scroll-snap card deck with no carousel library, and moons orbiting on one keyframe with negative delays so they do not all start at twelve o'clock.
View the page →The composition donut is drawn from the same number the counter shows, so 90 percent hydrogen needs no second value hard-coded into the stylesheet.
View the page →Ring geometry as a rotated bordered ellipse in CSS rather than an image, which is why the navigation rail on every page costs nothing to load.
View the page →The tilt diagram hinges Earth at 23.4 degrees beside Uranus at 97.8, with the rings perpendicular to the axis and the labels lifted outside the rotation group so they do not read sideways.
View the page →Disc low right, type top left. Wind speeds animate when the chart scrolls into view, and the discovery-by-mathematics story runs as a numbered chronology.
View the page →Four constraints, held for all ten pages. They are the same four we hold on work somebody pays for.
Clone the repo and open the folder - that is the site. Nothing to compile means nothing to break between the source and what a visitor gets.
Card deck, counters, reveals, progress bar: all vanilla. Every package added is a maintenance bill that arrives later, usually at the worst time.
Every licence checked before the file was downloaded, so nothing is owed to anyone and no image can be pulled out from under the page later.
Every number on this page came off a real render at 1440 and 393 px, with a check that flags any image whose rendered shape drifts from its natural one.
