@backbay/glia-three 0.2.0-alpha.2

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@backbay/glia-three",
+  "version": "0.2.0-alpha.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
+    "./three": { "types": "./dist/three/index.d.ts", "import": "./dist/three/index.js" },
+    "./environment": { "types": "./dist/environment/index.d.ts", "import": "./dist/environment/index.js" }
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@backbay/contract": "0.1.0-alpha.1",
+    "@backbay/glia-agent": "workspace:*",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "three": ">=0.150",
+    "@react-three/fiber": "^9",
+    "@react-three/drei": "^10"
+  },
+  "optionalDependencies": {
+    "framer-motion": "^12",
+    "styled-components": "^6"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.3",
+    "styled-components": "^6.3.8",
+    "tsup": "^8.5.1",
+    "@types/three": "^0.170.0",
+    "@types/react": "^19.0.0"
+  }
+}

package/src/environment/AuroraLayer/AuroraLayer.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuroraLayer } from "./AuroraLayer";
+import type { AuroraType } from "./types";
+
+const meta: Meta<typeof AuroraLayer> = {
+  title: "Primitives/Environment/AuroraLayer",
+  component: AuroraLayer,
+  parameters: { layout: "fullscreen", backgrounds: { default: "dark" } },
+  tags: ["autodocs"],
+  argTypes: {
+    type: { control: "select", options: ["aurora", "nebula", "gradient", "stars", "clouds", "sunset", "storm", "cosmic", "heat", "underwater"] },
+    intensity: { control: { type: "range", min: 0, max: 1, step: 0.1 } },
+    speed: { control: { type: "range", min: 0, max: 2, step: 0.1 } },
+  },
+  decorators: [(Story) => (<div style={{ width: "100%", height: "500px", position: "relative", background: "#0a0a0f" }}><Story /></div>)],
+};
+
+export default meta;
+type Story = StoryObj<typeof AuroraLayer>;
+
+export const Aurora: Story = { args: { type: "aurora", intensity: 0.8 } };
+export const Nebula: Story = { args: { type: "nebula", intensity: 0.7 } };
+export const Gradient: Story = { args: { type: "gradient", intensity: 1 } };
+export const Stars: Story = { args: { type: "stars", intensity: 0.9, complexity: 5 } };
+export const Clouds: Story = { args: { type: "clouds", intensity: 0.6 } };
+export const Sunset: Story = { args: { type: "sunset", intensity: 0.9 } };
+export const Storm: Story = { args: { type: "storm", intensity: 0.8 } };
+export const Cosmic: Story = { args: { type: "cosmic", intensity: 0.7 } };
+export const Heat: Story = { args: { type: "heat", intensity: 0.6 } };
+export const Underwater: Story = { args: { type: "underwater", intensity: 0.8 } };
+
+export const AllAuroraTypes: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", height: "100%", gap: 1 }}>
+      {(["aurora", "nebula", "gradient", "stars", "clouds", "sunset", "storm", "cosmic", "heat", "underwater"] as AuroraType[]).map((type) => (
+        <div key={type} style={{ position: "relative", background: "#0a0a0f", minHeight: "200px" }}>
+          <AuroraLayer type={type} intensity={0.7} />
+          <div style={{ position: "absolute", bottom: 8, left: 8, color: "#fff", fontSize: 10, fontFamily: "monospace", opacity: 0.7 }}>{type}</div>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/environment/AuroraLayer/AuroraLayer.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import * as React from "react";
+import { useReducedMotion } from "framer-motion";
+import { cn } from "../../lib/utils";
+import { getPerformanceConfig } from "../shared/performance";
+import { NOISE_DATA_URL } from "../shared/noise";
+import type { AuroraLayerProps } from "./types";
+import { AURORA_CONFIGS } from "./types";
+
+export function AuroraLayer({
+  type,
+  colors: propColors,
+  intensity = 1,
+  speed = 1,
+  stylePreset = 'ui',
+  complexity: propComplexity,
+  direction = 'vertical',
+  blend = 'normal',
+  enabled = true,
+  className,
+  style,
+}: AuroraLayerProps) {
+  const reducedMotion = useReducedMotion();
+  const perfConfig = getPerformanceConfig();
+  const [time, setTime] = React.useState(0);
+  const lightningRef = React.useRef(0);
+
+  const config = AURORA_CONFIGS[type];
+  const colors = propColors ?? config.colors;
+  const complexity = propComplexity ?? config.complexity;
+  const shouldAnimate = !reducedMotion && perfConfig.tier !== 'minimal';
+
+  React.useEffect(() => {
+    if (!shouldAnimate || !enabled) return;
+    lightningRef.current = 0;
+    let frame: number;
+    const animate = () => {
+      if (type === 'storm') {
+        // Occasional lightning with short decay (avoid per-frame random strobe).
+        const chance = stylePreset === 'cinematic' ? 0.003 : 0.007;
+        if (Math.random() < chance) lightningRef.current = 1;
+        lightningRef.current *= stylePreset === 'cinematic' ? 0.92 : 0.88;
+        if (lightningRef.current < 0.02) lightningRef.current = 0;
+      }
+
+      setTime(prev => prev + config.animationSpeed * speed);
+      frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate, enabled, type, stylePreset, config.animationSpeed, speed]);
+
+  if (!enabled) return null;
+
+  const lightning = type === 'storm' ? lightningRef.current : 0;
+
+  const auroraStyle = React.useMemo((): React.CSSProperties => {
+    const opacity = intensity;
+    const c = colors.map(color => `${color}${Math.round(opacity * 200).toString(16).padStart(2, '0')}`);
+
+    switch (type) {
+      case 'aurora':
+        return {
+          background: `
+            linear-gradient(${direction === 'horizontal' ? '90deg' : '180deg'},
+              ${c[0]} ${Math.sin(time) * 20 + 10}%,
+              ${c[1]} ${50 + Math.cos(time * 1.3) * 20}%,
+              ${c[2]} ${90 + Math.sin(time * 0.7) * 10}%
+            )
+          `,
+          filter: `blur(${40 + Math.sin(time * 2) * 10}px)`,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'nebula':
+        return {
+          background: `
+            radial-gradient(ellipse at ${30 + Math.sin(time) * 20}% ${40 + Math.cos(time * 0.8) * 20}%, ${c[0]}, transparent 50%),
+            radial-gradient(ellipse at ${70 + Math.cos(time * 1.2) * 15}% ${60 + Math.sin(time * 0.9) * 15}%, ${c[1]}, transparent 40%),
+            radial-gradient(ellipse at ${50 + Math.sin(time * 0.7) * 25}% ${50 + Math.cos(time * 1.1) * 25}%, ${c[2]}, transparent 45%)
+          `,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'gradient':
+        return {
+          background: `linear-gradient(${direction === 'horizontal' ? '90deg' : direction === 'radial' ? '135deg' : '180deg'}, ${c.join(', ')})`,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'stars':
+        // Generate pseudo-random star positions based on complexity
+        const starGradients = Array.from({ length: Math.min(complexity * 10, 50) }, (_, i) => {
+          const x = ((i * 17 + Math.sin(i) * 30) % 100);
+          const y = ((i * 23 + Math.cos(i) * 40) % 100);
+          const twinkle = Math.sin(time * (2 + i * 0.1)) * 0.5 + 0.5;
+          const size = 1 + (i % 3);
+          return `radial-gradient(circle ${size}px at ${x}% ${y}%, ${colors[i % colors.length]}${Math.round(twinkle * opacity * 255).toString(16).padStart(2, '0')}, transparent ${size}px)`;
+        });
+        return {
+          background: starGradients.join(', '),
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'clouds':
+        return {
+          background: `
+            radial-gradient(ellipse 80% 50% at ${20 + Math.sin(time) * 10}% ${30 + Math.cos(time * 0.5) * 10}%, ${c[0]}, transparent),
+            radial-gradient(ellipse 60% 40% at ${60 + Math.cos(time * 0.7) * 15}% ${50 + Math.sin(time * 0.6) * 10}%, ${c[1]}, transparent),
+            radial-gradient(ellipse 70% 45% at ${40 + Math.sin(time * 0.8) * 12}% ${70 + Math.cos(time * 0.4) * 8}%, ${c[2]}, transparent)
+          `,
+          filter: 'blur(30px)',
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'sunset':
+        return {
+          background: `linear-gradient(180deg,
+            ${c[2]} 0%,
+            ${c[1]} ${40 + Math.sin(time) * 5}%,
+            ${c[0]} ${70 + Math.cos(time * 0.5) * 5}%,
+            ${c[0]}00 100%
+          )`,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'storm':
+        return {
+          background: `
+            radial-gradient(ellipse 100% 60% at ${30 + Math.sin(time * 2) * 20}% ${20 + Math.cos(time) * 10}%, ${c[1]}, transparent),
+            radial-gradient(ellipse 80% 50% at ${70 + Math.cos(time * 1.5) * 25}% ${40 + Math.sin(time * 1.2) * 15}%, ${c[2]}, transparent),
+            linear-gradient(180deg, ${c[0]}, ${c[1]})
+          `,
+          filter: lightning
+            ? `brightness(${1 + lightning * (stylePreset === 'cinematic' ? 1.8 : 2.6)}) contrast(${1 + lightning * 0.35})`
+            : undefined,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'cosmic':
+        return {
+          background: `
+            radial-gradient(ellipse at center, ${c[3] ?? c[0]} 0%, transparent 50%),
+            radial-gradient(ellipse at ${30 + Math.sin(time * 0.5) * 20}% ${30 + Math.cos(time * 0.3) * 20}%, ${c[1]}, transparent 40%),
+            radial-gradient(ellipse at ${70 + Math.cos(time * 0.4) * 15}% ${70 + Math.sin(time * 0.6) * 15}%, ${c[2]}, transparent 35%),
+            linear-gradient(180deg, ${c[0]}, ${c[1]})
+          `,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'heat':
+        return {
+          background: `
+            radial-gradient(ellipse at 50% 100%, ${c[0]}, transparent 60%),
+            radial-gradient(ellipse at ${30 + Math.sin(time * 3) * 20}% 80%, ${c[1]}, transparent 40%),
+            radial-gradient(ellipse at ${70 + Math.cos(time * 2.5) * 20}% 90%, ${c[2]}, transparent 45%)
+          `,
+          filter: `blur(${10 + Math.sin(time * 5) * 5}px)`,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      case 'underwater':
+        return {
+          background: `
+            linear-gradient(180deg, ${c[0]} 0%, ${c[1]} 50%, ${c[2]} 100%),
+            radial-gradient(ellipse at ${50 + Math.sin(time) * 30}% ${30 + Math.cos(time * 0.8) * 20}%, ${c[2]}40, transparent 40%)
+          `,
+          mixBlendMode: blend as React.CSSProperties['mixBlendMode'],
+        };
+
+      default:
+        return {};
+    }
+  }, [type, colors, intensity, complexity, direction, blend, time, lightning, stylePreset]);
+
+  return (
+    <div
+      className={cn("pointer-events-none absolute inset-0", className)}
+      style={{ ...auroraStyle, ...style }}
+      aria-hidden="true"
+    >
+      {stylePreset === 'cinematic' && (
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `url("${NOISE_DATA_URL}")`,
+            backgroundRepeat: 'repeat',
+            backgroundSize: `${200 + complexity * 16}px ${200 + complexity * 16}px`,
+            backgroundPosition: `${time * 120}px ${time * 80}px`,
+            opacity: Math.min(0.1, 0.04 + intensity * 0.03),
+            mixBlendMode: 'overlay',
+            filter: 'blur(0.4px) contrast(1.1)',
+          }}
+          aria-hidden="true"
+        />
+      )}
+    </div>
+  );
+}

package/src/environment/AuroraLayer/index.ts

@@ -0,0 +1,2 @@
+export { AuroraLayer } from './AuroraLayer';
+export type { AuroraLayerProps, AuroraType } from './types';

package/src/environment/AuroraLayer/types.ts

@@ -0,0 +1,30 @@
+import type { BaseLayerProps } from '../shared/types';
+
+export type AuroraType = 'aurora' | 'nebula' | 'gradient' | 'stars' | 'clouds' | 'sunset' | 'storm' | 'cosmic' | 'heat' | 'underwater';
+
+export interface AuroraLayerProps extends BaseLayerProps {
+  type: AuroraType;
+  colors?: string[];
+  complexity?: number;
+  direction?: 'horizontal' | 'vertical' | 'radial';
+  blend?: 'normal' | 'screen' | 'overlay' | 'multiply';
+}
+
+export interface AuroraConfig {
+  colors: string[];
+  animationSpeed: number;
+  complexity: number;
+}
+
+export const AURORA_CONFIGS: Record<AuroraType, AuroraConfig> = {
+  aurora: { colors: ['#00ff87', '#60efff', '#ff00aa'], animationSpeed: 0.008, complexity: 3 },
+  nebula: { colors: ['#1a0533', '#4b0082', '#ff006e'], animationSpeed: 0.005, complexity: 4 },
+  gradient: { colors: ['#667eea', '#764ba2'], animationSpeed: 0.003, complexity: 1 },
+  stars: { colors: ['#ffffff', '#fffacd', '#e6e6fa'], animationSpeed: 0.01, complexity: 5 },
+  clouds: { colors: ['#f0f0f0', '#d0d0d0', '#e8e8e8'], animationSpeed: 0.004, complexity: 3 },
+  sunset: { colors: ['#ff6b35', '#f7c59f', '#2e294e'], animationSpeed: 0.002, complexity: 2 },
+  storm: { colors: ['#1c1c1c', '#363636', '#4a4a4a'], animationSpeed: 0.015, complexity: 4 },
+  cosmic: { colors: ['#0d0221', '#0f084b', '#26408b', '#a663cc'], animationSpeed: 0.003, complexity: 5 },
+  heat: { colors: ['#ff4500', '#ff6347', '#ffa500'], animationSpeed: 0.02, complexity: 2 },
+  underwater: { colors: ['#006994', '#00a8cc', '#40e0d0'], animationSpeed: 0.006, complexity: 3 },
+};

package/src/environment/EnvironmentLayer/EnvironmentLayer.stories.tsx

@@ -0,0 +1,262 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EnvironmentLayer } from "./EnvironmentLayer";
+import { ENVIRONMENT_PRESETS, type EnvironmentPreset } from "./presets";
+
+const PRESET_BACKGROUNDS: Record<EnvironmentPreset, string> = {
+  "enchanted-forest": "linear-gradient(to bottom, #0a1f0a, #051005)",
+  "cyberpunk-city": "linear-gradient(to bottom, #0a001a, #1a0033)",
+  "deep-space": "#000005",
+  underwater: "linear-gradient(to bottom, #001a20, #002030)",
+  apocalypse: "linear-gradient(to bottom, #1a1008, #0a0804)",
+  "cozy-night": "linear-gradient(to bottom, #0a0a15, #050510)",
+  haunted: "linear-gradient(to bottom, #0a0a0f, #05050a)",
+  synthwave: "linear-gradient(to bottom, #0a001a, #1a0033)",
+  "zen-garden": "linear-gradient(to bottom, #1a1510, #0f0a08)",
+  volcanic: "linear-gradient(to bottom, #1a0a00, #0a0500)",
+  arctic: "linear-gradient(to bottom, #0a1520, #051015)",
+  noir: "#0a0a0a",
+  ethereal: "linear-gradient(to bottom, #1a0030, #0a0015)",
+  matrix: "#000a00",
+  rave: "#050005",
+  "alien-world": "linear-gradient(to bottom, #0a0020, #050010)",
+};
+
+const meta: Meta<typeof EnvironmentLayer> = {
+  title: "Primitives/Environment/EnvironmentLayer",
+  component: EnvironmentLayer,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    preset: {
+      control: "select",
+      options: Object.keys(ENVIRONMENT_PRESETS),
+    },
+    intensity: {
+      control: { type: "range", min: 0, max: 1, step: 0.1 },
+    },
+    stylePreset: {
+      control: "select",
+      options: ["ui", "cinematic"],
+    },
+    enabled: {
+      control: "boolean",
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const preset = (context.args.preset as EnvironmentPreset) || "enchanted-forest";
+      return (
+        <div
+          style={{
+            width: "100%",
+            height: "500px",
+            position: "relative",
+            background: PRESET_BACKGROUNDS[preset],
+          }}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EnvironmentLayer>;
+
+// Individual preset stories
+export const EnchantedForest: Story = {
+  args: {
+    preset: "enchanted-forest",
+    intensity: 1,
+  },
+};
+
+export const CyberpunkCity: Story = {
+  args: {
+    preset: "cyberpunk-city",
+    intensity: 1,
+  },
+};
+
+export const DeepSpace: Story = {
+  args: {
+    preset: "deep-space",
+    intensity: 1,
+  },
+};
+
+export const Underwater: Story = {
+  args: {
+    preset: "underwater",
+    intensity: 1,
+  },
+};
+
+export const Apocalypse: Story = {
+  args: {
+    preset: "apocalypse",
+    intensity: 1,
+  },
+};
+
+export const CozyNight: Story = {
+  args: {
+    preset: "cozy-night",
+    intensity: 1,
+  },
+};
+
+export const Haunted: Story = {
+  args: {
+    preset: "haunted",
+    intensity: 1,
+  },
+};
+
+export const Synthwave: Story = {
+  args: {
+    preset: "synthwave",
+    intensity: 1,
+  },
+};
+
+export const ZenGarden: Story = {
+  args: {
+    preset: "zen-garden",
+    intensity: 1,
+  },
+};
+
+export const Volcanic: Story = {
+  args: {
+    preset: "volcanic",
+    intensity: 1,
+  },
+};
+
+export const Arctic: Story = {
+  args: {
+    preset: "arctic",
+    intensity: 1,
+  },
+};
+
+export const Noir: Story = {
+  args: {
+    preset: "noir",
+    intensity: 1,
+  },
+};
+
+export const Ethereal: Story = {
+  args: {
+    preset: "ethereal",
+    intensity: 1,
+  },
+};
+
+export const Matrix: Story = {
+  args: {
+    preset: "matrix",
+    intensity: 1,
+  },
+};
+
+export const Rave: Story = {
+  args: {
+    preset: "rave",
+    intensity: 1,
+  },
+};
+
+export const AlienWorld: Story = {
+  args: {
+    preset: "alien-world",
+    intensity: 1,
+  },
+};
+
+// Intensity variants
+export const LowIntensity: Story = {
+  args: {
+    preset: "enchanted-forest",
+    intensity: 0.3,
+  },
+};
+
+export const MediumIntensity: Story = {
+  args: {
+    preset: "cyberpunk-city",
+    intensity: 0.6,
+  },
+};
+
+// Override examples
+export const WithWeatherOverride: Story = {
+  args: {
+    preset: "enchanted-forest",
+    intensity: 1,
+    weatherOverride: {
+      type: "spores",
+      color: "#ff00ff",
+    },
+  },
+};
+
+export const WithLightOverride: Story = {
+  args: {
+    preset: "cyberpunk-city",
+    intensity: 1,
+    lightOverride: {
+      color: "#00ffff",
+      type: "laser",
+    },
+  },
+};
+
+// Gallery view of all presets
+export const AllPresets: Story = {
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", height: "100%", gap: 1 }}>
+      {(Object.keys(ENVIRONMENT_PRESETS) as EnvironmentPreset[]).map((preset) => (
+        <div
+          key={preset}
+          style={{
+            position: "relative",
+            background: PRESET_BACKGROUNDS[preset],
+            minHeight: "200px",
+          }}
+        >
+          <EnvironmentLayer preset={preset} intensity={0.8} />
+          <div
+            style={{
+              position: "absolute",
+              bottom: 8,
+              left: 8,
+              color: "#fff",
+              fontSize: 10,
+              fontFamily: "monospace",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              opacity: 0.8,
+              textShadow: "0 1px 3px rgba(0,0,0,0.8)",
+            }}
+          >
+            {preset}
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100%", height: "800px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/environment/EnvironmentLayer/EnvironmentLayer.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useReducedMotion } from "framer-motion";
+import { cn } from "../../lib/utils";
+import { getPerformanceConfig } from "../shared/performance";
+import type { EnvironmentStylePreset } from "../shared/types";
+import { WeatherLayer } from "../WeatherLayer";
+import type { WeatherLayerProps } from "../WeatherLayer";
+import { FogLayer } from "../FogLayer";
+import type { FogLayerProps } from "../FogLayer";
+import { VolumetricLight } from "../VolumetricLight";
+import type { VolumetricLightProps } from "../VolumetricLight";
+import { AuroraLayer } from "../AuroraLayer";
+import type { AuroraLayerProps } from "../AuroraLayer";
+import { ENVIRONMENT_PRESETS, type EnvironmentPreset } from "./presets";
+
+export interface EnvironmentLayerProps {
+  preset: EnvironmentPreset;
+  enabled?: boolean;
+  intensity?: number;
+  stylePreset?: EnvironmentStylePreset;
+  className?: string;
+  style?: React.CSSProperties;
+  weatherOverride?: Partial<Omit<WeatherLayerProps, "enabled" | "className" | "style">>;
+  fogOverride?: Partial<Omit<FogLayerProps, "enabled" | "className" | "style">>;
+  lightOverride?: Partial<Omit<VolumetricLightProps, "enabled" | "className" | "style">>;
+  skyOverride?: Partial<Omit<AuroraLayerProps, "enabled" | "className" | "style">>;
+}
+
+export function EnvironmentLayer({
+  preset,
+  enabled = true,
+  intensity = 1,
+  stylePreset,
+  className,
+  style,
+  weatherOverride,
+  fogOverride,
+  lightOverride,
+  skyOverride,
+}: EnvironmentLayerProps) {
+  const reducedMotion = useReducedMotion();
+  const perfConfig = getPerformanceConfig();
+  const resolvedStylePreset: EnvironmentStylePreset = stylePreset ?? (perfConfig.useShaders ? "cinematic" : "ui");
+
+  if (!enabled || reducedMotion || perfConfig.tier === "minimal") {
+    return null;
+  }
+
+  const config = ENVIRONMENT_PRESETS[preset];
+
+  if (!config) {
+    console.warn(
+      `EnvironmentLayer: Unknown preset "${preset}". Available presets: ${Object.keys(ENVIRONMENT_PRESETS).join(", ")}`
+    );
+    return null;
+  }
+
+  return (
+    <div
+      className={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
+      style={style}
+      aria-hidden="true"
+    >
+      {config.sky && (
+        <AuroraLayer
+          enabled={enabled}
+          {...config.sky}
+          stylePreset={resolvedStylePreset}
+          intensity={(config.sky.intensity ?? 1) * intensity}
+          {...skyOverride}
+        />
+      )}
+      {config.fog && (
+        <FogLayer
+          enabled={enabled}
+          {...config.fog}
+          stylePreset={resolvedStylePreset}
+          intensity={(config.fog.intensity ?? 1) * intensity}
+          {...fogOverride}
+        />
+      )}
+      {config.light && (
+        <VolumetricLight
+          enabled={enabled}
+          {...config.light}
+          stylePreset={resolvedStylePreset}
+          intensity={(config.light.intensity ?? 1) * intensity}
+          {...lightOverride}
+        />
+      )}
+      {config.weather && (
+        <WeatherLayer
+          enabled={enabled}
+          {...config.weather}
+          stylePreset={resolvedStylePreset}
+          intensity={(config.weather.intensity ?? 1) * intensity}
+          {...weatherOverride}
+        />
+      )}
+    </div>
+  );
+}
+
+EnvironmentLayer.displayName = "EnvironmentLayer";

package/src/environment/EnvironmentLayer/index.ts

@@ -0,0 +1,4 @@
+export { EnvironmentLayer } from "./EnvironmentLayer";
+export type { EnvironmentLayerProps } from "./EnvironmentLayer";
+export { ENVIRONMENT_PRESETS } from "./presets";
+export type { EnvironmentPreset, EnvironmentConfig } from "./presets";