diff --git a/index.html b/index.html index 4542624..b93eb30 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,20 @@ + + + +
diff --git a/package-lock.json b/package-lock.json index 7512009..6677b9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,17 +12,17 @@ "@remotion/cli": "^4.0.79", "@remotion/player": "^4.0.79", "@remotion/renderer": "^4.0.79", - "framer-motion": "^11.0.3", + "framer-motion": "^11.0.8", "pts": "^0.11.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.0", "simplex-noise": "^4.0.1", - "three": "^0.161.0", + "three": "^0.162.0", "web-vitals": "^3.5.2" }, "devDependencies": { - "@types/three": "^0.161.2", + "@types/three": "^0.162.0", "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.20", "cssnano": "^7.0.6", @@ -1751,6 +1751,12 @@ "node": ">=10.13.0" } }, + "node_modules/@tweenjs/tween.js": { + "version": "23.1.3", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz", + "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==", + "dev": true + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1835,11 +1841,12 @@ "dev": true }, "node_modules/@types/three": { - "version": "0.161.2", - "resolved": "https://registry.npmjs.org/@types/three/-/three-0.161.2.tgz", - "integrity": "sha512-DazpZ+cIfBzbW/p0zm6G8CS03HBMd748A3R1ZOXHpqaXZLv2I5zNgQUrRG//UfJ6zYFp2cUoCQaOLaz8ubH07w==", + "version": "0.162.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.162.0.tgz", + "integrity": "sha512-0j5yZcVukVIhrhSIC7+LmBPkkMoMuEJ1AfYBZfgNytdYqYREMuiyXWhYOMeZLBElTEAlJIZn7r2W3vqTIgjWlg==", "dev": true, "dependencies": { + "@tweenjs/tween.js": "~23.1.1", "@types/stats.js": "*", "@types/webxr": "*", "fflate": "~0.6.10", @@ -4630,9 +4637,9 @@ } }, "node_modules/three": { - "version": "0.161.0", - "resolved": "https://registry.npmjs.org/three/-/three-0.161.0.tgz", - "integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw==" + "version": "0.162.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.162.0.tgz", + "integrity": "sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==" }, "node_modules/tiny-invariant": { "version": "1.3.3", diff --git a/package.json b/package.json index 975d358..9fc9a03 100644 --- a/package.json +++ b/package.json @@ -14,17 +14,17 @@ "@remotion/cli": "^4.0.79", "@remotion/player": "^4.0.79", "@remotion/renderer": "^4.0.79", - "framer-motion": "^11.0.3", + "framer-motion": "^11.0.8", "pts": "^0.11.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.0", "simplex-noise": "^4.0.1", - "three": "^0.161.0", + "three": "^0.162.0", "web-vitals": "^3.5.2" }, "devDependencies": { - "@types/three": "^0.161.2", + "@types/three": "^0.162.0", "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.20", "cssnano": "^7.0.6", diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index a5bc3b1..e827299 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -58,6 +58,40 @@ function Home({ onMount }) { } }; + const PlatformMarquee = React.memo(() => { + const platforms = [ + { name: 'terminals', className: 'platform-terminals' }, + { name: 'radical', className: 'platform-radical' }, + { name: 'pathfinder', className: 'platform-pathfinder' }, + { name: 'wuji', className: 'platform-wuji' }, + { name: 'boom', className: 'platform-boom' } + ]; + + return ( +
+
+ {[...Array(2)].map((_, setIndex) => ( +
+ {platforms.map(({ name, className }) => ( + + {name} + + ))} +
+ ))} +
+
+ ); + }); + return ( <> -
-
- {[...Array(2)].map((_, setIndex) => ( -
- terminals - radical - pathfinder - wuji - boom - journey -
- ))} -
-
+ { + const avgFps = this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length; + + if (avgFps < 30 && this.performanceMode !== 'low') { + this.setLowPerformanceMode(); + } else if (avgFps > 45 && this.performanceMode !== 'high') { + this.setHighPerformanceMode(); + } + + this.fpsHistory = []; + }, 1000); + } + + setLowPerformanceMode() { + this.performanceMode = 'low'; + this.renderer.setPixelRatio(1); + this.flowField.particleCount = Math.floor(this.flowField.particleCount * 0.7); + this.spheres.spheres.forEach(sphere => { + if (sphere.material.wireframe) { + sphere.visible = false; + } + }); + } + + setHighPerformanceMode() { + this.performanceMode = 'high'; + this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); + this.flowField.particleCount = Math.floor(this.flowField.particleCount * 1.3); + this.spheres.spheres.forEach(sphere => { + sphere.visible = true; + }); + } } \ No newline at end of file diff --git a/style.css b/style.css index 329ba1e..b65b417 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,13 @@ :root { - --font-display: 'Audiowide', system-ui; + --font-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui; --font-body: system-ui, -apple-system, sans-serif; --primary: #7A9E9F; --text: rgba(255, 255, 255, 0.9); --accent: #7A9E9F; --background: #000000; --glow: rgba(122, 158, 159, 0.5); + --glow-primary: rgba(122, 158, 159, 0.5); + --glow-secondary: rgba(80, 108, 127, 0.3); --card-bg: rgba(122, 158, 159, 0.05); --hover: rgba(122, 158, 159, 0.1); } @@ -117,7 +119,7 @@ canvas { } header { - margin-bottom: 8rem; /* Changed from 8rem to create equal spacing */ + margin-bottom: 8rem; opacity: 0; transform: translateY(20px); animation: fadeIn 1s ease forwards; @@ -190,24 +192,23 @@ h2::before { .platforms-marquee { position: relative; - width: 110%; - left: -5%; + width: 100%; overflow: hidden; padding: 2rem 0; - margin: 4rem 0; background: linear-gradient( to right, transparent, - var(--card-bg) 20%, - var(--card-bg) 80%, + var(--background) 15%, + var(--background) 85%, transparent ); } .platforms-track { display: flex; - gap: 4rem; - animation: scroll 30s linear infinite; + animation: scroll 40s linear infinite; + opacity: 0.7; + transition: opacity 0.3s ease; white-space: nowrap; will-change: transform; width: fit-content; @@ -228,57 +229,89 @@ h2::before { ); } +.platforms-track:hover { + opacity: 1; + animation-play-state: paused; +} + .platform-name { - font-size: 2.5rem; - opacity: 0.7; - transition: all 0.3s ease; - cursor: pointer; - padding: 0.5rem 2rem; + font-family: var(--font-display); + font-size: clamp(1.5rem, 4vw, 2.5rem); + padding: 0 2rem; position: relative; - display: inline-block; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + text-transform: lowercase; + letter-spacing: 0.05em; +} + +.platform-name::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background: radial-gradient( + circle at center, + var(--glow-primary), + transparent 70% + ); + transform: translate(-50%, -50%) scale(0.8); + opacity: 0; + transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + pointer-events: none; + z-index: -1; } .platform-name:hover { - opacity: 1; - transform: scale(1.05); + transform: translateY(-2px); + text-shadow: + 0 0 10px var(--glow-primary), + 0 0 20px var(--glow-secondary); +} + +.platform-name:hover::before { + opacity: 0.2; + transform: translate(-50%, -50%) scale(1.2); } /* Individual platform styles */ .platform-terminals { font-family: "Space Mono", monospace; letter-spacing: -0.05em; - color: var(--glow); + color: #7A9E9F; + font-weight: 700; text-shadow: 0 0 10px rgba(122, 158, 159, 0.3); } .platform-radical { font-family: var(--font-display); font-weight: 700; - background: linear-gradient(135deg, var(--accent), var(--glow)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + color: #506C7F; + font-style: italic; letter-spacing: 0.1em; } .platform-pathfinder { font-family: "Syncopate", var(--font-display); - letter-spacing: -0.02em; - color: var(--text); - border-bottom: 2px solid var(--glow); + letter-spacing: 0.1em; + color: #8BADB5; } .platform-wuji { font-family: "Cinzel", serif; letter-spacing: 0.2em; - color: var(--accent); + color: #9ECFD0; + font-weight: 300; text-shadow: 0 0 20px rgba(80, 108, 127, 0.2); } .platform-boom { font-family: "Audiowide", var(--font-display); - color: var(--glow); - text-shadow: 0 0 15px rgba(122, 158, 159, 0.4); + color: #6B8E8F; + font-weight: 800; + letter-spacing: -0.02em; transform: skew(-5deg); } @@ -294,520 +327,6 @@ h2::before { transform: translateX(0); } 100% { - transform: translateX(calc(-50% - 2rem)); + transform: translateX(-50%); } -} - -.tagline { - font-size: 1.75rem; - line-height: 1.4; - max-width: 650px; - font-weight: 400; - color: var(--text); - opacity: 0.8; - letter-spacing: -0.02em; -} - -/* Adjust section margin to maintain spacing */ -.section { - margin: 8rem 0; /* Changed from 12rem to create equal spacing */ - opacity: 0.8; - transform: translateY(20px); - transition: opacity .8s ease, transform .8s ease; -} - -.section.visible { - opacity: 1; - transform: translateY(0); -} - -.grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 3rem; - margin-top: 4rem; -} - -.card { - background: var(--card-bg); - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - padding: 2.5rem; - border-radius: 2px; - border: 1px solid rgba(255, 255, 255, .03); - transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), - box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1); - transform-style: preserve-3d; - will-change: transform; - position: relative; - overflow: hidden; -} - -.card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: radial-gradient( - circle at var(--x, 50%) var(--y, 50%), - rgba(122, 158, 159, 0.1) 0%, - transparent 50% - ); - opacity: 0; - transition: opacity 0.3s ease; -} - -.card:hover::before { - opacity: 1; -} - -.learn-more-content { - max-height: 0; - opacity: 0; - overflow: hidden; - transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); - margin: 0; - padding: 0; -} - -.card:hover .learn-more-content { - max-height: 300px; - opacity: 1; - margin-top: 1.5rem; -} - -.learn-more-content ul { - list-style: none; - padding: 0; - margin: 0; -} - -.learn-more-content li { - position: relative; - padding-left: 1.5rem; - margin-bottom: 0.75rem; - font-size: 0.95rem; - opacity: 0.8; - transform: translateY(10px); - transition: all 0.3s ease; -} - -.learn-more-content li::before { - content: '/'; - position: absolute; - left: 0; - color: var(--glow); - opacity: 0.6; -} - -.card:hover .learn-more-content li { - transform: translateY(0); - opacity: 1; -} - -.experience-list { - list-style: none; - padding: 0; - margin: 1.5rem 0 0 0; -} - -.experience-list li { - position: relative; - padding-left: 1.5rem; - margin-bottom: 1rem; - font-size: 0.95rem; - opacity: 0.8; - line-height: 1.5; -} - -.experience-list li::before { - content: '/'; - position: absolute; - left: 0; - color: var(--glow); - opacity: 0.6; -} - -.card h3 { - font-family: var(--font-display); - color: var(--glow); - margin-bottom: 1.25rem; - font-size: 1.5rem; - letter-spacing: -0.02em; - font-weight: 500; -} - -.card p { - font-size: 1rem; - line-height: 1.7; - opacity: 0.8; - letter-spacing: -0.01em; -} - -.learn-more { - display: inline-flex; - align-items: center; - margin-top: 1.5rem; - color: var(--accent); - text-decoration: none; - font-size: 0.95rem; - transition: all 0.3s ease; - font-weight: 500; - letter-spacing: 0.02em; -} - -.learn-more:hover { - color: var(--glow); - transform: translateX(3px); -} - -.cta-container { - display: flex; - flex-direction: column; - gap: 1rem; - margin-top: 3rem; - align-items: flex-start; -} - -.zcal-inline-widget { - margin: 2rem 0; - width: 100%; - max-width: 600px; -} - -.cta-button { - background: transparent; - color: var(--text); - border: 1px solid var(--accent); - padding: 1rem 2.5rem; - font-size: 0.95rem; - font-weight: 500; - cursor: pointer; - transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); - font-family: var(--font-body); - letter-spacing: 0.02em; - position: relative; - overflow: hidden; - width: 100%; - max-width: 600px; - text-align: center; -} - -.cta-button::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 150%; - height: 150%; - background: var(--accent); - transform: translate(-50%, -50%) scale(0); - opacity: 0; - transition: transform 0.6s ease, opacity 0.4s ease; - z-index: -1; -} - -.cta-button:hover { - border-color: var(--glow); -} - -.cta-button:hover::before { - transform: translate(-50%, -50%) scale(1); - opacity: 0.1; -} - -.text-link { - color: var(--text); - text-decoration: none; - opacity: 0.8; - transition: all 0.3s ease; - font-weight: 500; - letter-spacing: 0.02em; -} - -.text-link:hover { - opacity: 1; - color: var(--glow); -} - -footer { - margin-top: 12rem; - padding: 3rem 0; - border-top: 1px solid rgba(255, 255, 255, 0.03); -} - -.social-links { - display: flex; - gap: 3rem; - margin-bottom: 1.5rem; -} - -.social-links a { - color: var(--text); - text-decoration: none; - opacity: 0.7; - transition: all 0.3s ease; - font-size: 0.95rem; - font-weight: 500; - letter-spacing: 0.02em; -} - -.social-links a:hover { - opacity: 1; - color: var(--glow); -} - -.copyright { - opacity: 0.5; - font-size: 0.9rem; - letter-spacing: 0.01em; -} - -/* Add to existing style.css */ -.back-link { - display: inline-block; - color: var(--text); - text-decoration: none; - opacity: 0.8; - margin-bottom: 2rem; - font-size: 1rem; - transition: all 0.3s ease; - letter-spacing: 0.02em; -} - -.back-link:hover { - opacity: 1; - color: var(--glow); - transform: translateX(-3px); -} - -.manifesto-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 4rem; - margin-bottom: 6rem; -} - -.manifesto-item { - position: relative; - padding: 2rem; - background: var(--card-bg); - border: 1px solid rgba(255, 255, 255, 0.03); - border-radius: 2px; - transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), - background 0.3s ease, - border-color 0.3s ease; - transform-style: preserve-3d; -} - -.manifesto-item:hover { - transform: translateY(-5px) scale(1.02); - background: var(--hover); -} - -.manifesto-item h2 { - font-size: 2rem; - margin-bottom: 1.5rem; -} - -.manifesto-item p { - font-size: 1.1rem; - line-height: 1.7; - opacity: 0.9; - letter-spacing: -0.01em; -} - -.principles { - margin-top: 8rem; - padding: 3rem; - background: var(--card-bg); - border: 1px solid rgba(255, 255, 255, 0.03); - border-radius: 2px; -} - -.principles h2 { - margin-bottom: 3rem; -} - -@media (max-width: 768px) { - .manifesto-grid { - grid-template-columns: 1fr; - gap: 2rem; - } - - .manifesto-item { - padding: 1.5rem; - } - - .manifesto-item h2 { - font-size: 1.75rem; - } - - .principles { - padding: 1.5rem; - margin-top: 4rem; - } -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@media (max-width: 768px) { - #app { - padding: 2rem 1rem; - } - - h1 { - font-size: 3.5rem; - } - - .tagline { - font-size: 1.3rem; - } - - .cta-container { - flex-direction: column; - align-items: flex-start; - gap: 1.5rem; - } -} - -.platforms-track { - animation: scroll 40s linear infinite; - filter: blur(0); - transition: filter 0.3s ease; -} - -.platforms-track:hover { - animation-play-state: paused; - filter: blur(0); -} - -.platform-name { - transition: transform 0.3s ease, - opacity 0.3s ease, - color 0.3s ease; -} - -.platform-name:hover { - transform: scale(1.1); - opacity: 1; - color: var(--glow); -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.section { - animation: fadeIn 0.8s ease-out forwards; - animation-play-state: paused; -} - -.section.visible { - animation-play-state: running; -} - -/* Loading State Styles */ -.loading-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #000000; - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; -} - -.loading-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 2rem; -} - -.loading-logo { - color: #7A9E9F; - width: 50px; - height: 50px; -} - -.loading-dots { - display: flex; - gap: 0.5rem; -} - -.dot { - width: 8px; - height: 8px; - background-color: #7A9E9F; - border-radius: 50%; - display: inline-block; -} - -/* Enhanced Homepage Styles */ -.gradient-text { - background: linear-gradient(135deg, #7A9E9F 0%, #506C7F 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.hero-section { - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - padding: 2rem; -} - -.solutions-grid { - padding: 4rem 2rem; -} - -.vision-section { - padding: 6rem 2rem; - background: linear-gradient(to bottom, transparent, rgba(122, 158, 159, 0.1)); -} - -.tech-stack { - display: flex; - gap: 2rem; - flex-wrap: wrap; - justify-content: center; - margin-top: 2rem; -} - -body { - margin: 0; - background: #000000; - color: white; - font-family: system-ui, -apple-system, sans-serif; - overflow-x: hidden; -} - -#root { - min-height: 100vh; } \ No newline at end of file