Scale Explorer

See how big things really are. Interactive visual scale comparisons for understanding how big real-world objects, animals, structures, vehicles, and space objects really are.

Live site: https://scale-explorer.freewebtoolss.workers.dev

• 130+ objects in 10 categories (microscopic, everyday objects, animals, prehistoric, sports, vehicles, buildings, structures, nature, space), from a hydrogen atom to the Andromeda Galaxy, each with its own page, sourced measurements and a drawing to scale.
• Compare any two to five objects side by side, with or without a person for scale, or add yourself by typing your height.
• Weight and volume views (volumes drawn as equal-volume cubes) and "how many fit" counts: end to end, by weight and by volume, using only sourced figures.
• "Surprise me" picks a random comparison.
• Type your own size (meters, feet, kilometers or miles in the menu; nm, µm, mm, cm, in and light-years can be typed) and see it next to familiar things.
• Very different sizes (a person next to Earth) get zoomed-in views and a step-by-step zoom, and every change of scale is labelled.
• Static site: no backend, database, accounts, analytics, tracking or third-party requests. All drawing and maths run in the browser.

How it works

data/objects/*.json   one file per object: measurements, sources, description, drawing profile
data/categories.json  the categories
data/site.json        site URL, popular comparisons, featured objects
src/lib/              shared logic used by the build, the browser and the tests
  units.js            unit conversion, formatting and input parsing
  measures.js         measurement ranges and text
  layout.js           scale maths: drawing boxes, stage layout, zoom levels, zoom ladder
  render.js           SVG drawings and bar charts (returns strings)
  figure.js           figure markup shared by pre-rendered pages and the browser
  compare.js          plain-language comparisons ("about 3 times as long as ...")
  search.js           local fuzzy search
  silhouettes*.js     side-view silhouettes, one file per group
src/client/app.js     browser script: redraws at screen width, search box, compare and custom size pages
src/styles/site.css   all styles (light and dark)
build/                build script, data validation, page templates
static/               favicon and Open Graph images, copied as-is
public/               generated site (served by Cloudflare)
tools/                local server, browser tests, share-image and silhouette sheet generators
tests/                node:test unit and build tests

Every page is fully rendered at build time (titles, meta descriptions, canonical URLs, Open Graph tags, JSON-LD, sitemap), so it works and is indexable without JavaScript. The browser script then redraws the drawings at the real screen width and adds the interactive parts.

Accuracy rules

• Each measurement is stored exactly as its source states it (value or min/max, in the source's own unit) with a source id pointing at the object's sources list, including the date it was checked.
• Ranges stay ranges. The drawing shows the low end solid and the high end as a faded outline; comparisons are given as ranges when sizes overlap.
• Conversions use exact definitions (1 ft = 0.3048 m, 1 mi = 1,609.344 m) and are rounded to the source's precision.
• Silhouettes are simplified. The measured dimension is exactly to scale; the rest of the outline is illustrative, and each object page notes where that matters.
• The build validates the data and refuses to run if a measurement has no source, a unit is unknown, a range is inverted, and so on.

Updating the data

Edit one file in data/objects/, then build and test:

npm run build
npm test

To add an object, add data/objects/<slug>.json (copy an existing one), add or reuse a silhouette in src/lib/silhouettes-*.js, and run node tools/shapes-sheet.mjs <shape> to check it. The profile says which measurement scales the drawing (x for horizontal, y for vertical, or both). To add a category, add it to data/categories.json.

After changing data or silhouettes, regenerate the share images with node tools/og-images.mjs.

Testing

npm test          # unit, data and build tests (node:test)
npm run e2e       # browser tests in headless Chrome against a local server
BASE_URL=https://scale-explorer.freewebtoolss.workers.dev node tools/e2e.mjs   # same tests against the live site

Deploying

The site is a Cloudflare Workers static-assets deployment (no Worker script). wrangler.jsonc points at ./public and runs the build first:

npx wrangler deploy

public/_headers sets a strict Content-Security-Policy (script-src 'self', no inline scripts or style attributes) while ads are off and long-lived caching for the fingerprinted /assets/<hash>/ folder.

Ads

Ads are off until "ads" in data/site.json is filled in. While it is empty, the build outputs no ad markup or scripts, and the strict CSP stays. When it is filled in, two small, labelled places appear:

• bottom: one banner above the footer on every page: 728×90, or 320×50 on narrow screens.
• sidebar: one 300×250 box beside object pages, on screens 1024 px and wider only.

Nothing else is ever loaded: no pop-ups, pop-unders, sticky or anchor ads, interstitials or auto ads. A slot that gets no ad, or is blocked by an ad blocker, is removed rather than left as an empty box.

Google AdSense (needs a domain you own; AdSense does not accept *.workers.dev):

"ads": { "network": "adsense", "client": "ca-pub-1234567890123456", "slots": { "bottom": "1111111111", "sidebar": "2222222222" } }

Create two "Display" ad units in AdSense and use their IDs as the slots. In the AdSense dashboard, leave Auto ads and their overlay formats (anchor and vignette ads) off. Turn on Google's consent message under Privacy & messaging for visitors in the EU and UK. The build writes ads.txt for you.

Adsterra (works on *.workers.dev): create one Banner per size and copy each key and the script host from its code (//<host>/<key>/invoke.js):

"ads": { "network": "adsterra", "host": "www.highperformanceformat.com", "slots": { "bottom": { "728x90": "<key>", "320x50": "<key>" }, "sidebar": { "300x250": "<key>" } } }

Each Adsterra banner runs in a sandboxed frame, so it cannot redirect or script the page. Don't add Adsterra's Popunder, Social Bar or Direct Link codes.

Turning ads on widens the CSP to any https: source (ad networks load from many hosts). The footer and the About page's privacy section then name the network and link to its privacy policy. The settings are checked at build time, and npm test plus node tools/e2e.mjs cover both networks with made-up IDs and a stubbed network.

License

Code: MIT. Measurements are facts from the cited sources; descriptions are original.