transparency++

src/components/planetora/PlanetoraEventPanel.tsx

@@ -102,7 +102,7 @@ export function PlanetoraEventPanel({
       ref={panelRef}
       data-planetora-panel
       className={cn(
-        'pointer-events-auto fixed z-30 rounded-xl border border-border/60 bg-background/85 backdrop-blur-xl shadow-2xl overflow-hidden',
+        'pointer-events-auto fixed z-30 rounded-xl border border-border/40 bg-background/40 backdrop-blur-2xl shadow-2xl overflow-hidden',
         isPanel
           ? 'top-36 right-4 w-[380px] max-w-[calc(100vw-2rem)] grid'
           : 'flex flex-col left-2 right-2 bottom-2 max-h-[60vh]',

src/components/planetora/PlanetoraGlobe.tsx

@@ -227,36 +227,37 @@ export const PlanetoraGlobe = forwardRef<PlanetoraGlobeRef, PlanetoraGlobeProps>
       ];
     }, [selected, theme.highlightColor]);
 
-    // Width reserved on the right of the canvas when the side panel is
-    // showing. Matches the panel's `w-[380px] right-4` plus a small gutter
-    // so the globe sphere sits in the centre of the remaining space.
-    const panelReservedPx = panelSide === 'right' ? 412 : 0;
+    // When the side panel is open we extend the WebGL canvas off the left
+    // edge of the viewport. The globe is centred in this oversized canvas,
+    // so visually its centre sits at `(viewport - panelShift)/2` — i.e.
+    // the midpoint of the space left of the panel. Critically the canvas
+    // aspect ratio matches its own pixel dimensions, so the globe is never
+    // stretched. The atmosphere glow also extends to the page edge, so
+    // there's no dark "container" outside the canvas.
+    const panelShiftPx = panelSide === 'right' ? 380 : 0;
 
     return (
-      // Outer wrapper paints the background and absorbs pointer interaction
-      // across the full viewport. The inner box is what actually contains
-      // the globe canvas — its width physically shrinks when the panel is
-      // open, so `ResizeObserver` reports a *smaller* width and `three.js`
-      // re-centres the globe sphere into the leftover area on the left.
       <div
+        ref={containerRef}
         className={cn('relative w-full h-full overflow-hidden', className)}
         style={{ background: theme.background }}
         onPointerDown={onUserInteract}
         onWheel={onUserInteract}
         onTouchStart={onUserInteract}
       >
-        <div
-          ref={containerRef}
-          className="absolute inset-y-0 left-0 overflow-hidden"
-          style={{
-            right: panelReservedPx,
-            transition: 'right 300ms cubic-bezier(0.4, 0, 0.2, 1)',
-          }}
-        >
         {size.width > 0 && size.height > 0 && (
+          <div
+            className="absolute inset-y-0"
+            style={{
+              left: -panelShiftPx,
+              width: size.width + panelShiftPx,
+              transition:
+                'left 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+            }}
+          >
           <Globe
             ref={globeRef}
-            width={size.width}
+            width={size.width + panelShiftPx}
             height={size.height}
             backgroundColor="rgba(0,0,0,0)"
             globeImageUrl={null}
@@ -306,8 +307,8 @@ export const PlanetoraGlobe = forwardRef<PlanetoraGlobeRef, PlanetoraGlobeProps>
             pointsMerge={false}
             enablePointerInteraction
           />
+          </div>
         )}
-        </div>
       </div>
     );
   },