Axiom Labs

Sobre Este Template

Axiom Labs es una plantilla de investigación en IA de frontera para laboratorios de machine learning, organizaciones de safety y proveedores de modelos. Nueve páginas cubren un archivo de papers con página individual por publicación, blog, página de productos para variantes de modelo, un about con filmstrip horizontal de investigadores, careers y precios por uso. El hero renderiza una esfera Three.js de 10.000 partículas que respira con desplazamiento sinusoidal y se expande cuando sube la velocidad de scroll de Lenis, mientras el titular se resuelve desde glifos griegos y matemáticos con GSAP ScrambleText. Cormorant Garamond contra Geist genera el contraste clásico-técnico sobre el que se apoya todo el diseño. Tres skins de color se cambian con un solo atributo data-skin, y una capa de grano SVG animado más una grilla crosshatch enmascarada cubren todas las páginas.

Firma

El canvas del hero corre una esfera Three.js de 10.000 partículas con additive blending, cada punto desplazado por su propia fase sinusoidal para que toda la constelación respire. Está suscrita a la velocidad de scroll de Lenis: cuanto más fuerte haces scroll, mayor es la fuerza de desplazamiento, así que la esfera se expande y se asienta visiblemente mientras te mueves. Encima, el titular arranca como un bloque de glifos griegos y matemáticos y se resuelve carácter por carácter en la frase real vía GSAP ScrambleText.

Características

• 9 páginas — Inicio, Índice de Research, Paper, Índice de Blog, Post, Productos, About, Careers, Precios
• Hero Three.js — esfera de 10.000 partículas con additive blending que reacciona a la velocidad de scroll de Lenis
• Titular con GSAP ScrambleText que se resuelve desde un set de glifos griegos y matemáticos (01αβΓΔπΩ∂∇∑∫)
• 3 skins de color vía atributo data-skin — oro pergamino (default), zinc académico, ámbar ember
• 4 colecciones de contenido — research (4 papers), blog (3 posts), team (4 miembros), products (3 modelos)
• Grilla bento de productos con gradiente shimmer-border animado en la card del modelo destacado
• Contadores numéricos animados (data-counter) con soporte de decimales, disparados una vez por ScrollTrigger
• Sistema declarativo de reveals — data-reveal fade / lines / words / blur / scale, con GSAP SplitText
• Marquee reactivo a la velocidad de scroll — la velocidad hace lerp hacia arriba según reporta Lenis
• Filas de research alternadas con revelados clip-path (data-clip-reveal, izquierda y derecha)
• Página About con scroller horizontal tipo filmstrip para el equipo de investigación
• Muro de testimonios masonry (columnas CSS, 6 citas) que colapsa a 2 y 1 columna
• Página de precios editorial — 3 tiers por consumo de tokens (gratis, $49/mes, personalizado) en filas full-width con matriz de features y FAQ de 3 preguntas
• Grano SVG animado (fractalNoise, 4% de opacidad, jitter en 10 pasos) más grilla crosshatch enmascarada
• View Transitions de Astro + smooth scroll con Lenis, @astrojs/sitemap, URLs canónicas y JSON-LD Organization
• TypeScript strict con noUncheckedIndexedAccess — cero any, prefers-reduced-motion respetado globalmente

Despliegue