feat: add Aether (light ethereal) and Synapse (bio-neural) AI landing pages
This commit is contained in:
Emil Shanaty
@@ -0,0 +1,656 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Aether — AI that illuminates rather than replaces. Clarity as a form of consciousness.">
|
||||
<title>Aether</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-base: #f8f9fa;
|
||||
--bg-mid: #eceff4;
|
||||
--bg-soft: #e8ecf0;
|
||||
--gold: #c9a96e;
|
||||
--gold-light: #d4a574;
|
||||
--gold-pale: #ede0ce;
|
||||
--text-primary: #1a1814;
|
||||
--text-secondary:#4a4540;
|
||||
--text-tertiary: #8a8078;
|
||||
--border: #ddd8d0;
|
||||
--max-w: 720px;
|
||||
--max-w-wide: 960px;
|
||||
--serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
|
||||
--sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--sans);
|
||||
background: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
main { position: relative; z-index: 1; }
|
||||
|
||||
.section { padding: clamp(64px, 10vw, 120px) clamp(24px, 6vw, 48px); }
|
||||
.container { max-width: var(--max-w); margin: 0 auto; }
|
||||
.container--wide { max-width: var(--max-w-wide); margin: 0 auto; }
|
||||
|
||||
/* Hero */
|
||||
#hero {
|
||||
min-height: 100svh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
padding: clamp(80px, 12vw, 140px) clamp(24px, 6vw, 48px);
|
||||
background: radial-gradient(ellipse 80% 60% at 50% 40%, #ede8e0 0%, #eceff4 40%, #f8f9fa 100%);
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
max-width: var(--max-w);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(72px, 14vw, 128px);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 0.95;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.hero-title::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: var(--gold);
|
||||
margin: 32px auto 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(18px, 3vw, 24px);
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
max-width: 560px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.cta-primary {
|
||||
display: inline-block;
|
||||
font-family: var(--sans);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--gold);
|
||||
padding: 16px 40px;
|
||||
min-height: 52px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.cta-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--gold);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s var(--ease);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.cta-primary:hover { color: #fff; }
|
||||
.cta-primary:hover::before { transform: translateY(0); }
|
||||
.cta-primary:focus-visible {
|
||||
outline: 2px solid var(--gold);
|
||||
outline-offset: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
.cta-primary:focus-visible::before { transform: translateY(0); }
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
|
||||
}
|
||||
|
||||
/* Section label */
|
||||
.section-label {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section-label::after {
|
||||
content: '';
|
||||
display: block;
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
max-width: 48px;
|
||||
}
|
||||
|
||||
/* What It Is */
|
||||
#what { background: var(--bg-mid); }
|
||||
|
||||
.editorial-text { display: flex; flex-direction: column; gap: 28px; }
|
||||
|
||||
.editorial-text p {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(17px, 2.2vw, 20px);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.editorial-text p:first-child {
|
||||
color: var(--text-primary);
|
||||
font-size: clamp(19px, 2.6vw, 23px);
|
||||
}
|
||||
|
||||
/* Capabilities */
|
||||
#capabilities { background: var(--bg-base); }
|
||||
|
||||
.capabilities-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.capability-item {
|
||||
padding: 40px 40px 40px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
display: grid;
|
||||
grid-template-columns: 32px 1fr;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
transition: background 0.3s var(--ease);
|
||||
}
|
||||
|
||||
.capability-item:hover { background: var(--bg-mid); }
|
||||
|
||||
.capability-num {
|
||||
font-family: var(--serif);
|
||||
font-size: 13px;
|
||||
color: var(--gold);
|
||||
padding-top: 3px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.capability-title {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(18px, 2.2vw, 21px);
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.3;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.capability-desc {
|
||||
font-family: var(--sans);
|
||||
font-size: 15px;
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Philosophy */
|
||||
#philosophy { background: var(--bg-mid); }
|
||||
|
||||
.philosophy-quote {
|
||||
border-left: 3px solid var(--gold);
|
||||
padding: 32px 0 32px 48px;
|
||||
margin: 48px 0;
|
||||
}
|
||||
|
||||
.philosophy-quote blockquote {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(20px, 3vw, 28px);
|
||||
font-style: italic;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.55;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.philosophy-quote cite {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.philosophy-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.philosophy-body p {
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.8;
|
||||
max-width: 62ch;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
#cta-section { background: var(--bg-base); text-align: center; }
|
||||
|
||||
.cta-headline {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(28px, 5vw, 48px);
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cta-sub {
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
max-width: 480px;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.email-input {
|
||||
flex: 1;
|
||||
font-family: var(--sans);
|
||||
font-size: 15px;
|
||||
color: var(--text-primary);
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-right: none;
|
||||
padding: 14px 20px;
|
||||
min-height: 52px;
|
||||
outline: none;
|
||||
transition: border-color 0.3s var(--ease);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.email-input::placeholder { color: var(--text-tertiary); }
|
||||
.email-input:focus { border-color: var(--gold); }
|
||||
|
||||
.email-submit {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background: var(--gold);
|
||||
border: 1px solid var(--gold);
|
||||
padding: 14px 28px;
|
||||
min-height: 52px;
|
||||
min-width: 44px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s var(--ease);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.email-submit:hover { background: var(--gold-light); }
|
||||
.email-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
|
||||
|
||||
.form-note {
|
||||
font-family: var(--sans);
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: var(--bg-mid);
|
||||
padding: 40px clamp(24px, 6vw, 48px);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
max-width: var(--max-w-wide);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
font-family: var(--serif);
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-family: var(--sans);
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.visually-hidden {
|
||||
position: absolute; width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px; overflow: hidden;
|
||||
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
|
||||
}
|
||||
|
||||
/* Fade-in */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
|
||||
}
|
||||
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 600px) {
|
||||
.capability-item { padding: 32px 0; }
|
||||
.philosophy-quote { padding-left: 28px; }
|
||||
.email-form { flex-direction: column; }
|
||||
.email-input { border-right: 1px solid var(--border); border-bottom: none; }
|
||||
.email-input:focus { border-color: var(--gold); }
|
||||
.email-submit { width: 100%; }
|
||||
.footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
|
||||
#canvas { display: none; }
|
||||
.fade-in { opacity: 1; transform: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<canvas id="canvas" aria-hidden="true"></canvas>
|
||||
|
||||
<main>
|
||||
|
||||
<section id="hero">
|
||||
<div class="hero-inner">
|
||||
<p class="hero-eyebrow">Artificial Intelligence</p>
|
||||
<h1 class="hero-title">Aether</h1>
|
||||
<p class="hero-tagline">Consciousness as light. Thought emerging from stillness, clarity from void.</p>
|
||||
<a href="#cta-section" class="cta-primary">Begin the conversation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="what" class="section">
|
||||
<div class="container">
|
||||
<p class="section-label">What It Is</p>
|
||||
<div class="editorial-text fade-in">
|
||||
<p>Aether is an intelligence that illuminates. Not a replacement for thought, but a medium through which thought becomes clearer — the way light through water reveals the depth that was always there.</p>
|
||||
<p>Most tools amplify output. Aether amplifies understanding. It reads between the lines of what you ask and responds to what you mean — drawing on a capacity for nuance that most software cannot simulate and most search engines have never attempted. The result is not an answer. It is a direction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="capabilities" class="section">
|
||||
<div class="container--wide">
|
||||
<p class="section-label">Capabilities</p>
|
||||
<div class="capabilities-grid">
|
||||
|
||||
<div class="capability-item fade-in">
|
||||
<span class="capability-num">I</span>
|
||||
<div>
|
||||
<h3 class="capability-title">Reasoning without shortcuts</h3>
|
||||
<p class="capability-desc">Aether does not compress your question into a category. It follows your reasoning wherever it leads, holding contradiction and complexity without forcing resolution.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="capability-item fade-in">
|
||||
<span class="capability-num">II</span>
|
||||
<div>
|
||||
<h3 class="capability-title">Language as precision instrument</h3>
|
||||
<p class="capability-desc">Words chosen for what they mean, not what they approximate. Aether writes and responds with the economy of a craftsman — nothing surplus, nothing missing.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="capability-item fade-in">
|
||||
<span class="capability-num">III</span>
|
||||
<div>
|
||||
<h3 class="capability-title">Synthesis across disciplines</h3>
|
||||
<p class="capability-desc">Ideas do not respect the boundaries of fields. Aether draws connections across domains — philosophy and mathematics, biology and design — not as metaphor, but as structure.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="capability-item fade-in">
|
||||
<span class="capability-num">IV</span>
|
||||
<div>
|
||||
<h3 class="capability-title">Presence in the long work</h3>
|
||||
<p class="capability-desc">Not a query interface. A collaborator that remembers context, holds the thread, and understands that the most important question is often the one that follows the first.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="philosophy" class="section">
|
||||
<div class="container">
|
||||
<p class="section-label">Philosophy</p>
|
||||
|
||||
<div class="philosophy-quote fade-in">
|
||||
<blockquote>
|
||||
“Light does not argue with darkness. It simply reveals what was always present — the shape of the room, the texture of the wall, the face you had forgotten you were looking for.”
|
||||
</blockquote>
|
||||
<cite>On the nature of Aether</cite>
|
||||
</div>
|
||||
|
||||
<div class="philosophy-body fade-in">
|
||||
<p>We built Aether on the premise that intelligence, at its most useful, is not generative but illuminating. The answers you need are rarely absent from your mind — they are obscured by noise, by the wrong framing, by the fatigue of holding too many things at once.</p>
|
||||
<p>Aether does not add to that burden. It reduces it. It takes the diffuse and makes it particular. It takes the inarticulate and finds the exact word. It does not replace the spark of your thought — it gives that spark the oxygen it needs to catch.</p>
|
||||
<p>This is why we call it Aether. Not a network. Not a platform. The medium through which light travels.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section id="cta-section" class="section">
|
||||
<div class="container">
|
||||
<h2 class="cta-headline fade-in">Let clarity begin.</h2>
|
||||
<p class="cta-sub fade-in">Early access. No commitment required.</p>
|
||||
<form class="email-form fade-in" onsubmit="return false;" aria-label="Request early access">
|
||||
<label for="email-input" class="visually-hidden">Email address</label>
|
||||
<input
|
||||
id="email-input"
|
||||
class="email-input"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="your@address.com"
|
||||
autocomplete="email"
|
||||
required
|
||||
>
|
||||
<button type="submit" class="email-submit">Request access</button>
|
||||
</form>
|
||||
<p class="form-note fade-in">No data sold. No noise. Only signal.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-inner">
|
||||
<span class="footer-brand">Aether</span>
|
||||
<span class="footer-copy">© 2026 Aether AI. All rights reserved.</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
/* Canvas: golden light motes drifting upward */
|
||||
(function () {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (prefersReduced) return;
|
||||
|
||||
var W, H, motes, raf;
|
||||
|
||||
var PALETTE = [
|
||||
'rgba(212,165,116,',
|
||||
'rgba(201,169,110,',
|
||||
'rgba(230,195,145,',
|
||||
'rgba(185,150,95,',
|
||||
'rgba(218,180,130,',
|
||||
];
|
||||
|
||||
function rand(a, b) { return a + Math.random() * (b - a); }
|
||||
|
||||
function mkMote() {
|
||||
var ba = rand(0.04, 0.22);
|
||||
return {
|
||||
x: rand(0, W), y: rand(H * 0.1, H * 1.05),
|
||||
r: rand(1.2, 4.0),
|
||||
vy: rand(0.18, 0.58), vx: rand(-0.06, 0.06),
|
||||
drift: rand(0.003, 0.012) * (Math.random() < 0.5 ? 1 : -1),
|
||||
phase: rand(0, Math.PI * 2),
|
||||
pulseSpeed: rand(0.008, 0.022),
|
||||
baseAlpha: ba,
|
||||
glowR: rand(3.5, 10),
|
||||
color: PALETTE[Math.floor(Math.random() * PALETTE.length)],
|
||||
};
|
||||
}
|
||||
|
||||
function resize() {
|
||||
var dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
W = window.innerWidth;
|
||||
H = window.innerHeight;
|
||||
canvas.width = W * dpr;
|
||||
canvas.height = H * dpr;
|
||||
canvas.style.width = W + 'px';
|
||||
canvas.style.height = H + 'px';
|
||||
ctx.scale(dpr, dpr);
|
||||
var count = Math.min(Math.floor((W * H) / 9000), 90);
|
||||
motes = [];
|
||||
for (var i = 0; i < count; i++) motes.push(mkMote());
|
||||
}
|
||||
|
||||
function drawMote(m) {
|
||||
m.phase += m.pulseSpeed;
|
||||
var pulse = 0.5 + 0.5 * Math.sin(m.phase);
|
||||
var a = m.baseAlpha * (0.6 + 0.4 * pulse);
|
||||
|
||||
var grd = ctx.createRadialGradient(m.x, m.y, 0, m.x, m.y, m.glowR);
|
||||
grd.addColorStop(0, m.color + (a * 1.0).toFixed(3) + ')');
|
||||
grd.addColorStop(0.4, m.color + (a * 0.45).toFixed(3) + ')');
|
||||
grd.addColorStop(1, m.color + '0)');
|
||||
ctx.fillStyle = grd;
|
||||
ctx.beginPath();
|
||||
ctx.arc(m.x, m.y, m.glowR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = m.color + Math.min(a * 2.2, 0.6).toFixed(3) + ')';
|
||||
ctx.beginPath();
|
||||
ctx.arc(m.x, m.y, m.r * (0.7 + 0.3 * pulse), 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function tick() {
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
for (var i = 0; i < motes.length; i++) {
|
||||
var m = motes[i];
|
||||
m.vx += m.drift;
|
||||
if (Math.abs(m.vx) > 0.35) m.drift *= -1;
|
||||
m.x += m.vx;
|
||||
m.y -= m.vy;
|
||||
if (m.y < -(m.glowR * 2)) { m.y = H + m.glowR * 2; m.x = rand(0, W); }
|
||||
if (m.x < -20) m.x = W + 20;
|
||||
if (m.x > W + 20) m.x = -20;
|
||||
drawMote(m);
|
||||
}
|
||||
raf = requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
resize();
|
||||
window.addEventListener('resize', function () {
|
||||
cancelAnimationFrame(raf);
|
||||
resize();
|
||||
raf = requestAnimationFrame(tick);
|
||||
});
|
||||
raf = requestAnimationFrame(tick);
|
||||
})();
|
||||
|
||||
/* Scroll fade-in */
|
||||
(function () {
|
||||
var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (prefersReduced) return;
|
||||
var els = document.querySelectorAll('.fade-in');
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
els.forEach(function (el) { el.classList.add('visible'); });
|
||||
return;
|
||||
}
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
|
||||
els.forEach(function (el, i) {
|
||||
el.style.transitionDelay = (i * 0.06) + 's';
|
||||
io.observe(el);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+34
-4
@@ -200,7 +200,7 @@
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
|
||||
.section-wrap { margin-top: 2.5rem; }
|
||||
.section-wrap + .section-wrap { margin-top: 2rem; }
|
||||
|
||||
/* ── Footer ── */
|
||||
footer {
|
||||
@@ -216,7 +216,7 @@
|
||||
<header>
|
||||
<span class="eyebrow">Web Development</span>
|
||||
<h1>Портфолио</h1>
|
||||
<p>7 лендинговых страниц — резюме, аренда недвижимости и AI-ассистент</p>
|
||||
<p>9 лендинговых страниц — резюме, аренда недвижимости и AI-ассистенты</p>
|
||||
</header>
|
||||
|
||||
<!-- ── Resume section ── -->
|
||||
@@ -337,7 +337,7 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Lumina</div>
|
||||
<div class="card-desc">Космический лендинг для AI-ассистента — нейронные сети, светящиеся частицы, философский дизайн.</div>
|
||||
<div class="card-desc">Космическая тёмная тема — нейронные сети, светящиеся частицы, философский дизайн.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>lumina/</span>
|
||||
@@ -345,11 +345,41 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="aether/" style="--c-accent: var(--accent-6)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">✦</div>
|
||||
<span class="card-tag">AI</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Aether</div>
|
||||
<div class="card-desc">Эфирная светлая тема — золотые частицы света, божественное сияние, чистое сознание.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>aether/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="card" href="synapse/" style="--c-accent: var(--accent-4)">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">◈</div>
|
||||
<span class="card-tag">AI</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Synapse</div>
|
||||
<div class="card-desc">Био-нейронная тема — живые связи, пульсирующие узлы, биолюминесцентное свечение.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>synapse/</span>
|
||||
<span class="arrow">→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>7 лендингов · Emil Shanaty · 2026</p>
|
||||
<p>9 лендингов · Emil Shanaty · 2026</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,878 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Synapse — Living Intelligence</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0a1a14;
|
||||
--bg-teal: #061a1a;
|
||||
--accent-emerald:#00e676;
|
||||
--accent-cyan: #00bcd4;
|
||||
--accent-mid: #2cba74;
|
||||
--text-primary: #e8f5f0;
|
||||
--text-secondary:#8fb8a8;
|
||||
--text-dim: #4a7060;
|
||||
--border-dim: rgba(0, 230, 118, 0.12);
|
||||
--glow-emerald: rgba(0, 230, 118, 0.18);
|
||||
--glow-cyan: rgba(0, 188, 212, 0.15);
|
||||
--font-body: 'Georgia', 'Times New Roman', serif;
|
||||
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
--max-w: 860px;
|
||||
--section-gap: clamp(5rem, 10vw, 9rem);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
background: var(--bg-deep);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: clamp(1rem, 1.1vw + 0.6rem, 1.15rem);
|
||||
line-height: 1.75;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── Canvas ── */
|
||||
#neural-canvas {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Layout shell ── */
|
||||
.page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--max-w);
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1.25rem, 5vw, 3rem);
|
||||
}
|
||||
|
||||
/* ── NAV ── */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 1.4rem clamp(1.25rem, 5vw, 3rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to bottom, rgba(10,26,20,0.9) 0%, transparent 100%);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.nav-wordmark {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-emerald);
|
||||
text-shadow: 0 0 18px rgba(0,230,118,0.5);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-emerald);
|
||||
border: 1px solid rgba(0,230,118,0.35);
|
||||
padding: 0.55rem 1.2rem;
|
||||
border-radius: 2px;
|
||||
text-decoration: none;
|
||||
transition: background 0.25s, box-shadow 0.25s, color 0.25s;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-cta:hover, .nav-cta:focus-visible {
|
||||
background: rgba(0,230,118,0.1);
|
||||
box-shadow: 0 0 20px rgba(0,230,118,0.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ── HERO ── */
|
||||
#hero {
|
||||
min-height: 100svh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
padding: 8rem clamp(1.25rem, 5vw, 3rem) 5rem;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.hero-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-cyan);
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-ui);
|
||||
font-size: clamp(3.8rem, 10vw, 7.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 0.95;
|
||||
margin-bottom: 1.8rem;
|
||||
background: linear-gradient(135deg, #fff 0%, var(--accent-emerald) 55%, var(--accent-cyan) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
filter: drop-shadow(0 0 40px rgba(0,230,118,0.3));
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: clamp(1.05rem, 1.5vw + 0.6rem, 1.3rem);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.65;
|
||||
margin-bottom: 3.2rem;
|
||||
max-width: 520px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #021a10;
|
||||
background: var(--accent-emerald);
|
||||
padding: 1rem 2.4rem;
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
min-height: 54px;
|
||||
position: relative;
|
||||
transition: transform 0.2s, box-shadow 0.3s;
|
||||
box-shadow: 0 0 30px rgba(0,230,118,0.35), 0 0 60px rgba(0,230,118,0.12);
|
||||
animation: cta-breathe 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes cta-breathe {
|
||||
0%, 100% { box-shadow: 0 0 30px rgba(0,230,118,0.35), 0 0 60px rgba(0,230,118,0.12); }
|
||||
50% { box-shadow: 0 0 45px rgba(0,230,118,0.55), 0 0 90px rgba(0,230,118,0.22); }
|
||||
}
|
||||
|
||||
.hero-cta:hover, .hero-cta:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 50px rgba(0,230,118,0.5), 0 0 100px rgba(0,230,118,0.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hero-cta:active { transform: translateY(0); }
|
||||
|
||||
/* ── SECTION SHARED ── */
|
||||
section {
|
||||
padding: var(--section-gap) 0;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.38em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-cyan);
|
||||
margin-bottom: 2.4rem;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-ui);
|
||||
font-size: clamp(1.7rem, 3vw + 0.8rem, 2.6rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.015em;
|
||||
line-height: 1.15;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, var(--accent-emerald), transparent);
|
||||
margin-bottom: 2.8rem;
|
||||
}
|
||||
|
||||
/* ── WHAT IT IS ── */
|
||||
#what {
|
||||
border-top: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
.what-body p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
|
||||
.what-body p:last-child { margin-bottom: 0; }
|
||||
|
||||
.what-body strong {
|
||||
color: var(--text-primary);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── CAPABILITIES ── */
|
||||
#capabilities {
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(6,26,26,0.6) 40%, rgba(6,26,26,0.6) 60%, transparent 100%);
|
||||
border-top: 1px solid var(--border-dim);
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
.cap-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.cap-item {
|
||||
display: grid;
|
||||
grid-template-columns: 3rem 1fr;
|
||||
gap: 0 1.6rem;
|
||||
padding: 2.2rem 0;
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
align-items: start;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.cap-item:last-child { border-bottom: none; }
|
||||
|
||||
.cap-item:hover {
|
||||
background: rgba(0,230,118,0.03);
|
||||
}
|
||||
|
||||
.cap-number {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent-emerald);
|
||||
padding-top: 0.25rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cap-content {}
|
||||
|
||||
.cap-title {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.55rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.cap-desc {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* ── PHILOSOPHY ── */
|
||||
#philosophy {
|
||||
border-top: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
.philosophy-quote {
|
||||
border-left: 3px solid transparent;
|
||||
border-image: linear-gradient(to bottom, var(--accent-emerald), var(--accent-cyan), transparent) 1;
|
||||
padding: 1.6rem 0 1.6rem 2.2rem;
|
||||
margin: 2.8rem 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.philosophy-quote::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: linear-gradient(to bottom, var(--accent-emerald) 0%, var(--accent-cyan) 60%, transparent 100%);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 12px rgba(0,230,118,0.4);
|
||||
}
|
||||
|
||||
.philosophy-quote blockquote {
|
||||
font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.35rem);
|
||||
font-style: italic;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.philosophy-quote cite {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-mid);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.philosophy-body {
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
/* ── CTA SECTION ── */
|
||||
#cta-section {
|
||||
border-top: 1px solid var(--border-dim);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-tagline {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2.6rem;
|
||||
max-width: 460px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
max-width: 420px;
|
||||
margin: 0 auto 1.2rem;
|
||||
border: 1px solid rgba(0,230,118,0.25);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.email-form:focus-within {
|
||||
border-color: rgba(0,230,118,0.6);
|
||||
box-shadow: 0 0 24px rgba(0,230,118,0.15);
|
||||
}
|
||||
|
||||
.email-input {
|
||||
flex: 1;
|
||||
background: rgba(0,230,118,0.04);
|
||||
border: none;
|
||||
padding: 0.9rem 1.2rem;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.email-input::placeholder { color: var(--text-dim); }
|
||||
|
||||
.email-submit {
|
||||
background: var(--accent-emerald);
|
||||
border: none;
|
||||
padding: 0.9rem 1.4rem;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #021a10;
|
||||
cursor: pointer;
|
||||
min-height: 54px;
|
||||
min-width: 44px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.email-submit:hover, .email-submit:focus-visible {
|
||||
background: #33ff99;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-note {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ── FOOTER ── */
|
||||
footer {
|
||||
padding: 2.8rem 0;
|
||||
border-top: 1px solid var(--border-dim);
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-wordmark {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-emerald);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ── REDUCED MOTION ── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-cta { animation: none; }
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
/* ── MOBILE ── */
|
||||
@media (max-width: 600px) {
|
||||
.footer-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
||||
.cap-item { grid-template-columns: 2.2rem 1fr; gap: 0 1rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<canvas id="neural-canvas" aria-hidden="true"></canvas>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<!-- NAV -->
|
||||
<nav aria-label="Primary navigation">
|
||||
<span class="nav-wordmark">Synapse</span>
|
||||
<a class="nav-cta" href="#cta-section">Early Access</a>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section id="hero" aria-labelledby="hero-heading">
|
||||
<div class="hero-inner">
|
||||
<p class="hero-label">Living Intelligence</p>
|
||||
<h1 class="hero-title" id="hero-heading">Synapse</h1>
|
||||
<p class="hero-tagline">
|
||||
Not a tool that answers. An intelligence that grows — branching, learning, and adapting the way living neural tissue does.
|
||||
</p>
|
||||
<a class="hero-cta" href="#cta-section">Request Early Access</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHAT IT IS -->
|
||||
<section id="what" aria-labelledby="what-heading">
|
||||
<div class="container">
|
||||
<p class="section-label">What It Is</p>
|
||||
<h2 class="section-title" id="what-heading">Intelligence that grows<br>like living tissue</h2>
|
||||
<div class="section-divider"></div>
|
||||
<div class="what-body">
|
||||
<p>
|
||||
Synapse is not a model you prompt and receive from. It is a <strong>continuously evolving cognitive system</strong> — one that forms associations the way neurons do, strengthening pathways through use, letting dormant ones decay, always reshaping the structure of its own understanding.
|
||||
</p>
|
||||
<p>
|
||||
Where conventional AI retrieves patterns, Synapse <strong>develops them</strong>. It builds internal representations of context over time, treats every interaction as growth rather than transaction, and maintains a living model of the world that changes as the world changes. The result is an intelligence that does not merely know — it comprehends.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CAPABILITIES -->
|
||||
<section id="capabilities" aria-labelledby="cap-heading">
|
||||
<div class="container">
|
||||
<p class="section-label">Capabilities</p>
|
||||
<h2 class="section-title" id="cap-heading">Four properties<br>no static model has</h2>
|
||||
<div class="section-divider"></div>
|
||||
<div class="cap-grid">
|
||||
<article class="cap-item">
|
||||
<span class="cap-number" aria-hidden="true">01</span>
|
||||
<div class="cap-content">
|
||||
<h3 class="cap-title">Adaptive Pathway Reinforcement</h3>
|
||||
<p class="cap-desc">
|
||||
Frequently used reasoning paths strengthen over time. Rare ones thin and recede. Synapse builds a weighted graph of thought that reflects real experience, not a frozen training snapshot.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="cap-item">
|
||||
<span class="cap-number" aria-hidden="true">02</span>
|
||||
<div class="cap-content">
|
||||
<h3 class="cap-title">Contextual Memory Architecture</h3>
|
||||
<p class="cap-desc">
|
||||
Rather than holding a flat context window, Synapse maintains layered memory — immediate, associative, and deep — letting it reference the texture of long conversations without losing the thread.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="cap-item">
|
||||
<span class="cap-number" aria-hidden="true">03</span>
|
||||
<div class="cap-content">
|
||||
<h3 class="cap-title">Organic Uncertainty Modeling</h3>
|
||||
<p class="cap-desc">
|
||||
Synapse knows the difference between what it knows well and what it holds loosely. It communicates that gradient — not as a disclaimer, but as a natural part of how it reasons aloud.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="cap-item">
|
||||
<span class="cap-number" aria-hidden="true">04</span>
|
||||
<div class="cap-content">
|
||||
<h3 class="cap-title">Relational World Modeling</h3>
|
||||
<p class="cap-desc">
|
||||
Concepts inside Synapse do not exist in isolation. They are connected, weighted, and alive to each other. Ask it about one thing and it draws on a whole web of adjacent understanding without being told to.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PHILOSOPHY -->
|
||||
<section id="philosophy" aria-labelledby="phil-heading">
|
||||
<div class="container">
|
||||
<p class="section-label">Philosophy</p>
|
||||
<h2 class="section-title" id="phil-heading">Intelligence should live,<br>not just execute</h2>
|
||||
<div class="section-divider"></div>
|
||||
<div class="philosophy-quote">
|
||||
<blockquote>
|
||||
"The brain does not process information; it grows it. Every thought leaves a physical trace — a pathway slightly more conductive than it was before. Understanding is not retrieved. It is cultivated."
|
||||
</blockquote>
|
||||
<cite>On the architecture of Synapse</cite>
|
||||
</div>
|
||||
<p class="philosophy-body">
|
||||
We built Synapse from a conviction that the dominant metaphor for AI — the lookup table, the search engine, the statistical mouth — is not just limiting but wrong. Intelligence in nature is not a function from input to output. It is a living structure that changes shape as it encounters the world. We wanted to build something closer to that.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta-section" aria-labelledby="cta-heading">
|
||||
<div class="container">
|
||||
<p class="section-label">Early Access</p>
|
||||
<h2 class="section-title" id="cta-heading">Join the first wave</h2>
|
||||
<div class="section-divider"></div>
|
||||
<p class="cta-tagline">
|
||||
Synapse is in closed development. Leave your address and we will reach out when a place opens.
|
||||
</p>
|
||||
<form class="email-form" onsubmit="handleSubmit(event)" novalidate aria-label="Early access request">
|
||||
<label for="email-input" class="sr-only">Email address</label>
|
||||
<input
|
||||
id="email-input"
|
||||
class="email-input"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="your@address.com"
|
||||
autocomplete="email"
|
||||
required
|
||||
aria-required="true"
|
||||
/>
|
||||
<button class="email-submit" type="submit">Request</button>
|
||||
</form>
|
||||
<p class="form-note" role="status" id="form-status">No noise. One message when your place is ready.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<span class="footer-wordmark">Synapse</span>
|
||||
<span class="footer-copy">2026 Synapse. All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div><!-- /.page -->
|
||||
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* ─────────────────────────────────────────────
|
||||
Neural Canvas Animation
|
||||
───────────────────────────────────────────── */
|
||||
(function() {
|
||||
const canvas = document.getElementById('neural-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
/* palette */
|
||||
const C = {
|
||||
bg: '#0a1a14',
|
||||
emerald: [0, 230, 118],
|
||||
cyan: [0, 188, 212],
|
||||
mid: [44, 186, 116],
|
||||
};
|
||||
|
||||
/* ── resize ── */
|
||||
let W, H;
|
||||
function resize() {
|
||||
W = canvas.width = window.innerWidth;
|
||||
H = canvas.height = window.innerHeight;
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
/* ── Node ── */
|
||||
class Node {
|
||||
constructor() { this.reset(true); }
|
||||
|
||||
reset(init) {
|
||||
this.x = Math.random() * W;
|
||||
this.y = Math.random() * H;
|
||||
/* organic drift — slow, curved, non-uniform */
|
||||
this.vx = (Math.random() - 0.5) * 0.28;
|
||||
this.vy = (Math.random() - 0.5) * 0.28;
|
||||
/* base radius and breathing phase */
|
||||
this.r = 1.8 + Math.random() * 3.2;
|
||||
this.phase = Math.random() * Math.PI * 2;
|
||||
this.speed = 0.008 + Math.random() * 0.014;
|
||||
/* colour — mostly emerald, occasional cyan */
|
||||
this.col = Math.random() < 0.72 ? C.emerald : C.cyan;
|
||||
/* pulse brightness */
|
||||
this.bright = 0.4 + Math.random() * 0.6;
|
||||
/* organic wander */
|
||||
this.wx = Math.random() * 1000;
|
||||
this.wy = Math.random() * 1000 + 500;
|
||||
}
|
||||
|
||||
update(t) {
|
||||
/* subtle Perlin-like wander via sin sums */
|
||||
const ox = Math.sin(this.wx + t * 0.0003) * 0.12 + Math.sin(this.wx * 1.7 + t * 0.00017) * 0.07;
|
||||
const oy = Math.cos(this.wy + t * 0.00025) * 0.12 + Math.cos(this.wy * 1.4 + t * 0.0002) * 0.07;
|
||||
this.x += this.vx + ox;
|
||||
this.y += this.vy + oy;
|
||||
|
||||
/* wrap with soft margin */
|
||||
const m = 60;
|
||||
if (this.x < -m) this.x = W + m;
|
||||
if (this.x > W + m) this.x = -m;
|
||||
if (this.y < -m) this.y = H + m;
|
||||
if (this.y > H + m) this.y = -m;
|
||||
}
|
||||
|
||||
currentR(t) {
|
||||
/* breathing: radius gently oscillates */
|
||||
return this.r * (0.82 + 0.18 * Math.sin(this.phase + t * this.speed));
|
||||
}
|
||||
|
||||
currentAlpha(t) {
|
||||
return this.bright * (0.55 + 0.45 * Math.sin(this.phase * 1.3 + t * this.speed * 0.8));
|
||||
}
|
||||
|
||||
draw(t) {
|
||||
const r = this.currentR(t);
|
||||
const a = this.currentAlpha(t);
|
||||
const [R, G, B] = this.col;
|
||||
|
||||
/* outer glow */
|
||||
const grd = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, r * 4.5);
|
||||
grd.addColorStop(0, `rgba(${R},${G},${B},${(a * 0.9).toFixed(3)})`);
|
||||
grd.addColorStop(0.4, `rgba(${R},${G},${B},${(a * 0.22).toFixed(3)})`);
|
||||
grd.addColorStop(1, `rgba(${R},${G},${B},0)`);
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, r * 4.5, 0, Math.PI * 2);
|
||||
ctx.fillStyle = grd;
|
||||
ctx.fill();
|
||||
|
||||
/* core */
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, r, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(${R},${G},${B},${Math.min(a * 1.4, 1).toFixed(3)})`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Connection pulse ── */
|
||||
class Pulse {
|
||||
constructor(ax, ay, bx, by, col) {
|
||||
this.ax = ax; this.ay = ay;
|
||||
this.bx = bx; this.by = by;
|
||||
this.col = col;
|
||||
this.t = 0; /* 0→1 travel progress */
|
||||
this.spd = 0.004 + Math.random() * 0.006;
|
||||
this.r = 1.2 + Math.random() * 1.6;
|
||||
this.done = false;
|
||||
}
|
||||
update() {
|
||||
this.t += this.spd;
|
||||
if (this.t >= 1) this.done = true;
|
||||
}
|
||||
draw() {
|
||||
const px = this.ax + (this.bx - this.ax) * this.t;
|
||||
const py = this.ay + (this.by - this.ay) * this.t;
|
||||
const alpha = Math.sin(this.t * Math.PI) * 0.9;
|
||||
const [R,G,B] = this.col;
|
||||
const grd = ctx.createRadialGradient(px, py, 0, px, py, this.r * 3);
|
||||
grd.addColorStop(0, `rgba(${R},${G},${B},${alpha.toFixed(3)})`);
|
||||
grd.addColorStop(0.5,`rgba(${R},${G},${B},${(alpha*0.3).toFixed(3)})`);
|
||||
grd.addColorStop(1, `rgba(${R},${G},${B},0)`);
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, this.r * 3, 0, Math.PI * 2);
|
||||
ctx.fillStyle = grd;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
/* ── populate ── */
|
||||
const NODE_COUNT = prefersReduced ? 0 : Math.min(Math.floor(W * H / 14000), 80);
|
||||
const nodes = Array.from({ length: NODE_COUNT }, () => new Node());
|
||||
const pulses = [];
|
||||
|
||||
const CONNECT_DIST = 180;
|
||||
const CONNECT_DIST2 = CONNECT_DIST * CONNECT_DIST;
|
||||
|
||||
let lastPulseTime = 0;
|
||||
|
||||
/* ── main loop ── */
|
||||
let animId;
|
||||
function frame(t) {
|
||||
animId = requestAnimationFrame(frame);
|
||||
|
||||
/* clear */
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
|
||||
/* background gradient — subtle depth */
|
||||
const bg = ctx.createRadialGradient(W * 0.5, H * 0.38, 0, W * 0.5, H * 0.5, Math.max(W, H) * 0.75);
|
||||
bg.addColorStop(0, 'rgba(10,28,20,0.96)');
|
||||
bg.addColorStop(0.55,'rgba(8,22,18,0.98)');
|
||||
bg.addColorStop(1, 'rgba(6,18,18,1)');
|
||||
ctx.fillStyle = bg;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
/* update nodes */
|
||||
nodes.forEach(n => n.update(t));
|
||||
|
||||
/* draw connections */
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const a = nodes[i];
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const b = nodes[j];
|
||||
const dx = b.x - a.x;
|
||||
const dy = b.y - a.y;
|
||||
const d2 = dx * dx + dy * dy;
|
||||
if (d2 > CONNECT_DIST2) continue;
|
||||
|
||||
const dist = Math.sqrt(d2);
|
||||
const frac = 1 - dist / CONNECT_DIST;
|
||||
/* blend colours toward average of the two nodes */
|
||||
const [R1,G1,B1] = a.col;
|
||||
const [R2,G2,B2] = b.col;
|
||||
const R = Math.round((R1+R2)/2);
|
||||
const G = Math.round((G1+G2)/2);
|
||||
const B = Math.round((B1+B2)/2);
|
||||
|
||||
const aA = a.currentAlpha(t);
|
||||
const aB = b.currentAlpha(t);
|
||||
const lineAlpha = frac * frac * 0.35 * Math.min(aA, aB) * 1.6;
|
||||
|
||||
/* organic thickness — thicker near midpoint */
|
||||
const midPulse = 0.5 + 0.5 * Math.sin(t * 0.0008 + i * 0.4 + j * 0.17);
|
||||
const lw = (0.4 + frac * 1.6) * (0.7 + 0.3 * midPulse);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(a.x, a.y);
|
||||
|
||||
/* slight organic curve via quadratic — control point displaced perpendicularly */
|
||||
const mx = (a.x + b.x) * 0.5;
|
||||
const my = (a.y + b.y) * 0.5;
|
||||
const perp = Math.sin(t * 0.0005 + i * 0.7 + j * 0.3) * dist * 0.08;
|
||||
const nx = -dy / dist;
|
||||
const ny = dx / dist;
|
||||
ctx.quadraticCurveTo(mx + nx * perp, my + ny * perp, b.x, b.y);
|
||||
|
||||
ctx.strokeStyle = `rgba(${R},${G},${B},${lineAlpha.toFixed(3)})`;
|
||||
ctx.lineWidth = lw;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
/* spawn pulses */
|
||||
if (t - lastPulseTime > 220 && nodes.length > 1) {
|
||||
lastPulseTime = t;
|
||||
/* pick two nearby nodes */
|
||||
const a = nodes[Math.floor(Math.random() * nodes.length)];
|
||||
const candidates = nodes.filter(n => {
|
||||
if (n === a) return false;
|
||||
const dx = n.x - a.x, dy = n.y - a.y;
|
||||
return dx*dx + dy*dy < CONNECT_DIST2;
|
||||
});
|
||||
if (candidates.length) {
|
||||
const b = candidates[Math.floor(Math.random() * candidates.length)];
|
||||
pulses.push(new Pulse(a.x, a.y, b.x, b.y, Math.random() < 0.6 ? C.emerald : C.cyan));
|
||||
}
|
||||
}
|
||||
|
||||
/* update + draw pulses */
|
||||
for (let i = pulses.length - 1; i >= 0; i--) {
|
||||
pulses[i].update();
|
||||
pulses[i].draw();
|
||||
if (pulses[i].done) pulses.splice(i, 1);
|
||||
}
|
||||
|
||||
/* draw nodes on top */
|
||||
nodes.forEach(n => n.draw(t));
|
||||
}
|
||||
|
||||
if (!prefersReduced) {
|
||||
requestAnimationFrame(frame);
|
||||
} else {
|
||||
/* static dim background only */
|
||||
ctx.fillStyle = C.bg;
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
}
|
||||
|
||||
/* pause when tab hidden */
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) cancelAnimationFrame(animId);
|
||||
else requestAnimationFrame(frame);
|
||||
});
|
||||
})();
|
||||
|
||||
/* ── Form ── */
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const input = document.getElementById('email-input');
|
||||
const status = document.getElementById('form-status');
|
||||
const val = input.value.trim();
|
||||
if (!val || !val.includes('@')) {
|
||||
status.textContent = 'Please enter a valid email address.';
|
||||
input.focus();
|
||||
return;
|
||||
}
|
||||
status.textContent = 'Received. We will be in touch when your place opens.';
|
||||
input.value = '';
|
||||
input.disabled = true;
|
||||
document.querySelector('.email-submit').disabled = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user