Back to themes

Ferrum

A scroll-driven Astro template for freight and logistics companies: video hero, 3D network globe, live departures board and 8 pages.


Cost

Paid


Created by
Lauro Guedes

Ferrum is a motion-first Astro template for logistics, freight and supply-chain companies. Scroll drives the story: the home page climbs an aerial freight train in a 60 fps scrubbed video, hands off to rolling odometer stats, slides through a pinned services rail, turns a Three.js globe to draw each trade lane, and flips a split-flap departures board. Every motion scene has a reduced-motion version and every video has an image fallback.

Highlights

  • Scroll-scrubbed video hero with a load intro, smooth scrolling (Lenis) and five features that rise along the train
  • Three.js dot globe that draws 12 trade lanes as you scroll
  • Split-flap departures board, odometer stats, a route that draws itself, horizontal services rail
  • Separate portrait layouts for phones, not a squeezed desktop
  • Three-step quote form, shipment tracker with a demo timeline, offices, FAQ

Edit everything from content files

All copy, figures, links and images live in typed Astro content collections: site settings and lists in YAML, pages, services, industries and legal texts in Markdown. Components hold no copy, and the build tells you when a field is missing.

Ready for production

  • SEO: title templates, canonical URLs, Open Graph and X cards with per-page share images, JSON-LD (Organization, WebSite, BreadcrumbList, Service, FAQPage), sitemap and robots.txt
  • Cookie banner with Google Consent Mode v2; Google Tag Manager or GA4 from environment variables, loaded only after consent
  • Self-hosted fonts through the Astro Fonts API
  • Privacy, terms and cookie pages (the cookie table comes from the banner settings)
  • Static output for any host: Netlify, Vercel, Cloudflare, or plain files

Pages

Home, Services, Industries, Network, Track, About, Get a quote, 404, plus Privacy, Terms and Cookies.

Stack

Astro 7, TypeScript, GSAP with ScrollTrigger, Lenis, three.js and plain CSS with design tokens. No UI or CSS framework.

What you get

The full source, documentation for every content file and customization (colours, fonts, logo, sections, forms, motion, media, analytics, SEO, deployment), scripts to encode your own footage, and a single or extended commercial license. The brand, copy and figures are fictional demo content.