Trace

Sobre Este Template

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.

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.

Características

• 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
• 3 skins — Daybook (#F2F0E9 + #2438FF), Carbon (#0E0F0C + #5A6BFF), Ledger (#FCFBF7 + #1E2BCC) — puntos en la nav, localStorage y aplicación antes del paint para que no haya flash
• 5 colecciones de contenido — blog (3 posts), changelog (4 releases), docs (5 artículos), careers (3 puestos), integrations (8)
• Sección de docs con sidebar sticky, navegación anterior/siguiente entre artículos y una escala tipográfica propia .prose-trace
• Pricing con toggle de facturación mensual/anual (−20% anual) que recalcula al vuelo el precio del tier de pago Team — Solo sigue gratis y Scale es a presupuesto
• Marquee de integraciones — el único marquee del sitio, con máscara en los bordes y pausa en hover
• Acordeón de FAQ y formulario de contacto con estados idle/sending/sent/error, listo para conectar a PUBLIC_FORM_ENDPOINT (Formspree o Resend)
• Preparada para agentes de código — incluye AGENTS.md, CLAUDE.md, reglas .cursor y llms.txt para que un agente la extienda correctamente
• Fuentes variables self-hosted vía Fontsource — Archivo, Source Serif 4 y Geist Mono, sin peticiones externas de fuentes
• Islas static-first — la terminal del hero, docs y blog son totalmente legibles con cero JavaScript; el movimiento es mejora progresiva
• Smooth scroll con Lenis, prefers-reduced-motion respetado en todo el sitio, contraste AA, sitemap, URLs canónicas y Open Graph

Despliegue