-
- To get started, edit the{" "}
-
-
+ {/* Navigation Header */}
+
+
+
+ {/* Mobile Menu Dropdown */}
+ {mobileMenuOpen && (
+
+ )}
+
+ );
+}
diff --git a/src/components/PaintSplatterIntro.tsx b/src/components/PaintSplatterIntro.tsx
new file mode 100644
index 0000000..aef5176
--- /dev/null
+++ b/src/components/PaintSplatterIntro.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Image from "next/image";
+
+interface PaintSplatterIntroProps {
+ onStart: () => void;
+ showPreloader: boolean;
+}
+
+interface Star {
+ id: number;
+ top: number;
+ left: number;
+ size: number;
+ color: string;
+ duration: number;
+ delay: number;
+ isCrossStar?: boolean;
+}
+
+export default function PaintSplatterIntro({
+ onStart,
+ showPreloader,
+}: PaintSplatterIntroProps) {
+ const [isFadingOut, setIsFadingOut] = useState(false);
+ const [stars, setStars] = useState([]);
+
+ // Generate galaxy stars asynchronously on mount to avoid React hydration & cascading render lint
+ useEffect(() => {
+ const starColors = [
+ "#ffffff",
+ "#fef08a",
+ "#fbbf24",
+ "#2dd4bf",
+ "#93c5fd",
+ "#f472b6",
+ ];
+ const timer = setTimeout(() => {
+ const generatedStars = Array.from({ length: 80 }, (_, i) => ({
+ id: i,
+ top: Math.floor(Math.random() * 100),
+ left: Math.floor(Math.random() * 100),
+ size: Number((Math.random() * 2.8 + 1.2).toFixed(2)),
+ color: starColors[Math.floor(Math.random() * starColors.length)],
+ duration: Number((2 + Math.random() * 3.5).toFixed(2)),
+ delay: Number((Math.random() * 3).toFixed(2)),
+ isCrossStar: i % 12 === 0,
+ }));
+ setStars(generatedStars);
+ }, 0);
+ return () => clearTimeout(timer);
+ }, []);
+
+ const handleStart = useCallback(() => {
+ if (isFadingOut) return;
+ setIsFadingOut(true);
+ setTimeout(() => {
+ onStart();
+ }, 400);
+ }, [isFadingOut, onStart]);
+
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Enter" && showPreloader) {
+ handleStart();
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [showPreloader, handleStart]);
+
+ if (!showPreloader) return null;
+
+ return (
+ (null);
+ const mouseRef = useRef({ x: mouseX, y: mouseY });
+
+ useEffect(() => {
+ mouseRef.current.x = mouseX;
+ mouseRef.current.y = mouseY;
+ }, [mouseX, mouseY]);
+
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ // 1. Setup Scene, Camera, Renderer
+ const scene = new THREE.Scene();
+ const camera = new THREE.PerspectiveCamera(
+ 45,
+ container.clientWidth / container.clientHeight,
+ 0.1,
+ 1000
+ );
+ camera.position.z = 10;
+
+ const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+ renderer.setSize(container.clientWidth, container.clientHeight);
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
+ renderer.toneMappingExposure = 1.35;
+ container.appendChild(renderer.domElement);
+
+ // 2. Rich Lighting Setup
+ const ambientLight = new THREE.AmbientLight(0x0f3b4a, 2.0);
+ scene.add(ambientLight);
+
+ const mainSunLight = new THREE.DirectionalLight(0xfbbf24, 4.2);
+ mainSunLight.position.set(12, 12, 10);
+ scene.add(mainSunLight);
+
+ const cyanRimLight = new THREE.PointLight(0x2dd4bf, 5, 40);
+ cyanRimLight.position.set(-10, 6, 6);
+ scene.add(cyanRimLight);
+
+ const warmFillLight = new THREE.PointLight(0xf59e0b, 3, 30);
+ warmFillLight.position.set(6, -8, 5);
+ scene.add(warmFillLight);
+
+ // 3. Texture Loading
+ const textureLoader = new THREE.TextureLoader();
+
+ const tealTexture = textureLoader.load("/textures/teal-planet.png");
+ tealTexture.colorSpace = THREE.SRGBColorSpace;
+ tealTexture.wrapS = THREE.RepeatWrapping;
+ tealTexture.wrapT = THREE.ClampToEdgeWrapping;
+
+ const goldTexture = textureLoader.load("/textures/gold-planet.png");
+ goldTexture.colorSpace = THREE.SRGBColorSpace;
+
+ // 4. Create Planet 1: Top-Right Artistic Teal Celestial Sphere
+ const tealGeo = new THREE.SphereGeometry(1.75, 64, 64);
+ const tealMat = new THREE.MeshStandardMaterial({
+ map: tealTexture,
+ bumpMap: tealTexture,
+ bumpScale: 0.04,
+ roughness: 0.32,
+ metalness: 0.35,
+ emissive: 0x064e3b,
+ emissiveIntensity: 0.25,
+ });
+ const tealPlanet = new THREE.Mesh(tealGeo, tealMat);
+
+ const planet1Group = new THREE.Group();
+ planet1Group.position.set(4.2, 2.5, -0.5);
+ planet1Group.add(tealPlanet);
+
+ // Atmosphere Glow Halo for Teal Planet
+ const glowGeo = new THREE.SphereGeometry(1.88, 32, 32);
+ const glowMat = new THREE.MeshBasicMaterial({
+ color: 0x2dd4bf,
+ transparent: true,
+ opacity: 0.22,
+ side: THREE.BackSide,
+ });
+ const tealGlow = new THREE.Mesh(glowGeo, glowMat);
+ planet1Group.add(tealGlow);
+ scene.add(planet1Group);
+
+ // 5. Create Planet 2: Bottom-Left Golden Astrolabe Sphere & Rings
+ const goldGeo = new THREE.SphereGeometry(1.4, 64, 64);
+ const goldMat = new THREE.MeshStandardMaterial({
+ map: goldTexture,
+ bumpMap: goldTexture,
+ bumpScale: 0.05,
+ roughness: 0.28,
+ metalness: 0.55,
+ emissive: 0x78350f,
+ emissiveIntensity: 0.2,
+ });
+ const goldPlanet = new THREE.Mesh(goldGeo, goldMat);
+
+ // Golden Concentric Rings
+ const ringGeo = new THREE.RingGeometry(1.7, 3.0, 64);
+ const pos = ringGeo.attributes.position;
+ const uv = ringGeo.attributes.uv;
+ for (let i = 0; i < pos.count; i++) {
+ const vx = pos.getX(i);
+ const vy = pos.getY(i);
+ const dist = Math.sqrt(vx * vx + vy * vy);
+ const u = (dist - 1.7) / (3.0 - 1.7);
+ uv.setXY(i, u, 0.5);
+ }
+
+ const ringMat = new THREE.MeshStandardMaterial({
+ map: goldTexture,
+ side: THREE.DoubleSide,
+ transparent: true,
+ opacity: 0.88,
+ roughness: 0.3,
+ metalness: 0.6,
+ });
+ const rings = new THREE.Mesh(ringGeo, ringMat);
+ rings.rotation.x = Math.PI / 2.3;
+ rings.rotation.y = -Math.PI / 7;
+
+ const planet2Group = new THREE.Group();
+ planet2Group.position.set(-4.0, -2.4, -1.0);
+ planet2Group.add(goldPlanet);
+ planet2Group.add(rings);
+ scene.add(planet2Group);
+
+ // Responsive aspect ratio positioning (Keep planets same scale)
+ const updatePositionsForScreen = () => {
+ const aspect = container.clientWidth / container.clientHeight;
+ planet1Group.position.set(aspect * 2.8, 2.3, -0.5);
+ planet1Group.scale.set(1.0, 1.0, 1.0);
+ planet2Group.position.set(-aspect * 2.6, -2.2, -1.0);
+ planet2Group.scale.set(1.0, 1.0, 1.0);
+ };
+ updatePositionsForScreen();
+
+
+
+ // 6. Animation Loop with Mouse Parallax
+ let animationFrameId: number;
+ const animate = () => {
+ // Rotation
+ tealPlanet.rotation.y += 0.002;
+ tealPlanet.rotation.x += 0.0006;
+
+ goldPlanet.rotation.y += 0.003;
+ rings.rotation.z += 0.0004;
+
+ // Parallax camera response
+ const targetCamX = mouseRef.current.x * 0.9;
+ const targetCamY = mouseRef.current.y * 0.9;
+
+ camera.position.x += (targetCamX - camera.position.x) * 0.05;
+ camera.position.y += (targetCamY - camera.position.y) * 0.05;
+ camera.lookAt(0, 0, 0);
+
+ renderer.render(scene, camera);
+ animationFrameId = requestAnimationFrame(animate);
+ };
+
+ animate();
+
+ // 7. Resize Handler
+ const handleResize = () => {
+ if (!container) return;
+ camera.aspect = container.clientWidth / container.clientHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(container.clientWidth, container.clientHeight);
+ updatePositionsForScreen();
+ };
+
+ window.addEventListener("resize", handleResize);
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ cancelAnimationFrame(animationFrameId);
+ if (container.contains(renderer.domElement)) {
+ container.removeChild(renderer.domElement);
+ }
+ renderer.dispose();
+ };
+ }, []);
+
+ return (
+
+ );
+}
+
diff --git a/src/config/hero.ts b/src/config/hero.ts
new file mode 100644
index 0000000..363e0fe
--- /dev/null
+++ b/src/config/hero.ts
@@ -0,0 +1,3 @@
+export const LOADER_IMAGES = {
+ inkSplash: "/ink-spread.gif",
+};
- To get started, edit the{" "}
-
- page.tsx
- {" "}
- file.
-
- - Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
+ <> +
+
+
+ {/* 2. Midground Integrated Cloud Layer (Hidden on Mobile, Visible on Desktop) */}
+
+ {/* Top-Left Cloud Bank */}
+
+
+ {/* 3. Three.js 3D Textured Planets Canvas */}
+
+
+
+ {/* Mid-Left Cloud Layer */}
+
+
+
+ {/* Bottom-Right Main Cloud Bank */}
+
+
+
+ {/* Bottom-Left Base Cloud */}
+
+
+
+ {/* Bottom-Right Foreground Cloud Overlay */}
+
-
+
+
+ {/* Top-Left Foreground Cloud Overlay */}
+
+
+
+ {/* Prominent Fat Cloud Puff */}
+
+
+
+ {/* Bottom-Left Foreground Wispy Accent */}
+
+
-
+
+ {/* 5. Center Hero Title - Transparent INNOVISION PNG Image */}
+
+
);
}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..12b8994
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import { Menu, X, Volume2, VolumeX } from "lucide-react";
+
+interface NavbarProps {
+ isPlaying?: boolean;
+ onToggleAudio?: () => void;
+}
+
+export default function Navbar({ isPlaying = false, onToggleAudio }: NavbarProps) {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ const navLinks = [
+ { name: "Home", href: "#" },
+ { name: "About", href: "#about" },
+ { name: "Events", href: "#events" },
+ { name: "Gallery", href: "#gallery" },
+ { name: "Merch", href: "#Merch" },
+ ];
+
+ return (
+
+
-
+ {/* Background Deep Space Galaxy Radial Gradient */}
+
+
+ {/* Scattered Galaxy Stars */}
+
+ );
+}
diff --git a/src/components/PlanetsCanvas.tsx b/src/components/PlanetsCanvas.tsx
new file mode 100644
index 0000000..32c3295
--- /dev/null
+++ b/src/components/PlanetsCanvas.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+
+interface PlanetsCanvasProps {
+ mouseX?: number;
+ mouseY?: number;
+}
+
+export default function PlanetsCanvas({ mouseX = 0, mouseY = 0 }: PlanetsCanvasProps) {
+ const containerRef = useRef
+ {stars.map((star) => (
+
+
+
+ {/* Enter Button */}
+
+
+ {/* Keyboard hint */}
+
+ Press Enter to launch
+
+
+ {star.isCrossStar && (
+
+ )}
+
+ ))}
+