feat(landing): real-time sun-lit Earth globe hero

.gitignore

@@ -16,3 +16,17 @@ packages/vue/tsconfig.tsbuildinfo
 log.md
 log-texture.md
 website/.baseline-shots/
+
+# Large geo datasets — not committed
+etopo/
+gadm_410.gdb/
+
+# /map tile pyramid + legacy single-tile globe (regenerable from etopo via
+# `node website/scripts/bake-globe.mjs --tiles`). The landing-earth.json
+# file IS tracked — it's small (~95 KB) and required by the landing page.
+website/public/data/tiles/
+website/public/data/earth.json
+
+# Local-only experimental /map page (LOD-tiled ASCII globe). Depends on the
+# untracked tile pyramid above; not ready to ship.
+website/src/pages/map.astro

packages/glyphcss/src/api/createGlyphOrbitControls.ts

@@ -15,6 +15,12 @@ export interface GlyphOrbitControlsOptions {
   wheel?: boolean;
   /** Drag-direction inversion. Default: false. */
   invert?: boolean | number;
+  /**
+   * Clamp vertical drag to ±π/2 (camera stays above the equator, never
+   * flipping past either pole). Default: true. Set to false for globe-style
+   * unrestricted tumbling.
+   */
+  clampPitch?: boolean;
   /** Auto-rotate. Pass false or omit to disable. */
   animate?: false | { speed?: number; axis?: "x" | "y"; pauseOnInteraction?: boolean };
 }
@@ -34,6 +40,7 @@ export function createGlyphOrbitControls(
   let drag = options.drag ?? true;
   let wheel = options.wheel ?? true;
   let invertFactor = resolveInvert(options.invert);
+  let clampPitch = options.clampPitch ?? true;
   let animOpts = options.animate ?? false;
   let stopped = false;
   let animPaused = false;
@@ -74,7 +81,8 @@ export function createGlyphOrbitControls(
     // Drag in the same direction as the pointer: dragging UP tilts the camera
     // UP (positive rotX increase from the +Z-is-screen-up convention), so dy
     // negates here. Matches the horizontal axis's `-dx` direction.
-    camera.rotX = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotX - dy * RAD_PER_PX * f));
+    const nextRotX = camera.rotX - dy * RAD_PER_PX * f;
+    camera.rotX = clampPitch ? Math.max(-Math.PI / 2, Math.min(Math.PI / 2, nextRotX)) : nextRotX;
     scene.rerender();
   }
 
@@ -155,6 +163,7 @@ export function createGlyphOrbitControls(
       drag = opts.drag ?? drag;
       wheel = opts.wheel ?? wheel;
       invertFactor = resolveInvert(opts.invert);
+      if (opts.clampPitch !== undefined) clampPitch = opts.clampPitch;
       animOpts = opts.animate ?? animOpts;
       if (!stopped && activePointerId === null) {
         host.style.cursor = drag ? "grab" : "";

packages/glyphcss/src/elements/GlyphOrbitControlsElement.ts

@@ -29,7 +29,7 @@ function findScene(el: HTMLElement): GlyphSceneElement | null {
 
 export class GlyphOrbitControlsElement extends ELEMENT_BASE {
   static get observedAttributes(): string[] {
-    return ["drag", "wheel", "invert", "animate-speed", "animate-axis"];
+    return ["drag", "wheel", "invert", "clamp-pitch", "animate-speed", "animate-axis"];
   }
 
   private _controls: GlyphOrbitControlsHandle | null = null;
@@ -49,12 +49,14 @@ export class GlyphOrbitControlsElement extends ELEMENT_BASE {
     const drag = parseBool(this.getAttribute("drag"));
     const wheel = parseBool(this.getAttribute("wheel"));
     const invert = parseBool(this.getAttribute("invert"));
+    const clampPitch = parseBool(this.getAttribute("clamp-pitch"));
     const speed = parseNumber(this.getAttribute("animate-speed"));
     const axis: "x" | "y" = this.getAttribute("animate-axis") === "x" ? "x" : "y";
     return {
       ...(drag !== undefined ? { drag } : {}),
       ...(wheel !== undefined ? { wheel } : {}),
       ...(invert !== undefined ? { invert } : {}),
+      ...(clampPitch !== undefined ? { clampPitch } : {}),
       ...(speed !== undefined ? { animate: { speed, axis } } : {}),
     };
   }

packages/react/src/glyphcss/controls/GlyphOrbitControls.tsx

@@ -16,6 +16,11 @@ export interface GlyphOrbitControlsProps {
   wheel?: boolean;
   /** Drag-direction inversion. Default false. */
   invert?: boolean | number;
+  /**
+   * Clamp vertical drag to ±π/2. Default true. Set false for globe-style
+   * unrestricted tumbling past the poles.
+   */
+  clampPitch?: boolean;
   /** Auto-rotate config. Default false. */
   animate?: false | { speed?: number; axis?: "x" | "y"; pauseOnInteraction?: boolean };
 }
@@ -24,13 +29,14 @@ export function GlyphOrbitControls({
   drag = true,
   wheel = true,
   invert = false,
+  clampPitch = true,
   animate = false,
 }: GlyphOrbitControlsProps): null {
   const { sceneRef } = useGlyphSceneContext();
   const controlsRef = useRef<GlyphOrbitControlsHandle | null>(null);
 
-  const propsRef = useRef({ drag, wheel, invert, animate });
-  propsRef.current = { drag, wheel, invert, animate };
+  const propsRef = useRef({ drag, wheel, invert, clampPitch, animate });
+  propsRef.current = { drag, wheel, invert, clampPitch, animate };
 
   useEffect(() => {
     const scene = sceneRef.current;
@@ -40,6 +46,7 @@ export function GlyphOrbitControls({
       drag: propsRef.current.drag,
       wheel: propsRef.current.wheel,
       invert: propsRef.current.invert,
+      clampPitch: propsRef.current.clampPitch,
       animate: propsRef.current.animate === false ? false : propsRef.current.animate,
     };
     const controls = createGlyphOrbitControls(scene, opts);
@@ -55,7 +62,7 @@ export function GlyphOrbitControls({
   useEffect(() => {
     const controls = controlsRef.current;
     if (!controls) return;
-    controls.update({ drag, wheel, invert, animate: animate === false ? false : animate });
+    controls.update({ drag, wheel, invert, clampPitch, animate: animate === false ? false : animate });
   });
 
   return null;

packages/vue/src/glyphcss/controls/GlyphOrbitControls.ts

@@ -10,6 +10,11 @@ export interface GlyphOrbitControlsProps {
   drag?: boolean;
   wheel?: boolean;
   invert?: boolean | number;
+  /**
+   * Clamp vertical drag to ±π/2. Default true. Set false for globe-style
+   * unrestricted tumbling past the poles.
+   */
+  clampPitch?: boolean;
   animate?: false | { speed?: number; axis?: "x" | "y"; pauseOnInteraction?: boolean };
 }
 
@@ -19,6 +24,7 @@ export const GlyphOrbitControls = defineComponent({
     drag: { type: Boolean, default: true },
     wheel: { type: Boolean, default: true },
     invert: { type: [Boolean, Number] as unknown as () => boolean | number, default: false },
+    clampPitch: { type: Boolean, default: true },
     animate: { type: [Boolean, Object] as unknown as () => false | { speed?: number; axis?: "x" | "y"; pauseOnInteraction?: boolean }, default: false },
   },
   setup(props) {
@@ -38,6 +44,7 @@ export const GlyphOrbitControls = defineComponent({
         drag: props.drag,
         wheel: props.wheel,
         invert: props.invert,
+        clampPitch: props.clampPitch,
         animate: props.animate === false ? false : props.animate,
       };
       controlsRef.value = createGlyphOrbitControls(scene, opts);
@@ -50,12 +57,13 @@ export const GlyphOrbitControls = defineComponent({
     });
 
     watch(
-      () => ({ drag: props.drag, wheel: props.wheel, invert: props.invert, animate: props.animate }),
+      () => ({ drag: props.drag, wheel: props.wheel, invert: props.invert, clampPitch: props.clampPitch, animate: props.animate }),
       (next) => {
         controlsRef.value?.update({
           drag: next.drag,
           wheel: next.wheel,
           invert: next.invert,
+          clampPitch: next.clampPitch,
           animate: next.animate === false ? false : next.animate,
         });
       },