Trace

About This Template

Trace is a marketing template for AI-agent and vertical-AI products, built on the opposite instinct to the dark-neon AI cliché: warm lab-paper and ink with one electric cobalt signal. Thirteen pages cover the home, a how-it-works walkthrough, integrations, pricing with a monthly/annual toggle, a docs section with a sticky sidebar and prev/next article pages, a changelog, a blog with post pages, about, careers, contact and a 404. The signature is a reasoning trace — the hero streams a seven-line orchestrator log line by line, and the final render step outputs the headline itself. A persistent left rail then indexes every section as a numbered step, and a five-node flow diagram draws its spine as you scroll.

Signature

The hero is an agent showing its work. A terminal panel streams a seven-line orchestrator log — session.start, parse_intent, plan with token and cost estimates, two tool calls, a grounded verification pass — each line fading in on a 0.16s stagger with a blinking caret at the end. The last line reads render "Agents that show their work." and the headline masks up word by word as if the log had just produced it. That step numbering then continues down the page as a fixed left rail, and Archivo's width axis stretches the headline from wdth 100 to 118 as the hero scrolls away.

Features

• 13 pages — Home, How it works, Integrations, Pricing, Docs, Doc article, Changelog, Blog, Blog post, About, Careers, Contact, 404
• Reasoning-trace hero — a seven-line orchestrator log streams in on a 0.16s stagger, ending on the render step that outputs the headline
• Kinetic variable-width headline — Archivo's wdth axis scrubs from 100 to 118 via font-variation-settings as the hero scrolls away
• Persistent trace rail — a numbered step index that builds itself from data-step / data-step-label section attributes and highlights via IntersectionObserver
• Self-drawing flow diagram — the 5-node agent pipeline (Intent → Plan → Tool calls → Verify → Output) draws its spine on scrub via stroke-dashoffset
• Contextual cursor — a dot plus a label tag that reads open / read / copy / send straight from data-cursor attributes
• 3 skins — Daybook (#F2F0E9 + #2438FF), Carbon (#0E0F0C + #5A6BFF), Ledger (#FCFBF7 + #1E2BCC) — nav dots, localStorage, applied before paint so there is no flash
• 5 content collections — blog (3 posts), changelog (4 releases), docs (5 articles), careers (3 roles), integrations (8)
• Docs section with a sticky sidebar, prev/next article navigation and a dedicated .prose-trace typographic scale
• Pricing with a monthly/annual billing toggle (−20% annual) that reprices the paid Team tier in place — Solo stays free and Scale is quote-based
• Integrations marquee — the single marquee site-wide, edge-masked and paused on hover
• FAQ accordion and a contact form with idle/sending/sent/error states, ready to wire to PUBLIC_FORM_ENDPOINT (Formspree or Resend)
• AI-coding-agent ready — AGENTS.md, CLAUDE.md, .cursor rules and llms.txt ship with the template so an agent extends it correctly
• Self-hosted variable fonts via Fontsource — Archivo, Source Serif 4 and Geist Mono, no external font requests
• Static-first islands — the hero terminal, docs and blog are fully legible with zero JavaScript; motion is progressive enhancement
• Lenis smooth scroll, prefers-reduced-motion honored throughout, AA contrast, sitemap, canonical URLs and Open Graph

Deployment