ebd4f2c6a8
* fix: redesign landing page with Nous blue palette and cleaner layout * fix: add features link * fix: misc refactors, easings * fix: animations, easings * fix: mobile
522 lines
14 KiB
JavaScript
522 lines
14 KiB
JavaScript
// =========================================================================
|
||
// Hermes Agent Landing Page — Interactions
|
||
// =========================================================================
|
||
|
||
// --- Platform install commands ---
|
||
const PLATFORMS = {
|
||
linux: {
|
||
command:
|
||
"curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash",
|
||
prompt: "$",
|
||
note: "Works on Linux, macOS & WSL2 · No prerequisites · Installs everything automatically",
|
||
stepNote:
|
||
"Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.",
|
||
},
|
||
};
|
||
|
||
function detectPlatform() {
|
||
return "linux";
|
||
}
|
||
|
||
function switchPlatform(platform) {
|
||
const cfg = PLATFORMS[platform];
|
||
if (!cfg) return;
|
||
|
||
// Update hero install widget
|
||
const commandEl = document.getElementById("install-command");
|
||
const promptEl = document.getElementById("install-prompt");
|
||
const noteEl = document.getElementById("install-note");
|
||
|
||
if (commandEl) commandEl.textContent = cfg.command;
|
||
if (promptEl) promptEl.textContent = cfg.prompt;
|
||
if (noteEl) noteEl.textContent = cfg.note;
|
||
|
||
// Update active tab in hero
|
||
document.querySelectorAll(".install-tab").forEach((tab) => {
|
||
tab.classList.toggle("active", tab.dataset.platform === platform);
|
||
});
|
||
|
||
// Sync the step section tabs too
|
||
switchStepPlatform(platform);
|
||
}
|
||
|
||
function switchStepPlatform(platform) {
|
||
const cfg = PLATFORMS[platform];
|
||
if (!cfg) return;
|
||
|
||
const commandEl = document.getElementById("step1-command");
|
||
const copyBtn = document.getElementById("step1-copy");
|
||
const noteEl = document.getElementById("step1-note");
|
||
|
||
if (commandEl) commandEl.textContent = cfg.command;
|
||
if (copyBtn) copyBtn.setAttribute("data-text", cfg.command);
|
||
if (noteEl) noteEl.textContent = cfg.stepNote;
|
||
|
||
// Update active tab in step section
|
||
document.querySelectorAll(".code-tab").forEach((tab) => {
|
||
tab.classList.toggle("active", tab.dataset.platform === platform);
|
||
});
|
||
}
|
||
|
||
function toggleMobileNav() {
|
||
document.getElementById("nav-mobile").classList.toggle("open");
|
||
document.getElementById("nav-hamburger").classList.toggle("open");
|
||
}
|
||
|
||
function toggleSpecs() {
|
||
const wrapper = document.getElementById("specs-wrapper");
|
||
const btn = document.getElementById("specs-toggle");
|
||
const label = btn.querySelector(".toggle-label");
|
||
const isOpen = wrapper.classList.contains("open");
|
||
|
||
if (isOpen) {
|
||
wrapper.style.maxHeight = wrapper.scrollHeight + "px";
|
||
requestAnimationFrame(() => {
|
||
wrapper.style.maxHeight = "0";
|
||
});
|
||
wrapper.classList.remove("open");
|
||
btn.classList.remove("open");
|
||
if (label) label.textContent = "More details";
|
||
} else {
|
||
wrapper.classList.add("open");
|
||
wrapper.style.maxHeight = wrapper.scrollHeight + "px";
|
||
btn.classList.add("open");
|
||
if (label) label.textContent = "Less";
|
||
wrapper.addEventListener(
|
||
"transitionend",
|
||
() => {
|
||
if (wrapper.classList.contains("open")) {
|
||
wrapper.style.maxHeight = "none";
|
||
}
|
||
},
|
||
{ once: true }
|
||
);
|
||
}
|
||
}
|
||
|
||
// --- Copy to clipboard ---
|
||
function copyInstall() {
|
||
const text = document.getElementById("install-command").textContent;
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
const btn = document.querySelector(".install-widget-body .copy-btn");
|
||
const original = btn.querySelector(".copy-text").textContent;
|
||
btn.querySelector(".copy-text").textContent = "Copied!";
|
||
btn.style.color = "var(--primary-light)";
|
||
setTimeout(() => {
|
||
btn.querySelector(".copy-text").textContent = original;
|
||
btn.style.color = "";
|
||
}, 2000);
|
||
});
|
||
}
|
||
|
||
function copyText(btn) {
|
||
const text = btn.getAttribute("data-text");
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
const original = btn.textContent;
|
||
btn.textContent = "Copied!";
|
||
btn.style.color = "var(--primary-light)";
|
||
setTimeout(() => {
|
||
btn.textContent = original;
|
||
btn.style.color = "";
|
||
}, 2000);
|
||
});
|
||
}
|
||
|
||
// --- Scroll-triggered fade-in ---
|
||
function initScrollAnimations() {
|
||
const elements = document.querySelectorAll(
|
||
".feature-card, .install-step, " +
|
||
".section-header, .terminal-window",
|
||
);
|
||
|
||
elements.forEach((el) => el.classList.add("fade-in"));
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
// Stagger children within grids
|
||
const parent = entry.target.parentElement;
|
||
if (parent) {
|
||
const siblings = parent.querySelectorAll(".fade-in");
|
||
let idx = Array.from(siblings).indexOf(entry.target);
|
||
if (idx < 0) idx = 0;
|
||
setTimeout(() => {
|
||
entry.target.classList.add("visible");
|
||
}, idx * 60);
|
||
} else {
|
||
entry.target.classList.add("visible");
|
||
}
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" },
|
||
);
|
||
|
||
elements.forEach((el) => observer.observe(el));
|
||
}
|
||
|
||
// --- Terminal Demo ---
|
||
const CURSOR = '<span class="terminal-cursor">█</span>';
|
||
|
||
const demoSequence = [
|
||
{ type: "prompt", text: "❯ " },
|
||
{
|
||
type: "type",
|
||
text: "Research the latest approaches to GRPO training and write a summary",
|
||
delay: 30,
|
||
},
|
||
{ type: "pause", ms: 600 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
"",
|
||
'<span class="t-dim"> web_search "GRPO reinforcement learning 2026" 1.2s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 400 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> web_extract arxiv.org/abs/2402.03300 3.1s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 400 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> web_search "GRPO vs PPO ablation results" 0.9s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 400 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> web_extract huggingface.co/blog/grpo 2.8s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 400 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> write_file ~/research/grpo-summary.md 0.1s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 500 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
"",
|
||
'<span class="t-text">Done! I\'ve written a summary covering:</span>',
|
||
"",
|
||
'<span class="t-text"> <span class="t-green">✓</span> GRPO\'s group-relative advantage (no critic model needed)</span>',
|
||
'<span class="t-text"> <span class="t-green">✓</span> Comparison with PPO/DPO on reasoning benchmarks</span>',
|
||
'<span class="t-text"> <span class="t-green">✓</span> Implementation notes for Axolotl and TRL</span>',
|
||
"",
|
||
'<span class="t-text">Saved to</span> <span class="t-accent">~/research/grpo-summary.md</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 2500 },
|
||
|
||
{ type: "clear" },
|
||
{ type: "prompt", text: "❯ " },
|
||
{
|
||
type: "type",
|
||
text: "Review the PR at NousResearch/hermes-agent#42 and fix any issues",
|
||
delay: 30,
|
||
},
|
||
{ type: "pause", ms: 600 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
"",
|
||
'<span class="t-dim"> delegate_task "review PR #42 changes" 2.1s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 500 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> git diff main..pr-42 0.4s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 400 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> patch tools/registry.py 0.1s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 400 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> python -m pytest tests/ -x 3.2s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 400 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
'<span class="t-dim"> git commit -m "fix: handle empty tool schemas" 0.3s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 500 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
"",
|
||
'<span class="t-text">Found 2 issues in the PR and fixed both:</span>',
|
||
"",
|
||
'<span class="t-text"> <span class="t-green">✓</span> Empty tool schema crash in registry.py — added guard</span>',
|
||
'<span class="t-text"> <span class="t-green">✓</span> Missing error handling in delegate_tool.py — added try/except</span>',
|
||
"",
|
||
'<span class="t-text">Tests pass. Committed the fix and pushed to the PR branch.</span>',
|
||
'<span class="t-text">I also saved a</span> <span class="t-accent">skill</span> <span class="t-text">for this PR review pattern.</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 2500 },
|
||
|
||
{ type: "clear" },
|
||
{ type: "prompt", text: "❯ " },
|
||
{
|
||
type: "type",
|
||
text: "How did we fix that Docker networking issue?",
|
||
delay: 35,
|
||
},
|
||
{ type: "pause", ms: 500 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
"",
|
||
'<span class="t-dim"> session_search "Docker networking" 1.4s</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 500 },
|
||
{
|
||
type: "output",
|
||
lines: [
|
||
"",
|
||
'<span class="t-text">Found it — from a session on February 12th:</span>',
|
||
"",
|
||
'<span class="t-text">The containers couldn\'t reach each other because the compose</span>',
|
||
'<span class="t-text">file was using the default bridge network. We switched to a</span>',
|
||
'<span class="t-text">custom network with</span> <span class="t-accent">driver: overlay</span><span class="t-text">, added explicit</span>',
|
||
'<span class="t-text">aliases, and set</span> <span class="t-accent">dns: 8.8.8.8</span> <span class="t-text">as a fallback.</span>',
|
||
"",
|
||
'<span class="t-text">The fix was committed in</span> <span class="t-accent">docker-compose.prod.yml</span><span class="t-text">.</span>',
|
||
],
|
||
},
|
||
{ type: "pause", ms: 3000 },
|
||
];
|
||
|
||
class TerminalDemo {
|
||
constructor(container) {
|
||
this.container = container;
|
||
this.running = false;
|
||
this.content = "";
|
||
}
|
||
|
||
async start() {
|
||
if (this.running) return;
|
||
this.running = true;
|
||
|
||
while (this.running) {
|
||
for (const step of demoSequence) {
|
||
if (!this.running) return;
|
||
await this.execute(step);
|
||
}
|
||
this.clear();
|
||
await this.sleep(1000);
|
||
}
|
||
}
|
||
|
||
stop() {
|
||
this.running = false;
|
||
}
|
||
|
||
async execute(step) {
|
||
switch (step.type) {
|
||
case "prompt":
|
||
this.append(`<span class="t-prompt">${step.text}</span>`);
|
||
break;
|
||
case "type":
|
||
for (const char of step.text) {
|
||
if (!this.running) return;
|
||
this.append(`<span class="t-cmd">${char}</span>`);
|
||
await this.sleep(step.delay || 30);
|
||
}
|
||
break;
|
||
case "output":
|
||
for (const line of step.lines) {
|
||
if (!this.running) return;
|
||
this.append("\n" + line);
|
||
await this.sleep(50);
|
||
}
|
||
break;
|
||
case "pause":
|
||
await this.sleep(step.ms);
|
||
break;
|
||
case "clear":
|
||
this.clear();
|
||
break;
|
||
}
|
||
}
|
||
|
||
append(html) {
|
||
this.content += html;
|
||
this.render();
|
||
}
|
||
|
||
render() {
|
||
this.container.innerHTML = this.content + CURSOR;
|
||
this.container.scrollTop = this.container.scrollHeight;
|
||
}
|
||
|
||
clear() {
|
||
this.content = "";
|
||
this.container.innerHTML = "";
|
||
}
|
||
|
||
sleep(ms) {
|
||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||
}
|
||
}
|
||
|
||
// --- Noise Overlay (ported from hermes-chat NoiseOverlay) ---
|
||
function initNoiseOverlay() {
|
||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||
if (typeof THREE === "undefined") return;
|
||
|
||
const canvas = document.getElementById("noise-overlay");
|
||
if (!canvas) return;
|
||
|
||
const vertexShader = `
|
||
varying vec2 vUv;
|
||
void main() {
|
||
vUv = uv;
|
||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||
}
|
||
`;
|
||
|
||
const fragmentShader = `
|
||
uniform vec2 uRes;
|
||
uniform float uDpr, uSize, uDensity, uOpacity;
|
||
uniform vec3 uColor;
|
||
varying vec2 vUv;
|
||
|
||
float hash(vec2 p) {
|
||
vec3 p3 = fract(vec3(p.xyx) * 0.1031);
|
||
p3 += dot(p3, p3.yzx + 33.33);
|
||
return fract((p3.x + p3.y) * p3.z);
|
||
}
|
||
|
||
void main() {
|
||
float n = hash(floor(vUv * uRes / (uSize * uDpr)));
|
||
gl_FragColor = vec4(uColor, step(1.0 - uDensity, n)) * uOpacity;
|
||
}
|
||
`;
|
||
|
||
function hexToVec3(hex) {
|
||
const c = hex.replace("#", "");
|
||
return new THREE.Vector3(
|
||
parseInt(c.substring(0, 2), 16) / 255,
|
||
parseInt(c.substring(2, 4), 16) / 255,
|
||
parseInt(c.substring(4, 6), 16) / 255,
|
||
);
|
||
}
|
||
|
||
const renderer = new THREE.WebGLRenderer({
|
||
alpha: true,
|
||
canvas,
|
||
premultipliedAlpha: false,
|
||
});
|
||
renderer.setClearColor(0x000000, 0);
|
||
|
||
const scene = new THREE.Scene();
|
||
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
|
||
const geo = new THREE.PlaneGeometry(2, 2);
|
||
|
||
const mat = new THREE.ShaderMaterial({
|
||
vertexShader,
|
||
fragmentShader,
|
||
transparent: true,
|
||
uniforms: {
|
||
uColor: { value: hexToVec3("#8090BB") },
|
||
uDensity: { value: 0.1 },
|
||
uDpr: { value: 1 },
|
||
uOpacity: { value: 0.4 },
|
||
uRes: { value: new THREE.Vector2() },
|
||
uSize: { value: 1.0 },
|
||
},
|
||
});
|
||
|
||
scene.add(new THREE.Mesh(geo, mat));
|
||
|
||
function resize() {
|
||
const dpr = window.devicePixelRatio;
|
||
const w = window.innerWidth;
|
||
const h = window.innerHeight;
|
||
renderer.setSize(w, h);
|
||
renderer.setPixelRatio(dpr);
|
||
mat.uniforms.uRes.value.set(w * dpr, h * dpr);
|
||
mat.uniforms.uDpr.value = dpr;
|
||
}
|
||
|
||
resize();
|
||
window.addEventListener("resize", resize);
|
||
|
||
function loop() {
|
||
requestAnimationFrame(loop);
|
||
renderer.render(scene, camera);
|
||
}
|
||
loop();
|
||
}
|
||
|
||
// --- Initialize ---
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const detectedPlatform = detectPlatform();
|
||
switchPlatform(detectedPlatform);
|
||
|
||
initScrollAnimations();
|
||
initNoiseOverlay();
|
||
|
||
const terminalEl = document.getElementById("terminal-demo");
|
||
|
||
if (terminalEl) {
|
||
const demo = new TerminalDemo(terminalEl);
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
demo.start();
|
||
} else {
|
||
demo.stop();
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.3 },
|
||
);
|
||
|
||
observer.observe(document.querySelector(".terminal-window"));
|
||
}
|
||
|
||
const nav = document.querySelector(".nav");
|
||
let ticking = false;
|
||
window.addEventListener("scroll", () => {
|
||
if (!ticking) {
|
||
requestAnimationFrame(() => {
|
||
if (window.scrollY > 50) {
|
||
nav.style.borderBottomColor = "rgba(48, 80, 255, 0.15)";
|
||
} else {
|
||
nav.style.borderBottomColor = "";
|
||
}
|
||
ticking = false;
|
||
});
|
||
ticking = true;
|
||
}
|
||
});
|
||
});
|