SunEffect

PURPOSE

Decorative React component that renders a small red-orange sun with an asymmetric animated glow at the nebula z-layer of the metagame shell. The component is currently disabled — the outer wrapper has display: 'none' — but the markup is retained for future re-enable.

OWNS

• A single absolutely-positioned root <div> with inset: 0, zIndex: 1, pointerEvents: 'none', overflow: 'visible', and display: 'none'.
• Four nested decorative <div> layers:
  • Sun sphere — radial-gradient from white-hot center through warm orange to deep red rim, with layered boxShadow for outer warmth.
  • Glow lobe 1 — blood-orange corona, offset upper-right, class sun-glow-lobe sun-glow-drift-1, filter: blur(12px).
  • Glow lobe 2 — magenta-crimson lobe, offset lower-left of sun, class sun-glow-lobe sun-glow-drift-2, filter: blur(16px).
  • Glow lobe 3 — tight red-orange halo close to the sphere, class sun-glow-lobe sun-glow-pulse, filter: blur(8px).
• All positioning is percentage-based off the parent (top, right, width, height in %); the sun sphere uses aspectRatio: '1 / 1'.

READS FROM

Nothing. The component takes no props, has no state, reads no stores, and pulls no data. Colors, positions, blurs, and z-indices are inline literals.

PUSHES TO

Nothing. Pure presentational JSX. No callbacks, no store writes, no DOM side-effects, no telemetry.

DOES NOT

• Does not animate in JS. Drift and pulse motion are expected to come from external CSS keyframes targeting the sun-glow-drift-1, sun-glow-drift-2, and sun-glow-pulse class names.
• Does not accept style overrides, theming, or visibility props — re-enabling requires editing the inline display: 'none'.
• Does not handle pointer events (pointerEvents: 'none' on the root).
• Does not clip its children; overflow: 'visible' so glow lobes can extend past the bounding box.
• Does not register with any layout, parallax, or scene-management system.

Signals

• Exported function: SunEffect() — named React function component, no props.
• CSS hook class names emitted on glow lobes: sun-glow-lobe, sun-glow-drift-1, sun-glow-drift-2, sun-glow-pulse.

Entry points

• Default export: none. Importers use the named export SunEffect.
• Intended placement: behind hub/shell content at the nebula z-layer, outside any clipping container. Currently inert because the root sets display: 'none' with the inline comment “Hidden — sun layer disabled”.

Pattern notes

• Inline-style sprite: all visual constants live in the JSX, not in a stylesheet or data table; only the animation keyframes are external (hence the class names).
• Asymmetric glow is achieved by stacking three lobes at offset top/right values with different blur radii, opacities, and gradient origins, then letting CSS animations drift them independently.
• zIndex stacking inside the wrapper: lobes 1 and 2 sit at zIndex: 0, lobe 3 at zIndex: 1, sphere at zIndex: 2 — so the tight halo and sphere render above the wider drifting lobes.
• Disabling pattern is destructive-by-default: the layer is kept in the tree (so the markup stays maintained) but hidden via display: 'none' rather than commented out or removed from imports.