Axis

About This Template

Axis is an engineered-cinematic product-launch template for electric vehicles, hardware, and devices. Seven pages cover the launch story, a design-chapter narrative, a full technical spec sheet with a Performance / Track Edition toggle, a live configurator with a reservation form, and a build-updates journal backed by a Markdown collection. The hero pins and scrubs a product video frame by frame against scroll while a four-figure instrument cluster counts up and snap-locks acid lime, and the Archivo variable headline morphs its weight and width axes with scroll progress. Below it a pinned horizontal gallery pans a seven-photo rail sideways, and the reserve page prices three variants, six paint finishes, four wheel sets, four options, and three care packages in real time. Graphite canvas, HUD crosshair cursor, feTurbulence grain, and coarse-pointer fallbacks on every pinned section.

Signature

The hero pins for roughly 3.2 viewport heights and scrubs a product video's currentTime directly from scroll progress — the MP4 is encoded with keyint=1 so every frame is a seek target, and a rAF loop issues the seek only when the delta exceeds a frame to keep the decoder from thrashing. Across the same scrub, four instrument counters tween up and snap-lock acid lime one after another like a cluster powering on, a vertical scrub rail fills, and the Archivo headline morphs its weight and width axes. On coarse pointers or reduced motion it falls back to a muted autoplay loop with locked counters and no pin.

Features

• 7 pages — Home, Design, Specs, Reserve, Updates, Update detail, 404
• Scroll-scrubbed video hero — ScrollTrigger pins the section and drives video.currentTime frame by frame
• Instrument cluster — four spec counters tween up and snap-lock to acid lime at scroll checkpoints, written DOM-direct
• Archivo variable headline morphs its wght and wdth axes with scroll progress
• Pinned horizontal gallery — vertical scroll pans a seven-photo rail sideways, with invalidateOnRefresh so it always lands flush
• Live configurator — 3 variants, 6 paint finishes, 4 wheel sets, 4 options and 3 care packages with a running total
• Reservation form with per-field validation, region select and a $500 deposit summary (UI state only, no backend)
• Full spec sheet with a Performance / Track Edition toggle across grouped powertrain, battery, charging and chassis tables
• HUD crosshair cursor driven by data-cursor and data-cursor-label attributes on any element
• Magnetic CTA buttons — global GSAP quickTo attraction with configurable per-button strength
• Updates content collection — 3 Markdown entries with a typed Zod schema and category enum
• Design story page — chapters, a video moment, pull quote, and a materials & process breakdown
• Lenis smooth scroll + Astro View Transitions with full ScrollTrigger kill/refresh lifecycle
• Reduced-motion and coarse-pointer fallbacks on every pinned section — autoplay loop instead of scrub, native overflow scroll instead of pin
• SEO — Product JSON-LD, Open Graph, canonical URLs, sitemap and robots.txt; 25 images optimized to AVIF + WebP through a shared getImage() helper
• TypeScript strict with noUncheckedIndexedAccess — zero any

Deployment