Axiom Labs

About This Template

Axiom Labs is a frontier-AI research template for machine-learning labs, safety organizations, and model providers. Nine pages cover a research-paper archive with individual paper pages, a blog, a products page for model variants, an about page with a horizontally scrolling researcher filmstrip, careers, and usage-based pricing. The hero renders a 10,000-particle Three.js sphere that breathes on a sine displacement and expands when Lenis scroll velocity spikes, while the headline resolves out of Greek and mathematical glyphs via GSAP ScrambleText. Cormorant Garamond set against Geist creates the classical-meets-technical contrast the whole design runs on. Three color skins swap through a single data-skin attribute, and an animated SVG film-grain layer plus a radially masked crosshatch grid sit over every page.

Signature

The hero canvas runs a 10,000-point Three.js particle sphere on additive blending, each point displaced by its own sine phase so the whole constellation breathes. It subscribes to Lenis scroll velocity: scroll harder and the displacement strength climbs, so the sphere visibly expands and settles as you move. Over it, the headline starts as a block of Greek and mathematical glyphs and resolves character by character into the real sentence via GSAP ScrambleText.

Features

• 9 pages — Home, Research index, Research paper, Blog index, Blog post, Products, About, Careers, Pricing
• Three.js hero — 10,000-point particle sphere with additive blending, reacting to Lenis scroll velocity
• GSAP ScrambleText headline that resolves from a Greek/mathematical glyph set (01αβΓΔπΩ∂∇∑∫)
• 3 color skins on a data-skin attribute — parchment gold (default), zinc academic, amber ember
• 4 content collections — research (4 papers), blog (3 posts), team (4 members), products (3 models)
• Bento product grid with an animated shimmer-border gradient on the featured model card
• Animated stat counters (data-counter) with decimal support, fired once by ScrollTrigger
• Declarative reveal system — data-reveal fade / lines / words / blur / scale, powered by GSAP SplitText
• Scroll-velocity-reactive marquee — speed lerps up as Lenis reports faster scrolling
• Alternating research rows with clip-path wipe reveals (data-clip-reveal, left and right)
• About page with a horizontal filmstrip scroller for the core research team
• Masonry testimonial wall (CSS columns, 6 quotes) collapsing to 2 and 1 column
• Editorial pricing page — 3 token-allowance tiers (free, $49/mo, custom) as full-width rows with a feature matrix and a 3-question FAQ
• Animated SVG film grain (fractalNoise, 4% opacity, 10-step jitter) plus a radially masked crosshatch grid
• Astro View Transitions + Lenis smooth scroll, @astrojs/sitemap, canonical URLs and JSON-LD Organization
• TypeScript strict with noUncheckedIndexedAccess — zero any, prefers-reduced-motion honored globally

Deployment