Trace

Trace es una plantilla de marketing para productos de agentes IA y IA vertical, construida con el instinto contrario al cliché de IA dark + neón: papel de laboratorio cálido y tinta con una única señal cobalto eléctrico. Trece páginas cubren la home, un recorrido de cómo funciona, integraciones, pricing con toggle mensual/anual, una sección de docs con sidebar sticky y páginas de artículo con navegación anterior/siguiente, changelog, blog con páginas de post, about, careers, contacto y 404. La firma es un reasoning trace: el hero va escribiendo un log de orquestador de siete líneas y el último paso de render imprime el propio titular. Después, un rail fijo a la izquierda indexa cada sección como paso numerado, y un diagrama de flujo de cinco nodos dibuja su espina al hacer scroll.

Qué incluye

• 13 páginas, Inicio, Cómo funciona, Integraciones, Pricing, Docs, Artículo de docs, Changelog, Blog, Post, About, Careers, Contacto, 404
• Hero de reasoning trace, un log de orquestador de siete líneas entra con stagger de 0.16s y termina en el paso render que imprime el titular
• Titular cinético de ancho variable, el eje wdth de Archivo hace scrub de 100 a 118 vía font-variation-settings mientras el hero sale de pantalla
• Trace rail persistente, un índice de pasos numerado que se construye solo a partir de los atributos data-step / data-step-label de las secciones y se resalta vía IntersectionObserver
• Diagrama de flujo autodibujado, el pipeline de agente de 5 nodos (Intent → Plan → Tool calls → Verify → Output) dibuja su espina con scrub vía stroke-dashoffset
• Cursor contextual, un punto más una etiqueta que muestra open / read / copy / send leyendo directamente los atributos data-cursor

La firma

El hero es un agente enseñando su trabajo. Un panel de terminal va escribiendo un log de orquestador de siete líneas, session.start, parse_intent, un plan con estimación de tokens y coste, dos tool calls y un pase de verificación con grounding, cada línea entrando con stagger de 0.16s y un caret parpadeando al final. La última línea dice render “Agents that show their work.” y el titular sube enmascarado palabra a palabra como si el log lo acabara de producir. Esa numeración de pasos continúa por toda la página en un rail fijo a la izquierda, y el eje de ancho de Archivo estira el titular de wdth 100 a 118 mientras el hero sale de pantalla.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/trace/. 13 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.