Lab Note: A Lightweight Cost-Curve Hero Without WebGL
Why the first Artemis hero composes SVG and CSS artifacts instead of a heavy 3D scene — and how it's structured to upgrade to React Three Fiber later.
The constraint
A cinematic homepage that ships a heavy WebGL bundle to every visitor — including mobile and reduced-motion users — fails the brief. The site must be fast, SEO-friendly, and work without WebGL.
The approach
The 5D Construction Intelligence Bridge hero is composed from HTML, SVG, and CSS animations rather than a 3D engine:
- The 5D cost curve is a single inline SVG (a few KB).
- Floating panels are styled
divs with CSSfloatkeyframes. - A light pointer-parallax shifts depth layers — no physics, no GPU scene graph.
The upgrade path
The animated scene is isolated behind a single component boundary
(ArtemisSceneCanvas). When polished Draco-compressed GLB assets are ready, a
React Three Fiber scene can be swapped in behind the same boundary, lazy-loaded
the same way — without touching the page, the copy, or the fallback.
That is the Labs philosophy: prove structure and performance first, add spectacle deliberately.