Trace

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.

What’s inside

• 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/trace/. 13 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.