Full-bleed canvas with a mandatory contrast veil and a poster fallback that never shifts the layout.
Foundation layer — 01
Proof, one page.
The smallest app that imports every package, so a broken export fails here, not in production.
Lazy WebGL with a real fallback
The hero above is a full-bleed LazyScene: canvas, mandatory veil, then this
page's real DOM on top. Turn WebGL off and the poster plate takes its place with no layout
shift and no loss of meaning.
Disclosure semantics with answers always present in the DOM, and JSON-LD generated from the same text.
Three fixed depths, never more: 0.42 / 0.72 / 1.0, travelling at most 18% of the section. Under reduced motion every layer locks to 1.0 and the composition holds.
- Packages
- 5 UI, motion, three-kit, SEO and config
- Sites
- 10 Built on one shared foundation
- Eager JS
- 3 KB Gzipped, on the critical path
- Contrast
- 7 :1 Body text target, 4.5:1 hard floor
Questions
The Atomos foundation is a pnpm monorepo that holds five shared packages — UI, motion, three-kit, SEO and config — from which ten immersive Astro portfolio sites are built. Every site consumes the same design tokens and exports to static HTML, so the ten read as one studio rather than ten unrelated builds.
Each site builds to a static dist/ directory that is uploaded to Hostinger Cloud Professional and served from its own subdomain of atomostechnologies.com. No Node process runs in production: the build happens locally or in CI, and deployment is nothing more than copying the contents of that folder.
Every WebGL canvas mounts lazily, only after the page has painted and only on devices that pass a capability check. Until then a low-entropy poster stands in, and the headline — never the canvas — is the largest contentful paint, so a shader can never delay the page becoming readable.