|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark" style="scroll-behavior: smooth;"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Aperture - Predictive Intelligence through AI Agent Swarms</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/TextPlugin.min.js"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@300;400&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> |
|
|
<style> |
|
|
|
|
|
html { |
|
|
background-color: #0a0a15; |
|
|
background-image: |
|
|
radial-gradient(at 20% 80%, hsla(230, 80%, 60%, 0.15) 0px, transparent 50%), |
|
|
radial-gradient(at 80% 20%, hsla(300, 80%, 60%, 0.15) 0px, transparent 50%), |
|
|
linear-gradient(to bottom, #0a0a15 0%, #1a1030 100%); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
body::before { |
|
|
content: ''; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: |
|
|
radial-gradient(ellipse at top, rgba(100, 100, 255, 0.1) 0%, transparent 70%), |
|
|
radial-gradient(ellipse at bottom, rgba(255, 100, 255, 0.1) 0%, transparent 70%); |
|
|
z-index: -1; |
|
|
animation: cosmicPulse 20s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes cosmicPulse { |
|
|
0% { opacity: 0.3; } |
|
|
50% { opacity: 0.7; } |
|
|
100% { opacity: 0.3; } |
|
|
} |
|
|
|
|
|
.material-symbols-outlined { |
|
|
font-variation-settings: |
|
|
'FILL' 0, |
|
|
'wght' 300, |
|
|
'GRAD' 0, |
|
|
'opsz' 24 |
|
|
} |
|
|
|
|
|
|
|
|
html::-webkit-scrollbar { |
|
|
width: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
html::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
|
|
|
} |
|
|
|
|
|
html::-webkit-scrollbar-thumb { |
|
|
background-color: transparent; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
border: 2px solid transparent; |
|
|
|
|
|
transition: background-color 0.3s ease, border-color 0.3s ease; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
html:hover::-webkit-scrollbar-thumb { |
|
|
background-color: rgba(150, 150, 150, 0.2); |
|
|
border-color: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
html:hover::-webkit-scrollbar-thumb:hover { |
|
|
background-color: rgba(180, 180, 180, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
html { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: transparent transparent; |
|
|
|
|
|
transition: scrollbar-color 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
html:hover { |
|
|
|
|
|
scrollbar-color: rgba(150, 150, 150, 0.2) transparent; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.custom-scrollbar-x::-webkit-scrollbar { |
|
|
height: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
.custom-scrollbar-x::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.custom-scrollbar-x::-webkit-scrollbar-thumb { |
|
|
background-color: transparent; |
|
|
border-radius: 10px; |
|
|
border: 2px solid transparent; |
|
|
transition: background-color 0.3s ease, border-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.custom-scrollbar-x:hover::-webkit-scrollbar-thumb { |
|
|
background-color: rgba(150, 150, 150, 0.2); |
|
|
border-color: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.custom-scrollbar-x:hover::-webkit-scrollbar-thumb:hover { |
|
|
background-color: rgba(180, 180, 180, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.custom-scrollbar-x { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: transparent transparent; |
|
|
transition: scrollbar-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.custom-scrollbar-x:hover { |
|
|
|
|
|
scrollbar-color: rgba(150, 150, 150, 0.2) transparent; |
|
|
} |
|
|
|
|
|
|
|
|
.capabilities-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
max-width: 900px; |
|
|
|
|
|
height: 720px; |
|
|
|
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
margin-top: 40px; |
|
|
|
|
|
} |
|
|
|
|
|
.aperture-core { |
|
|
position: absolute; |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
border-radius: 50%; |
|
|
|
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
|
|
|
opacity: 0; |
|
|
transform: scale(0.5); |
|
|
} |
|
|
|
|
|
.animation-box { |
|
|
|
|
|
|
|
|
position: absolute; |
|
|
width: 260px; |
|
|
|
|
|
height: 340px; |
|
|
|
|
|
|
|
|
top: 50%; |
|
|
left: 50%; |
|
|
opacity: 0; |
|
|
transform: translate(-50%, -50%) scale(0.5); |
|
|
|
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.glass-card { |
|
|
position: relative; |
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.03) 100%); |
|
|
backdrop-filter: blur(12px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.15); |
|
|
box-shadow: |
|
|
0 0 15px rgba(100, 100, 255, 0.1), |
|
|
0 0 30px rgba(0, 0, 0, 0.3); |
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; |
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
.glass-card::before, |
|
|
.glass-card::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
|
|
|
|
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); |
|
|
opacity: 0; |
|
|
|
|
|
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.glass-card::before { |
|
|
top: 0; |
|
|
transform: translateY(-100%); |
|
|
|
|
|
} |
|
|
|
|
|
.glass-card::after { |
|
|
bottom: 0; |
|
|
transform: translateY(100%); |
|
|
|
|
|
} |
|
|
.glass-card:hover { |
|
|
transform: translateY(-5px) scale(1.02); |
|
|
border-color: rgba(100, 200, 255, 0.4); |
|
|
box-shadow: |
|
|
0 5px 20px rgba(100, 100, 255, 0.2), |
|
|
0 10px 40px rgba(0, 0, 0, 0.4); |
|
|
background: linear-gradient(135deg, rgba(100, 200, 255, 0.08) 0%, rgba(255, 100, 255, 0.05) 100%); |
|
|
} |
|
|
.glass-card:hover::before, |
|
|
.glass-card:hover::after { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
background: linear-gradient(90deg, |
|
|
rgba(255,255,255,0) 0%, |
|
|
rgba(100,200,255,0.8) 50%, |
|
|
rgba(255,100,255,0.8) 100%); |
|
|
} |
|
|
|
|
|
.grid-fade-bg { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.grid-fade-bg::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
|
|
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), |
|
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); |
|
|
background-size: 40px 40px; |
|
|
|
|
|
mask-image: radial-gradient(ellipse at center, white 40%, transparent 90%); |
|
|
-webkit-mask-image: radial-gradient(ellipse at center, white 40%, transparent 90%); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
header::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
|
|
|
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), |
|
|
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); |
|
|
background-size: 50px 50px; |
|
|
|
|
|
mask-image: radial-gradient(ellipse at center, white 30%, transparent 80%); |
|
|
-webkit-mask-image: radial-gradient(ellipse at center, white 30%, transparent 80%); |
|
|
z-index: -1; |
|
|
|
|
|
animation: pan-grid 20s infinite linear; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pan-grid { |
|
|
0% { |
|
|
background-position: 0px 0px; |
|
|
} |
|
|
100% { |
|
|
|
|
|
background-position: 200px 200px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
transform: scaleX(0); |
|
|
height: 1px; |
|
|
|
|
|
bottom: -4px; |
|
|
|
|
|
left: 0; |
|
|
background-color: #ffffff; |
|
|
|
|
|
transform-origin: bottom left; |
|
|
|
|
|
transition: transform 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
transform: scaleX(1); |
|
|
transform-origin: bottom left; |
|
|
} |
|
|
|
|
|
|
|
|
.btn-swipe-fill { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
z-index: 1; |
|
|
border: 1px solid rgba(100, 200, 255, 0.3); |
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
} |
|
|
|
|
|
.btn-swipe-fill::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, |
|
|
transparent 0%, |
|
|
rgba(100, 200, 255, 0.3) 50%, |
|
|
rgba(255, 100, 255, 0.3) 100%); |
|
|
transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.btn-swipe-fill:hover { |
|
|
box-shadow: 0 0 20px rgba(100, 200, 255, 0.3); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.btn-swipe-fill:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
.neon-text { |
|
|
text-shadow: |
|
|
0 0 5px rgba(100, 200, 255, 0.5), |
|
|
0 0 10px rgba(100, 200, 255, 0.3), |
|
|
0 0 15px rgba(100, 200, 255, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
</style> |
|
|
<script> |
|
|
|
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
|
|
|
sans: ['"Space Grotesk"', 'sans-serif'], |
|
|
mono: ['"Space Mono"', 'monospace'], |
|
|
}, |
|
|
animation: { |
|
|
flare: 'flare 3s ease-in-out infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
flare: { |
|
|
'0%, 100%': { |
|
|
|
|
|
filter: 'drop-shadow(0 0 10px rgba(59, 130, 246, 0.7))' |
|
|
}, |
|
|
'50%': { |
|
|
|
|
|
filter: 'drop-shadow(0 0 18px rgba(96, 165, 250, 1))' |
|
|
}, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
|
|
|
<body class="text-gray-200 font-sans antialiased"> |
|
|
|
|
|
<header class="fixed top-0 left-0 right-0 z-50 p-4 transition-all duration-300"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<nav class="glass-card rounded-2xl px-6 py-3 flex justify-between items-center"> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3"> |
|
|
<img src="icon.svg" alt="Aperture Icon" class="w-8 h-8 filter brightness-0 invert" /> |
|
|
<span class="font-sans font-semibold text-xl text-white">Aperture</span> |
|
|
</a> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8 font-mono"> |
|
|
<a href="#research-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Research</a> |
|
|
<a href="#data-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Data</a> |
|
|
<a href="#core-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Core</a> |
|
|
<a href="#cta-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Insights</a> |
|
|
</div> |
|
|
|
|
|
<a href="#" class="btn-swipe-fill relative overflow-hidden hidden md:block bg-white/10 text-white font-mono font-medium text-sm px-5 py-2 rounded-full hover:text-[#050508] transition-all duration-400 ease-in-out"> |
|
|
Launch Terminal |
|
|
</a> |
|
|
|
|
|
<div class="md:hidden"> |
|
|
<span class="material-symbols-outlined text-gray-200 text-3xl">menu</span> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="container mx-auto max-w-6xl px-4 py-16 sm:py-24"> |
|
|
<header class="h-[90vh] w-3/4 mx-auto flex flex-col justify-center items-center text-center pb-36 relative"> |
|
|
<div class="relative"> |
|
|
<img src="icon.svg" alt="Aperture Icon" class="w-24 h-24 sm:w-36 sm:h-36 mb-6 animate-flare floating" /> |
|
|
<div class="absolute inset-0 rounded-full bg-blue-500/20 blur-xl -z-10"></div> |
|
|
</div> |
|
|
<h1 class="text-6xl sm:text-7xl font-extrabold text-white mb-4 neon-text"> |
|
|
Aperture |
|
|
</h1> |
|
|
<p class="text-xl sm:text-2xl text-gray-300 font-mono font-light bg-gradient-to-r from-blue-300 to-purple-300 bg-clip-text text-transparent"> |
|
|
"Next-Gen Economic AI Agents" |
|
|
</p> |
|
|
<div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a15] to-transparent"></div> |
|
|
</header> |
|
|
<section id="research-section" class="mb-24 md:flex md:flex-row md:items-stretch md:gap-12 relative"> |
|
|
<div class="absolute -top-20 -left-20 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl -z-10"></div> |
|
|
<div class="absolute -bottom-20 -right-20 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl -z-10"></div> |
|
|
<div class="md:w-1/2 md:flex md:flex-col section-intro"> |
|
|
<div class="md:flex-1 md:flex md:items-end md:justify-center pb-3"> |
|
|
<h2 class="text-4xl font-bold text-center text-white md:text-center">Macro & Micro Research<br>Customized For You</h2> |
|
|
</div> |
|
|
<div class="md:flex-1 md:flex md:items-start md:justify-center pt-3"> |
|
|
<p class="text-lg text-gray-400 text-center md:text-center mb-12 md:mb-0 font-mono font-light">Our agent swarms deliver predictive intelligence tailored to your specific areas of interest, from ahead-of-day briefs to long-term scenario branching.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 grid-fade-bg"> |
|
|
<div class="grid grid-cols-2 gap-6 mb-6"> |
|
|
<div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<span class="material-symbols-outlined text-5xl text-blue-300 mb-4">event_note</span> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Ahead-of-Day Plans</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm font-mono font-light">Get a full predictive brief before premarket opens.</p> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<span class="material-symbols-outlined text-5xl text-blue-300 mb-4">assessment</span> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Weekly / Monthly Scenarios</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm font-mono font-light">Forward insights into your personal tracked areas.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-3 gap-6"> |
|
|
<div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<span class="material-symbols-outlined text-5xl text-blue-300 mb-4">psychology</span> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Causal Reasoning</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm font-mono font-light">Predictions with clear, explainable causal links and forward analysis.</p> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<span class="material-symbols-outlined text-5xl text-blue-300 mb-4">account_tree</span> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Scenario Trees</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm font-mono font-light">Short, intermediate, & long term outlook with branching predictions.</p> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center"> |
|
|
<span class="material-symbols-outlined text-5xl text-blue-300 mb-4">radar</span> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Micro & Macro Signals</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm font-mono font-light">Realtime agent analysis of micro and macro signals as they happen.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="data-section" class="mb-24 md:flex md:flex-row md:items-stretch md:gap-12 relative"> |
|
|
<div class="absolute top-1/2 left-0 w-32 h-32 bg-blue-500/5 rounded-full blur-xl -z-10 animate-pulse"></div> |
|
|
<div class="absolute bottom-0 right-0 w-48 h-48 bg-purple-500/5 rounded-full blur-xl -z-10 animate-pulse delay-300"></div> |
|
|
<div class="md:w-1/2 md:order-last md:flex md:flex-col section-intro"> |
|
|
<div class="md:flex-1 md:flex md:items-end md:justify-center pb-3"> |
|
|
<h2 class="text-4xl font-bold text-center text-white md:text-center">Extensive Real-Time Data</h2> |
|
|
</div> |
|
|
<div class="md:flex-1 md:flex md:items-start md:justify-center pt-3"> |
|
|
<p class="text-lg text-gray-400 text-center md:text-center mb-12 md:mb-0 font-mono font-light">Aperture's agents continuously analyze a vast, real-time data ecosystem, synthesizing signals from financial markets, economic reports, and alternative sources.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 grid-fade-bg"> |
|
|
<div class="grid grid-cols-2 gap-6"> |
|
|
<div class="glass-card rounded-2xl p-6"> |
|
|
<div class="flex items-center gap-3 mb-4"> |
|
|
<span class="material-symbols-outlined text-3xl text-blue-300" title="US Bonds">account_balance</span> |
|
|
<span class="material-symbols-outlined text-3xl text-blue-300" title="US Stocks">trending_up</span> |
|
|
<span class="material-symbols-outlined text-3xl text-blue-300" title="Gold">paid</span> |
|
|
<span class="material-symbols-outlined text-3xl text-blue-300" title="Crypto">currency_bitcoin</span> |
|
|
</div> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">US Bonds, US Stocks, Gold, Crypto</h3> |
|
|
<ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light"> |
|
|
News, Prices, Events, Earnings, Filings |
|
|
</ul> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl p-6"> |
|
|
<div class="flex items-center gap-3 mb-4"> |
|
|
<span class="material-symbols-outlined text-3xl text-blue-300" title="FED">monitoring</span> |
|
|
<span class="material-symbols-outlined text-3xl text-blue-300" title="BLS">work</span> |
|
|
<span class="material-symbols-outlined text-3xl text-blue-300" title="BEA">bar_chart</span> |
|
|
</div> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Economy, Labor, Growth Signals</h3> |
|
|
<ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light"> |
|
|
FED, BEA, BLS, FRED, OECD |
|
|
</ul> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl p-6"> |
|
|
<span class="material-symbols-outlined text-4xl text-blue-300 mb-4">groups_3</span> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Institutional Positions & Orderflow</h3> |
|
|
<ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light"> |
|
|
Large Scale Positions, Real-Time Orderbook Tracking |
|
|
</ul> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl p-6"> |
|
|
<span class="material-symbols-outlined text-4xl text-blue-300 mb-4">gavel</span> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white mb-3">Congress, Insiders, Government</h3> |
|
|
<ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light"> |
|
|
Disclosed Trades, Contract Filings, Gov. Decisions |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="core-section" class="mb-24 md:flex md:flex-row md:items-stretch md:gap-12 relative"> |
|
|
<div class="absolute -top-10 left-1/4 w-40 h-40 bg-blue-500/10 rounded-full blur-2xl -z-10"></div> |
|
|
<div class="absolute bottom-10 right-1/4 w-40 h-40 bg-purple-500/10 rounded-full blur-2xl -z-10"></div> |
|
|
<div class="md:w-1/2 md:flex md:flex-col section-intro"> |
|
|
<div class="md:flex-1 md:flex md:items-end md:justify-center pb-3"> |
|
|
<h2 class="text-4xl font-bold text-center text-white md:text-center">Multi-Agent AI Core</h2> |
|
|
</div> |
|
|
<div class="md:flex-1 md:flex md:items-start md:justify-center pt-3"> |
|
|
<p class="text-lg text-gray-400 text-center md:text-center mb-12 md:mb-0 font-mono font-light">The core is a multi-agent system designed for deep research, persistent memory, and swarm consensus, enabling autonomous analysis and continuous learning.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 grid-fade-bg"> |
|
|
<div class="grid grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="glass-card rounded-2xl p-5 flex flex-col h-full"> |
|
|
<div id="anim-improve" class="rounded-lg mb-4 w-full h-40 relative"></div> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white">Record and Search<br>Persistent Memories</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Agents build a persistent knowledge base from observations and research.</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-2xl p-5 flex flex-col h-full"> |
|
|
<div id="anim-connect" class="rounded-lg mb-4 w-full h-40 relative"></div> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white">Deep Research<br>with Agent Threads</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Delegate parallel tasks to specialized agents for comprehensive analysis.</p> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-2xl p-5 flex flex-col h-full"> |
|
|
<div id="anim-harmonize" class="rounded-lg mb-4 w-full h-40 relative"></div> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white">Swarm Consesus<br>for Critical Decisions</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Agents challenge, refine, and merge hypotheses to reach consensus.</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="glass-card rounded-2xl p-5 flex flex-col h-full"> |
|
|
<div id="anim-understand" class="rounded-lg mb-4 w-full h-40 relative"></div> |
|
|
<h3 class="text-base md:text-xl font-semibold text-white">Auto Improve from<br>Reasoning Traces</h3> |
|
|
<p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Continuously learn from historical outcomes and future projections.</p> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<section class="text-center mb-24 relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center -z-10"> |
|
|
<div class="w-64 h-64 bg-blue-500/5 rounded-full blur-3xl"></div> |
|
|
</div> |
|
|
<p class="text-lg text-gray-300 mb-3 font-mono font-light">Delivered via our:</p> |
|
|
<h2 class="text-3xl font-bold text-white"> |
|
|
AI <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-purple-300">Terminal</span> |
|
|
• |
|
|
Rest <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-blue-300">API</span> |
|
|
• |
|
|
Telegram <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-purple-300">Agent</span> |
|
|
</h2> |
|
|
</section> |
|
|
<section class="mb-24 relative"> |
|
|
<div class="glass-card rounded-2xl shadow-lg shadow-blue-500/10 overflow-hidden p-3"> |
|
|
<div class="bg-gradient-to-br from-gray-900/80 to-blue-900/20 rounded-lg w-full h-[400px] md:h-[600px] flex items-center justify-center border border-dashed border-blue-500/30 relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="w-full h-full bg-gradient-to-r from-blue-500/5 to-purple-500/5 animate-pulse"></div> |
|
|
</div> |
|
|
<p class="text-gray-300 text-2xl z-10">[ Interactive Prototype Embed ]</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-10 -left-10 w-40 h-40 bg-blue-500/10 rounded-full blur-xl -z-10"></div> |
|
|
</section> |
|
|
<section class="mb-24 relative"> |
|
|
<div class="absolute -top-20 right-0 w-40 h-40 bg-purple-500/10 rounded-full blur-xl -z-10"></div> |
|
|
<h2 class="text-4xl font-bold text-center text-white mb-12">Our Latest Research Insights</h2> |
|
|
<div class="flex overflow-x-auto gap-6 pb-4 custom-scrollbar-x"> |
|
|
<div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden"> |
|
|
<div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10"> |
|
|
<span class="material-symbols-outlined text-gray-500 text-4xl">insights</span> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">Projecting Market Shifts with Swarm Debates</h3> |
|
|
<p class="text-gray-400 text-sm font-mono font-light">How our agents argue to find the most probable outcome.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden"> |
|
|
<div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10"> |
|
|
<span class="material-symbols-outlined text-gray-500 text-4xl">analytics</span> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">Causal Reasoning in Economic Data</h3> |
|
|
<p class="text-gray-400 text-sm font-mono font-light">Moving beyond correlation to understand true market drivers.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden"> |
|
|
<div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10"> |
|
|
<span class="material-symbols-outlined text-gray-500 text-4xl">memory_alt</span> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">The 'Aperture' Memory Core</h3> |
|
|
<p class="text-gray-400 text-sm font-mono font-light">Building persistent, searchable knowledge for AI agents.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden"> |
|
|
<div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10"> |
|
|
<span class="material-symbols-outlined text-gray-500 text-4xl">auto_fix</span> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">Real-time Anomaly Detection</h3> |
|
|
<p class="text-gray-400 text-sm font-mono font-light">Spotting the signals that human analysts miss.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="cta-section" class="text-center mt-24 pt-16 border-t border-white/10 relative overflow-hidden"> |
|
|
<div class="absolute -top-32 left-1/2 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -z-10"></div> |
|
|
<div class="absolute bottom-0 right-0 w-64 h-64 bg-purple-500/10 rounded-full blur-2xl -z-10"></div> |
|
|
<h2 class="text-3xl font-bold text-white mb-10">Let's Get Started</h2> |
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-12"> |
|
|
<a href="#waitlist-modal" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold px-8 py-3 rounded-full text-lg shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transition-all duration-300 ease-in-out transform hover:scale-105 hover:brightness-110"> |
|
|
Join the Waitlist |
|
|
</a> |
|
|
<a href="#" class="bg-white/10 text-white font-semibold px-8 py-3 rounded-full text-lg border border-white/20 hover:bg-gradient-to-r hover:from-blue-500/20 hover:to-purple-500/20 transition-all duration-300 ease-in-out transform hover:scale-105"> |
|
|
Launch The Terminal |
|
|
</a> |
|
|
</div> |
|
|
<div class="flex items-center justify-center gap-8"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors" title="LinkedIn"> |
|
|
<svg class="w-7 h-7 fill-current" viewBox="0 0 24 24" aria-hidden="true"> |
|
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" /> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors" title="X (Twitter)"> |
|
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 1200 1227" aria-hidden="true"> |
|
|
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.163 519.284ZM569.165 687.828L521.69 619.924L114.011 78.6338H302.978L604.111 513.62L651.581 581.524L1098.05 1157.94H909.088L569.165 687.828Z" /> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors" title="GitHub"> |
|
|
<svg class="w-7 h-7 fill-current" viewBox="0 0 24 24" aria-hidden="true"> |
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.108-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<div id="waitlist-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md flex items-center justify-center p-4 opacity-0 pointer-events-none target:opacity-100 target:pointer-events-auto transition-opacity duration-300 z-50"> |
|
|
<div class="relative bg-gray-900 border border-white/20 rounded-2xl p-8 shadow-2xl shadow-black/50 w-full max-w-md"> |
|
|
<a href="#" class="absolute top-4 right-4 text-gray-500 hover:text-white transition-colors"> |
|
|
<span class="material-symbols-outlined text-3xl">close</span> |
|
|
</a> |
|
|
<h3 class="text-2xl font-semibold text-white mb-6">Join the Waitlist</h3> |
|
|
<form action="#" method="POST" class="space-y-4"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label> |
|
|
<input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> |
|
|
<input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="website" class="block text-sm font-medium text-gray-300 mb-1">Website (Optional)</label> |
|
|
<input type="url" id="website" name="website" placeholder="https://your-company.com" class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="linkedin" class="block text-sm font-medium text-gray-300 mb-1">LinkedIn (Optional)</label> |
|
|
<input type="url" id="linkedin" name="linkedin" placeholder="https://linkedin.com/in/your-profile" class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg text-lg hover:bg-blue-500 transition-all duration-300 !mt-6">Submit</button> |
|
|
</form> |
|
|
</div> |
|
|
<a href="#" class="fixed inset-0 z-[-1]" aria-label="Close modal"></a> |
|
|
</div> |
|
|
<footer class="border-t border-white/10 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-blue-900/5 -z-10"></div> |
|
|
<div class="container mx-auto max-w-6xl px-4 py-8"> |
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4"> |
|
|
<p class="text-sm text-gray-400 font-mono font-light">© 2025 Aperture. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener("DOMContentLoaded", function() { |
|
|
|
|
|
gsap.registerPlugin(ScrollTrigger); |
|
|
|
|
|
|
|
|
const MONOCHROME_FILL = (opacity) => `rgba(255, 255, 255, ${Math.max(0, Math.min(1, opacity))})`; |
|
|
|
|
|
|
|
|
function setupCapabilitiesAnimation() { |
|
|
const container = document.querySelector('.capabilities-container'); |
|
|
if (!container) return; |
|
|
const core = document.querySelector('.aperture-core'); |
|
|
|
|
|
|
|
|
const capabilities = gsap.utils.toArray('.animation-box'); |
|
|
|
|
|
if (!capabilities.length) return; |
|
|
|
|
|
const tl = gsap.timeline({ |
|
|
scrollTrigger: { |
|
|
trigger: container, |
|
|
start: "top center", |
|
|
toggleActions: "play none none none", |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
tl.to(core, { |
|
|
opacity: 1, |
|
|
scale: 1, |
|
|
duration: 0.8, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const positions = { |
|
|
cap1: { |
|
|
x: -150, |
|
|
y: -190 |
|
|
}, |
|
|
cap2: { |
|
|
x: 150, |
|
|
y: -190 |
|
|
}, |
|
|
cap3: { |
|
|
x: -150, |
|
|
y: 190 |
|
|
}, |
|
|
cap4: { |
|
|
x: 150, |
|
|
y: 190 |
|
|
} |
|
|
}; |
|
|
|
|
|
tl.to(capabilities, { |
|
|
opacity: 1, |
|
|
scale: 1, |
|
|
duration: 1.2, |
|
|
ease: "back.out(1.7)", |
|
|
stagger: 0.2, |
|
|
|
|
|
x: (i) => positions[`cap${i+1}`].x, |
|
|
y: (i) => positions[`cap${i+1}`].y, |
|
|
}, "-=0.5"); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function createCanvasInContainer(containerId, width = 180, height = 180) { |
|
|
const container = document.getElementById(containerId); |
|
|
if (!container) return null; |
|
|
container.innerHTML = ""; |
|
|
const canvas = document.createElement("canvas"); |
|
|
canvas.width = width; |
|
|
canvas.height = height; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
canvas.style.position = "absolute"; |
|
|
canvas.style.top = "50%"; |
|
|
canvas.style.left = "50%"; |
|
|
canvas.style.transform = "translate(-50%, -50%)"; |
|
|
|
|
|
|
|
|
container.appendChild(canvas); |
|
|
return canvas.getContext("2d"); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function setupPulsatingCirclesAnimation() { |
|
|
const ctx = createCanvasInContainer("anim-understand"); |
|
|
if (!ctx) return; |
|
|
const centerX = 90, |
|
|
centerY = 90; |
|
|
let time = 0; |
|
|
let lastTime = 0; |
|
|
const rings = []; |
|
|
for (let r = 0; r < 4; r++) { |
|
|
const radius = 15 + r * 15; |
|
|
const count = 6 + r * 3; |
|
|
for (let i = 0; i < count; i++) { |
|
|
rings.push({ |
|
|
radius, |
|
|
count, |
|
|
index: i, |
|
|
ringIndex: r, |
|
|
sz: 3 + r * 0.3, |
|
|
opacity: (90 - r * 10) / 100, |
|
|
delay: r * 0.2 + i * 0.1 |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
function animate(timestamp) { |
|
|
if (!lastTime) lastTime = timestamp; |
|
|
time += (timestamp - lastTime) * 0.001; |
|
|
lastTime = timestamp; |
|
|
ctx.clearRect(0, 0, 180, 180); |
|
|
const pulseTime = (time % 3) / 3; |
|
|
let opacity = 0, |
|
|
scale = 0.2; |
|
|
if (pulseTime < 0.4) { |
|
|
opacity = pulseTime / 0.4; |
|
|
scale = 0.2 + (pulseTime / 0.4) * 0.8; |
|
|
} else if (pulseTime < 0.6) { |
|
|
opacity = 1; |
|
|
scale = 1; |
|
|
} else { |
|
|
opacity = 1 - ((pulseTime - 0.6) / 0.4); |
|
|
scale = 1 - ((pulseTime - 0.6) / 0.4) * 0.8; |
|
|
} |
|
|
ctx.beginPath(); |
|
|
ctx.arc(centerX, centerY, 4 * scale, 0, Math.PI * 2); |
|
|
ctx.fillStyle = MONOCHROME_FILL(opacity); |
|
|
ctx.fill(); |
|
|
rings.forEach(dot => { |
|
|
const angle = (dot.index / dot.count) * 2 * Math.PI; |
|
|
const x = centerX + Math.cos(angle) * dot.radius; |
|
|
const y = centerY + Math.sin(angle) * dot.radius; |
|
|
const localTime = ((time + dot.delay) % 3) / 3; |
|
|
let localOpacity = 0, |
|
|
localScale = 0.2; |
|
|
if (localTime < 0.4) { |
|
|
localOpacity = localTime / 0.4; |
|
|
localScale = 0.2 + (localTime / 0.4) * 0.8; |
|
|
} else if (localTime < 0.6) { |
|
|
localOpacity = 1; |
|
|
localScale = 1; |
|
|
} else { |
|
|
localOpacity = 1 - ((localTime - 0.6) / 0.4); |
|
|
localScale = 1 - ((localTime - 0.6) / 0.4) * 0.8; |
|
|
} |
|
|
ctx.beginPath(); |
|
|
ctx.arc(x, y, dot.sz * localScale, 0, Math.PI * 2); |
|
|
ctx.fillStyle = MONOCHROME_FILL(localOpacity * dot.opacity); |
|
|
ctx.fill(); |
|
|
}); |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
|
|
|
function setupConnectAnimation() { |
|
|
const ctx = createCanvasInContainer("anim-connect"); |
|
|
if (!ctx) return; |
|
|
const centerX = 90, |
|
|
centerY = 90; |
|
|
let time = 0; |
|
|
let lastTime = 0; |
|
|
const dotCount = 20, |
|
|
rowCount = 5, |
|
|
spacing = 15; |
|
|
|
|
|
function animate(timestamp) { |
|
|
if (!lastTime) lastTime = timestamp; |
|
|
time += (timestamp - lastTime) * 0.001; |
|
|
lastTime = timestamp; |
|
|
ctx.clearRect(0, 0, 180, 180); |
|
|
for (let row = 0; row < rowCount; row++) { |
|
|
const y = centerY - ((rowCount - 1) / 2) * spacing + row * spacing; |
|
|
for (let i = 0; i < dotCount; i++) { |
|
|
const baseX = centerX - ((dotCount - 1) / 2) * 8 + i * 8; |
|
|
const amplitude = 4 + row * 2; |
|
|
const frequency = 1 + row * 0.2; |
|
|
const phaseOffset = row * 0.5; |
|
|
const offset = Math.sin(time * frequency + i * 0.2 + phaseOffset) * amplitude; |
|
|
const finalY = y + offset; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(baseX, finalY, 2, 0, Math.PI * 2); |
|
|
ctx.fillStyle = MONOCHROME_FILL(0.9); |
|
|
ctx.fill(); |
|
|
} |
|
|
} |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
|
|
|
|
|
|
function setupHarmonizeAnimation() { |
|
|
const ctx = createCanvasInContainer("anim-harmonize"); |
|
|
if (!ctx) return; |
|
|
const centerX = 90, |
|
|
centerY = 90; |
|
|
let time = 0; |
|
|
let lastTime = 0; |
|
|
const pendulumCount = 15, |
|
|
baseFrequency = 0.5, |
|
|
pendulumLength = 70, |
|
|
maxAngle = Math.PI / 12; |
|
|
|
|
|
function animate(timestamp) { |
|
|
if (!lastTime) lastTime = timestamp; |
|
|
time += (timestamp - lastTime) * 0.001; |
|
|
lastTime = timestamp; |
|
|
ctx.clearRect(0, 0, 180, 180); |
|
|
const angle = Math.sin(time * baseFrequency * Math.PI) * maxAngle; |
|
|
for (let i = 0; i < pendulumCount; i++) { |
|
|
const pendulumX = centerX - pendulumCount * 4 + i * 8; |
|
|
const pendulumY = centerY - pendulumLength + 20; |
|
|
const bobX = pendulumX + Math.sin(angle) * pendulumLength; |
|
|
const bobY = pendulumY + Math.cos(angle) * pendulumLength; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(pendulumX, pendulumY); |
|
|
ctx.lineTo(bobX, bobY); |
|
|
ctx.strokeStyle = MONOCHROME_FILL(0.4); |
|
|
ctx.lineWidth = 1; |
|
|
ctx.stroke(); |
|
|
ctx.beginPath(); |
|
|
ctx.arc(bobX, bobY, 3, 0, Math.PI * 2); |
|
|
ctx.fillStyle = MONOCHROME_FILL(0.9); |
|
|
ctx.fill(); |
|
|
} |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function setupImproveAnimation() { |
|
|
const ctx = createCanvasInContainer("anim-improve"); |
|
|
if (!ctx) return; |
|
|
const centerX = 90, |
|
|
centerY = 90; |
|
|
let time = 0; |
|
|
let lastTime = 0; |
|
|
const gridSize = 5, |
|
|
spacing = 25; |
|
|
|
|
|
function animate(timestamp) { |
|
|
if (!lastTime) lastTime = timestamp; |
|
|
time += (timestamp - lastTime) * 0.001; |
|
|
lastTime = timestamp; |
|
|
ctx.clearRect(0, 0, 180, 180); |
|
|
const breathingFactor = Math.sin(time * 0.5) * 0.2 + 1.0; |
|
|
for (let row = 0; row < gridSize; row++) { |
|
|
for (let col = 0; col < gridSize; col++) { |
|
|
if (row === Math.floor(gridSize / 2) && col === Math.floor(gridSize / 2)) continue; |
|
|
const baseX = (col - (gridSize - 1) / 2) * spacing; |
|
|
const baseY = (row - (gridSize - 1) / 2) * spacing; |
|
|
const distance = Math.sqrt(baseX * baseX + baseY * baseY); |
|
|
const maxDistance = (spacing * Math.sqrt(2) * (gridSize - 1)) / 2; |
|
|
const normalizedDistance = distance / maxDistance; |
|
|
const breathingX = baseX * breathingFactor; |
|
|
const breathingY = baseY * breathingFactor; |
|
|
const waveX = centerX + breathingX; |
|
|
const waveY = centerY + breathingY; |
|
|
const baseSize = 1.5 + (1 - normalizedDistance) * 1.5; |
|
|
const pulseFactor = Math.sin(time * 2 + normalizedDistance * 5) * 0.6 + 1; |
|
|
const size = baseSize * pulseFactor; |
|
|
const opacity = 0.5 + Math.sin(time * 1.5 + distance * 0.1) * 0.2 + normalizedDistance * 0.3; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(waveX, waveY, size, 0, Math.PI * 2); |
|
|
ctx.fillStyle = MONOCHROME_FILL(opacity); |
|
|
ctx.fill(); |
|
|
} |
|
|
} |
|
|
ctx.beginPath(); |
|
|
ctx.arc(centerX, centerY, 3, 0, Math.PI * 2); |
|
|
ctx.fillStyle = MONOCHROME_FILL(0.9); |
|
|
ctx.fill(); |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
|
|
|
|
|
|
function setupSectionAnimations() { |
|
|
const sections = [ |
|
|
document.querySelector("#research-section"), |
|
|
document.querySelector("#data-section"), |
|
|
document.querySelector("#core-section") |
|
|
]; |
|
|
|
|
|
sections.forEach(section => { |
|
|
if (!section) return; |
|
|
|
|
|
const titleDesc = section.querySelector(".section-intro"); |
|
|
const cards = gsap.utils.toArray(section.querySelectorAll(".glass-card")); |
|
|
|
|
|
if (!titleDesc || !cards.length) return; |
|
|
|
|
|
gsap.set(titleDesc, { |
|
|
opacity: 0, |
|
|
y: 30 |
|
|
}); |
|
|
gsap.set(cards, { |
|
|
opacity: 0 |
|
|
}); |
|
|
|
|
|
const tl = gsap.timeline({ |
|
|
scrollTrigger: { |
|
|
trigger: section, |
|
|
start: "top 60%", |
|
|
toggleActions: "play none none none" |
|
|
} |
|
|
}); |
|
|
|
|
|
tl.to(titleDesc, { |
|
|
opacity: 1, |
|
|
y: 0, |
|
|
duration: 0.8, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
|
|
|
|
|
|
tl.to(cards, { |
|
|
opacity: 1, |
|
|
duration: 2.5, |
|
|
ease: "linear", |
|
|
stagger: 0.3 |
|
|
}, ">"); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function setupCtaAnimation() { |
|
|
const section = document.querySelector("#cta-section"); |
|
|
if (!section) return; |
|
|
|
|
|
const title = section.querySelector("h2"); |
|
|
const buttonGroup = section.querySelector(".flex-col.sm\\:flex-row"); |
|
|
const socialIcons = section.querySelector(".flex.items-center.justify-center.gap-8"); |
|
|
|
|
|
if (!title || !buttonGroup || !socialIcons) return; |
|
|
|
|
|
|
|
|
gsap.set([title, buttonGroup, socialIcons], { |
|
|
opacity: 0, |
|
|
y: 20 |
|
|
}); |
|
|
|
|
|
const tl = gsap.timeline({ |
|
|
scrollTrigger: { |
|
|
trigger: section, |
|
|
start: "top 80%", |
|
|
toggleActions: "play none none none" |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
tl.to(title, { |
|
|
opacity: 1, |
|
|
y: 0, |
|
|
duration: 1.2, |
|
|
ease: "linear" |
|
|
}); |
|
|
|
|
|
|
|
|
tl.to(buttonGroup, { |
|
|
opacity: 1, |
|
|
|
|
|
duration: 1.5, |
|
|
ease: "linear", |
|
|
}, "-=0.5"); |
|
|
|
|
|
|
|
|
tl.to(socialIcons, { |
|
|
opacity: 1, |
|
|
|
|
|
duration: 1.2, |
|
|
ease: "linear", |
|
|
}, "-=1.2"); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setupCapabilitiesAnimation(); |
|
|
setupPulsatingCirclesAnimation(); |
|
|
setupConnectAnimation(); |
|
|
setupHarmonizeAnimation(); |
|
|
setupImproveAnimation(); |
|
|
setupSectionAnimations(); |
|
|
setupCtaAnimation(); |
|
|
|
|
|
}); |
|
|
</script> |
|
|
<script></script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
|
|
|
</html> |
