Lapse

Lapse is a dark, motion-led website template for AI and SaaS products, shipped as an identical nine-page site in both Astro and Next.js 16, with static output and no UI framework.

What is Lapse?

Lapse is an MIT-licensed theme for AI and SaaS product sites, published by Startfrom. It takes JSON page copy, a shared plans file and Markdown blog posts as input, and produces a static site of nine routes. The same design is delivered twice: an Astro 7 project at the repository root and a Next.js 16 App Router / React 19 version under next/, generated from the Astro source by two build scripts so the two never drift.

Key Features

• Dual framework build — Astro 7 at the root (npm run build outputs to dist/) and Next.js 16 with static export under next/ (npm run build outputs to out/); use either alone.
• No UI framework — every interaction is a small vanilla JavaScript module, loaded on demand from data-fx="name" attributes via src/scripts/entry.js, with one module per behaviour in src/scripts/fx/.
• Scroll-pinned storytelling — a "What changes" section whose four cards slide sideways while pinned, and a "How it works" stage where four step cards fly in and out and the step number lights up.
• Pricing system — monthly/annual toggle, a sticky comparison table that becomes tabs on tablet and phone, and an FAQ; plans, monthly and annual prices live in src/content/plans.json and are shared by the home and pricing pages.
• WebGL effects written from scratch — a closing call to action image rebuilt from 45,000 cursor-pushable particles, testimonials on an endless vertical ticker over an animated WebGL line field, and a 404 shard field where clicks send shockwave rings and press-and-hold gathers shards.
• Markdown blog — category tabs, a hover accordion of recent posts, and posts where a bold-first blockquote becomes a callout, an ordered list becomes numbered steps, and a figure element draws a bar chart; the schema in src/content.config.ts fails the build on a typo.
• Accessibility and resilience — honours prefers-reduced-motion, and every page reads correctly with JavaScript off.
• Self-hosted fonts — Figtree, Fragment Mono and Climate Crisis via Fontsource, under the SIL Open Font License 1.1.

Who is it for?

• SaaS and AI founders launching a product site: drop in page copy from src/content/pages/*.json and ship a nine-page marketing site without writing animation code.
• Astro developers who need a Next.js hand-off: the next/ folder contains the same markup and content files, so a team can pick whichever framework their host or codebase prefers.
• Content-heavy teams: the Markdown blog and category tabs suit teams publishing feature explainers, with typed frontmatter that fails the build on malformed cards.

What can you do with Lapse?

• Pricing page owners: configure monthly and annual prices once in plans.json and both the home and pricing pages update, including the comparison table.
• Teams collecting leads: point PUBLIC_FORM_ENDPOINT at Formspree, Basin or a custom API to receive contact-form submissions; unset, the form only shows the sending, sent and error states.
• Analytics-inclined developers: set PUBLIC_VERCEL_ANALYTICS to true to load Vercel Web Analytics and Speed Insights.

How does Lapse work?

Install dependencies, run npm run dev for a local server (port 4321 for Astro, 3000 for Next.js), then npm run build and publish the output folder to any static host. Set site in astro.config.mjs to your domain so canonical URLs and social images resolve correctly.

Pricing

Lapse is free and MIT licensed, with no runtime dependencies.