skill-tree-portfolio/src/lib/pixi/background.ts

// Multi-layer space background: gradient → nebula → stars → dust → vignette.
// Each layer is added to the stage here; the three parallax containers are
// returned so the interaction module can offset them while panning.
import { Application, Graphics, Container } from 'pixi.js';
import { gsap } from 'gsap';
import { nebulaPalette } from '$lib/theme';
import { PARTICLE_COUNTS, byDevice } from '$lib/config';
import type { BackgroundLayers } from './types';

export function createBackground(app: Application, isMobile: boolean): BackgroundLayers {
	const deepBackgroundContainer = new Container();
	const nebulaContainer = new Container();
	const starContainer = new Container();

	app.stage.addChild(deepBackgroundContainer);
	app.stage.addChild(nebulaContainer);
	app.stage.addChild(starContainer);

	const screenWidth = app.screen.width;
	const screenHeight = app.screen.height;
	const centerX = screenWidth / 2;
	const centerY = screenHeight / 2;

	// ========== DEEP SPACE GRADIENT ==========
	const spaceGradient = new Graphics();
	const gradientRadius = Math.max(screenWidth, screenHeight);

	const gradientSteps = 15;
	for (let i = gradientSteps; i >= 0; i--) {
		const ratio = i / gradientSteps;
		const radius = gradientRadius * (0.3 + ratio * 0.7);

		const r = Math.floor(8 * (1 - ratio));
		const g = Math.floor(6 * (1 - ratio));
		const b = Math.floor(20 * (1 - ratio));
		const color = (r << 16) + (g << 8) + b;

		spaceGradient.circle(centerX, centerY, radius).fill({ color, alpha: 0.8 });
	}
	deepBackgroundContainer.addChild(spaceGradient);

	// ========== NEBULA CLOUDS ==========
	const nebulaColors = nebulaPalette;

	nebulaColors.forEach((nebula, index) => {
		const angle = (index / nebulaColors.length) * Math.PI * 2 + Math.PI / 4;
		const distance = Math.min(screenWidth, screenHeight) * 0.35;
		const baseX = centerX + Math.cos(angle) * distance;
		const baseY = centerY + Math.sin(angle) * distance;

		const nebulaCloud = new Graphics();

		// Outer very faint glow
		const outerSize = 200 + Math.random() * 150;
		for (let layer = 5; layer >= 0; layer--) {
			const layerRatio = layer / 5;
			const size = outerSize * (0.4 + layerRatio * 0.6);
			const alpha = 0.02 * (1 - layerRatio);
			nebulaCloud.circle(0, 0, size).fill({ color: nebula.color, alpha });
		}

		// Irregular blobs for a more organic look
		for (let i = 0; i < 3; i++) {
			const offsetX = (Math.random() - 0.5) * 100;
			const offsetY = (Math.random() - 0.5) * 100;
			const blobSize = 60 + Math.random() * 80;

			for (let layer = 3; layer >= 0; layer--) {
				const layerRatio = layer / 3;
				const size = blobSize * (0.5 + layerRatio * 0.5);
				const alpha = 0.03 * (1 - layerRatio);
				nebulaCloud.circle(offsetX, offsetY, size).fill({ color: nebula.color, alpha });
			}
		}

		nebulaCloud.x = baseX;
		nebulaCloud.y = baseY;
		nebulaContainer.addChild(nebulaCloud);

		// Animate nebula pulsing
		gsap.to(nebulaCloud, {
			alpha: 0.6,
			duration: 3 + Math.random() * 2,
			ease: 'sine.inOut',
			yoyo: true,
			repeat: -1,
			delay: Math.random() * 2
		});

		gsap.to(nebulaCloud.scale, {
			x: 1.1,
			y: 1.1,
			duration: 4 + Math.random() * 2,
			ease: 'sine.inOut',
			yoyo: true,
			repeat: -1,
			delay: Math.random() * 2
		});
	});

	// ========== DISTANT STAR FIELD ==========
	// Layer 1: Tiny distant stars (many, dim)
	const distantStarCount = byDevice(PARTICLE_COUNTS.distantStars, isMobile);
	for (let i = 0; i < distantStarCount; i++) {
		const star = new Graphics();
		const size = Math.random() * 1 + 0.5;
		const alpha = Math.random() * 0.4 + 0.1;

		star.circle(0, 0, size).fill({ color: 0xffffff, alpha });

		star.x = Math.random() * screenWidth;
		star.y = Math.random() * screenHeight;
		starContainer.addChild(star);

		gsap.to(star, {
			alpha: alpha * 0.3,
			duration: 1 + Math.random() * 2,
			ease: 'sine.inOut',
			yoyo: true,
			repeat: -1,
			delay: Math.random() * 3
		});
	}

	// Layer 2: Medium stars with colour tints
	const mediumStarCount = byDevice(PARTICLE_COUNTS.mediumStars, isMobile);
	const starTints = [0xffffff, 0xfff8e7, 0xe7f0ff, 0xffe7e7, 0xe7ffe7];

	for (let i = 0; i < mediumStarCount; i++) {
		const star = new Graphics();
		const size = Math.random() * 1.5 + 1;
		const alpha = Math.random() * 0.5 + 0.3;
		const tint = starTints[Math.floor(Math.random() * starTints.length)];

		star.circle(0, 0, size + 2).fill({ color: tint, alpha: alpha * 0.2 });
		star.circle(0, 0, size).fill({ color: tint, alpha });

		star.x = Math.random() * screenWidth;
		star.y = Math.random() * screenHeight;
		starContainer.addChild(star);

		gsap.to(star, {
			alpha: alpha * 0.4,
			duration: 0.5 + Math.random() * 1.5,
			ease: 'sine.inOut',
			yoyo: true,
			repeat: -1,
			delay: Math.random() * 2
		});
	}

	// Layer 3: Bright feature stars (few, prominent)
	const brightStarCount = byDevice(PARTICLE_COUNTS.brightStars, isMobile);
	for (let i = 0; i < brightStarCount; i++) {
		const star = new Graphics();
		const size = Math.random() * 2 + 1.5;
		const tint = starTints[Math.floor(Math.random() * starTints.length)];

		star.circle(0, 0, size + 6).fill({ color: tint, alpha: 0.05 });
		star.circle(0, 0, size + 3).fill({ color: tint, alpha: 0.1 });
		star.circle(0, 0, size).fill({ color: 0xffffff, alpha: 0.9 });

		star.x = Math.random() * screenWidth;
		star.y = Math.random() * screenHeight;
		starContainer.addChild(star);

		gsap.to(star.scale, {
			x: 1.3,
			y: 1.3,
			duration: 2 + Math.random() * 2,
			ease: 'sine.inOut',
			yoyo: true,
			repeat: -1,
			delay: Math.random() * 2
		});
	}

	// ========== FLOATING DUST PARTICLES ==========
	const dustParticles: Array<{ graphics: Graphics; vx: number; vy: number }> = [];
	const dustCount = byDevice(PARTICLE_COUNTS.dust, isMobile);

	for (let i = 0; i < dustCount; i++) {
		const dust = new Graphics();
		const size = Math.random() * 2 + 1;
		const colorIndex = Math.floor(Math.random() * nebulaColors.length);
		const color = nebulaColors[colorIndex].color;

		dust.circle(0, 0, size + 4).fill({ color, alpha: 0.05 });
		dust.circle(0, 0, size + 2).fill({ color, alpha: 0.08 });
		dust.circle(0, 0, size).fill({ color, alpha: 0.15 });

		dust.x = Math.random() * screenWidth;
		dust.y = Math.random() * screenHeight;
		starContainer.addChild(dust);

		dustParticles.push({
			graphics: dust,
			vx: (Math.random() - 0.5) * 0.2,
			vy: (Math.random() - 0.5) * 0.2
		});

		gsap.to(dust, {
			alpha: 0.3,
			duration: 3 + Math.random() * 2,
			ease: 'sine.inOut',
			yoyo: true,
			repeat: -1,
			delay: Math.random() * 2
		});
	}

	// Animate dust particles drifting. Named function + indexed loop: `forEach`
	// with an inline arrow allocated a fresh closure on every frame.
	function driftDust() {
		for (let i = 0; i < dustParticles.length; i++) {
			const p = dustParticles[i];
			const g = p.graphics;
			g.x += p.vx;
			g.y += p.vy;

			if (g.x < -20) g.x = screenWidth + 20;
			else if (g.x > screenWidth + 20) g.x = -20;
			if (g.y < -20) g.y = screenHeight + 20;
			else if (g.y > screenHeight + 20) g.y = -20;
		}
	}
	app.ticker.add(driftDust);

	// ========== VIGNETTE OVERLAY ==========
	const vignette = new Graphics();
	const vignetteSize = Math.max(screenWidth, screenHeight) * 1.2;

	for (let i = 12; i >= 0; i--) {
		const ratio = i / 12;
		const radius = vignetteSize * (0.4 + ratio * 0.6);
		const alpha = ratio * ratio * 0.4;
		vignette.circle(centerX, centerY, radius).fill({ color: 0x000000, alpha });
	}
	app.stage.addChild(vignette);

	// The gradient (16 fills) and vignette (13 fills) are near-full-screen and
	// never change — bake them to a texture instead of recompositing every frame.
	deepBackgroundContainer.cacheAsTexture(true);
	vignette.cacheAsTexture(true);

	// Nothing in the background is clickable; skip it during hit-testing.
	deepBackgroundContainer.interactiveChildren = false;
	nebulaContainer.interactiveChildren = false;
	starContainer.interactiveChildren = false;
	vignette.eventMode = 'none';

	return { deepBackgroundContainer, nebulaContainer, starContainer };
}