Kairo is a dark, motion-first marketing theme for SaaS products and startups. It ships with a fictional demo brand so the preview looks real, and every word, link, number and image comes from data files you can edit without touching a component.
Pages Home, Customers with filters, customer story detail, Pricing, Journal, journal article detail, About and a 404 page. Customer stories and journal posts are Markdown content collections.
Motion A home loader with booting data modules and a photo lens, whose ring flies into the nav logo. Column page transitions on a normal multi-page site. A live canvas signal field in the hero, a pinned three-act product story, a stacked card deck, a horizontal case-study pan, a draggable 3D testimonial ring and a footer wordmark that lifts toward the cursor. Numbers roll in with NumberFlow.
Easy to rebrand Change the name, accent colour, links and calls to action in one file (data/site.ts). The footer wordmark resizes to fit any brand name, and a script regenerates the Open Graph images for every page.
Built right Astro 7, Tailwind CSS 4, GSAP with ScrollTrigger and SplitText, Lenis smooth scroll and TypeScript. Optimised images with astro:assets, per-page SEO and share images, keyboard support, and a full reduced-motion fallback where every section stays readable.
License MIT for the code. Demo photos are from Lummi and fonts are from Fontshare under their own licences.
