Merge pull request #80 from ZackGoldblum/starfield-revamp

Update starfield and UI fade-in timing

Author: ZackGoldblum

src/App.jsx

@@ -23,19 +23,19 @@ function App() {
         const handleSkyboxLoaded = () => {
             setTimeout(() => {
                 setUiVisible(true);
-            }, 500);
+            }, 1000);
         };
 
         return (
             <>
-                <Starfield onSkyboxLoaded={handleSkyboxLoaded} uiVisible={uiVisible} />
+                <Starfield onSkyboxLoaded={handleSkyboxLoaded} />
                 {!isStarsPage && (
                     <div
                         style={{
                             position: 'relative',
                             zIndex: 1,
                             opacity: uiVisible ? 1 : 0,
-                            transition: 'opacity 0.5s ease-in-out'
+                            transition: 'opacity 2.0s ease-in-out'
                         }}
                     >
                         <Header />

src/components/Starfield.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import * as THREE from 'three';
 
-const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false, disableScrollMotion = false }) => {
+const Starfield = ({ onSkyboxLoaded = () => { }, disableScrollMotion = false }) => {
     // Three.js scene references
     const mountRef = useRef(null);
     const sceneRef = useRef(null);
@@ -40,12 +40,12 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false, disableScrol
         starsAnimatingRef.current = starsAnimating;
     }, [starsAnimating]);
 
-    // Start animation when UI becomes visible
+    // Start animation when stars become visible (independent of UI)
     useEffect(() => {
-        if (uiVisible && starsVisible && !starsAnimating) {
+        if (starsVisible && !starsAnimating) {
             setStarsAnimating(true);
         }
-    }, [uiVisible, starsVisible, starsAnimating]);
+    }, [starsVisible, starsAnimating]);
 
     useEffect(() => {
         let scene, camera, renderer, skyboxMesh;
@@ -97,7 +97,7 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false, disableScrol
             velocityDecay: 0.95,
             maxVelocity: 2000,
             scrollAmplification: { base: 2.5, max: 40 },
-            fadeInDuration: 2.0
+            fadeInDuration: 10.0
         };
 
         // Function to create a layer of stars
@@ -228,20 +228,28 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false, disableScrol
 
                     scene.add(skyboxMesh);
 
-                    // Initialize stars and notify completion
-                    onSkyboxLoadedRef.current();
+                    // Initialize stars and start animation immediately
                     setStarsVisible(true);
 
                     // Start the animation loop
                     animate();
+
+                    // Delay the UI trigger until stars are visible
+                    setTimeout(() => {
+                        onSkyboxLoadedRef.current();
+                    }, 2000);
                 },
                 undefined, // Progress callback not needed
                 (error) => {
                     console.error('Failed to load galaxy texture:', error);
                     // No fallback - just proceed with black background and stars
-                    onSkyboxLoadedRef.current();
                     setStarsVisible(true);
                     animate();
+
+                    // Delay the UI trigger until stars are visible
+                    setTimeout(() => {
+                        onSkyboxLoadedRef.current();
+                    }, 2000);
                 }
             );
 
@@ -485,7 +493,6 @@ const Starfield = ({ onSkyboxLoaded = () => { }, uiVisible = false, disableScrol
 // PropTypes validation
 Starfield.propTypes = {
     onSkyboxLoaded: PropTypes.func,
-    uiVisible: PropTypes.bool,
     disableScrollMotion: PropTypes.bool
 };
 

src/index.css

@@ -693,8 +693,8 @@ h3 {
   /* 100%*num_slides */
   height: 100%;
   position: relative;
-  -webkit-animation: slide 30s infinite;
-  animation: slide 30s infinite;
+  -webkit-animation: slide 30s infinite 6s;
+  animation: slide 30s infinite 6s;
 }
 
 .slider {
@@ -755,8 +755,8 @@ h3 {
   height: 100%;
   border-radius: 50%;
   position: relative;
-  -webkit-animation: on 30s infinite;
-  animation: on 30s infinite;
+  -webkit-animation: on 30s infinite 6s;
+  animation: on 30s infinite 6s;
 }
 
 @keyframes slide {
@@ -889,21 +889,22 @@ h3 {
 }
 
 .switch>ul>li:nth-child(1) {
-  animation: indicator1 30s infinite;
+  animation: indicator1 30s infinite 6s;
+  background-color: var(--blue_color);
 }
 
 .switch>ul>li:nth-child(2) {
-  animation: indicator2 30s infinite;
+  animation: indicator2 30s infinite 6s;
 }
 
 .switch>ul>li:nth-child(3) {
-  animation: indicator3 30s infinite;
+  animation: indicator3 30s infinite 6s;
 }
 
 .switch>ul>li:nth-child(4) {
-  animation: indicator4 30s infinite;
+  animation: indicator4 30s infinite 6s;
 }
 
 .switch>ul>li:nth-child(5) {
-  animation: indicator5 30s infinite;
+  animation: indicator5 30s infinite 6s;
 }