Kairo

Kairo is an Astro + Tailwind CSS v4 SaaS marketing template that ships a fully realized demo brand (a fictional signal-intelligence product) and ships all copy, links, numbers, and images from editable data files rather than components.

What is Kairo?

Kairo is a multi-page marketing template for SaaS products, built with Astro 7, Tailwind CSS 4, and GSAP 3 (ScrollTrigger, SplitText, Flip). It produces a fully static site in dist/ that can be deployed to any static host such as Vercel, Netlify, Cloudflare Pages, or GitHub Pages. Content is edited in data/*.ts files and Markdown collections, so components rarely need changes. It is distributed under the MIT License for source code, with third-party photos and fonts under separate terms.

Key Features

• Astro 7 + Tailwind CSS 4 — static output in dist/, design tokens in styles/variables.css (--color-ink, --color-bone), accent color set at runtime from data/site.ts.
• Motion system — GSAP 3 with ScrollTrigger, SplitText and Flip, plus Lenis smooth scroll and NumberFlow counters; each behavior lives in its own file under components/animation/init/.
• Cinematic home loader — booting data modules, drawing ring, photo lens and iris reveal; the ring flies into the nav logo, and can be disabled by removing the preloader prop.
• Page transitions — staggered columns with the destination name on a standard multi-page site (no client router required).
• Scroll stories — a pinned three-act product story, a tabbed 3D card deck, a horizontal case-study pan, and a draggable 3D testimonial ring.
• Eight routes — /, /customers, /customers/[slug], /pricing, /journal, /journal/[slug], /about, and /404.
• Markdown collections — customer stories and journal posts defined in data/customers/*.md and data/journal/*.md, with schemas in content.config.ts; list pages, filters, detail pages and next links update automatically.
• Accessibility and SEO — shared reduced-motion switch, keyboard support on sliders, toggles and accordions, semantic markup, per-page titles/descriptions/canonical URLs, and generated Open Graph images via scripts/og/generate-all.mjs.

Who is it for?

• SaaS founders launching a marketing site: edit data/site.ts for brand, accent color and CTAs, then deploy the static build.
• Front-end developers who want advanced motion: study or reuse the isolated GSAP behaviors in components/animation/init/ for loaders, transitions and scroll-triggered sections.
• Designers rebranding a template: change fonts in astro.config.ts, palette tokens in styles/variables.css, and favicon in public/favicon.svg without touching components.
• Content teams maintaining customer stories and a blog: add Markdown files to data/customers/ or data/journal/ and the list pages, filters and detail pages regenerate.

What can you do with Kairo?

• Rebrand quickly: a single data/site.ts file controls the logo, footer wordmark, page titles, transition label and both call-to-action buttons.
• Ship a blog and case-study library: Markdown files with fields like order, client, industry, results and quote (for customers) or title, excerpt, category, date, readTime, cover, author and featured (for journal) populate all pages.
• Connect real forms: replace the setTimeout simulations in components/animation/init/newsletter.ts and sales-form.ts with a fetch to a form service such as Formspree or a serverless function.
• Swap demo photography: place images in assets/images/ (roughly 2000px wide for full-bleed, 1400px for portraits) and Astro optimizes them into responsive WebP at build time.

How does it work?

Install dependencies with Bun (or npm, pnpm, yarn), then run bun run dev to start the server at http://localhost:4321. Use bun run build to produce the static site in dist/, bun run preview to test the production build, bun run check to type-check .astro and .ts files, and bun run format for Prettier. The project root itself is the source directory (no src/ folder), with @/ resolving to the root.

Pricing

Kairo's source code is released under the MIT License. Demo photos from Lummi and fonts (Cabinet Grotesk and General Sans via Fontshare, JetBrains Mono) are third-party content not covered by the MIT License.

FAQ

Is Kairo free to use?

The source code is released under the MIT License. However, the demo photos from Lummi and the fonts are third-party content with their own terms and are not covered by MIT, so review the LICENSE file before redistributing.

What framework does Kairo use?

Kairo is built with Astro 7 and Tailwind CSS 4, with GSAP 3 for animation, Lenis for smooth scrolling, NumberFlow for counters, Phosphor icons, and TypeScript. Bun is used in the examples, but npm, pnpm and yarn also work.

Does Kairo include a working contact form?

The newsletter and sales forms are front-end only: they validate input and show loading, success and error states, then simulate a response. To make them live, replace the setTimeout calls with a fetch to your form service.

How do I turn off the home loader or page transitions?

Remove the preloader prop from <Layout preloader> in pages/index.astro to disable the loader, or delete components/animation/init/transition.ts to disable page transitions. Visitors with reduced motion enabled automatically get a static, fully readable site.

Does Kairo support reduced motion?

Yes. A shared reduced-motion switch is built in, and visitors with reduced motion turned on get a static, fully readable site with nothing extra to configure.