HTMLSaaSCorporate Website

lumen-saas-landing-page-template — HTML SaaS Template

By MiddleSugar7000

Lumen is a free MIT-licensed SaaS / AI landing page template built with pure HTML, CSS, and JavaScript around a Three.js scene that changes with scrolling, with no build step required.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

A single scroll-driven procedural Three.js scene: a liquid chrome core, glass rings, and a particle field transform from a halo to a sphere to a GPU fabric in the pinned story section

02

GSAP ScrollTrigger and SplitText combined with Lenis smooth scrolling to enable word-by-word headlines, scroll-filled text, stacked cards, and parallax

03

The Bento grid contains seven live mini interfaces, such as a latency line chart, model routing, typing terminal, and autoscaling bars, all drawn with HTML/SVG

04

13 page sections covering Hero, pricing (monthly/yearly toggle), FAQ accordion, testimonials, and final CTA

05

Pure HTML/CSS/JS with no framework, no npm, and no build step, loading dependencies via CDN

06

Colors, border radii, and easing are controlled centrally through CSS variables, with support for prefers-reduced-motion and keyboard focus states

Template Details

Lumen is a free landing page template for SaaS, AI, and developer tool products, released under the MIT license. The code is pure HTML, CSS, and JavaScript, with no framework, npm, or build step. The page has a dark, cinematic tone and is built around a continuous Three.js scene: a liquid chrome core and glass rings dissolve into roughly 11,000 particles as you scroll, then transform into a sphere and a GPU fabric, and finally return as a rising "sun" at the final CTA.

Motion is driven by GSAP ScrollTrigger and SplitText, plus Lenis smooth scrolling, and includes word-by-word headline reveals, scroll-filled text, a console model that tilts into place, stacked cards, scroll counters, and parallax. The page has 13 sections: Hero, logo marquee, Statement, pinned 3D story, Bento feature grid, console model, stats, How it works, testimonials, pricing (monthly/yearly toggle), FAQ, final CTA, and footer. The mini interfaces inside the Bento grid (latency line chart, model routing, typing terminal, autoscaling bars, toggles, uptime ring, cost meter) are all built with HTML/SVG, with no images.

The template provides CSS variables for colors, border radii, and easing; the accent color must also be changed at the top of js/scene.js. Copy, pricing, and FAQ are written directly in index.html, the 3D scene and scroll choreography are in js/scene.js, and motion and mini interfaces are in js/main.js. The page includes semantic headings, a meta description, Open Graph tags, and a theme color, and supports keyboard focus states and prefers-reduced-motion.

Usage limitations: the Three.js scene loads as ES modules via an import map, so opening index.html directly by double-clicking will be blocked by the browser; you need to host the directory with any static server. The company names, logos, quotes, and numbers on the page are placeholders, and the people avatars come from Unsplash and should be replaced with your own assets; third-party fonts, images, and icons need to be checked separately under their respective licenses.

HTMLSaaSCorporate Website

Is it right for your project?

Use Cases

  • Build a launch or waitlist landing page for an AI inference, API, or developer tool product
  • Create a dark, technical marketing homepage for a cloud platform or B2B SaaS product
  • Deploy as a static site to GitHub Pages, Netlify, Vercel, or Cloudflare Pages
  • Use as a reference page for learning Three.js scroll-driven scenes and GSAP ScrollTrigger choreography

Suitable For

  • SaaS and AI product teams that need a dark, cinematic visual style
  • Front-end developers using pure HTML/CSS/JS who do not want to introduce build tools
  • Indie developers or freelancers who need to quickly replace copy and colors to go live
  • Developers who want to study scroll-driven WebGL scenes and motion choreography

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, host the directory with a static server (e.g., npx serve . or python -m http.server); opening index.html directly will be blocked by the browser due to ES modules and the import map

  2. 2

    Colors, border radii, and easing are modified in the :root variables in css/style.css; the accent color must also be changed at the top of js/scene.js as ACCENT

  3. 3

    Copy, pricing, and FAQ are edited directly in index.html; the 3D scene and scroll choreography are in js/scene.js, and motion and mini interfaces are in js/main.js

  4. 4

    The company names, logos, quotes, numbers, and Unsplash avatars on the page are placeholders and should be replaced with your own assets before launch

  5. 5

    Remove the <aside class="promo"> block in index.html to remove the template attribution badge

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free MIT-licensed version in the public repository; the free scope applies to that version's code and does not mean external services or third-party assets are free.

Must comply with when using

  • You may use, modify, commercialize, and distribute this version's code for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The directory must be hosted with a static server (e.g., npx serve . or python -m http.server) to run; opening index.html directly by double-clicking will be blocked by the browser due to ES modules and the import map, and the 3D scene will not load.
  • The people avatars on the page come from the external Unsplash service and should be replaced with your own assets, and Unsplash's asset license should be checked separately.
  • Three.js, GSAP, Lenis, and Google Fonts are loaded via CDN, so deployment depends on these external services being available, and their respective licenses must be followed.
  • The company names, logos, quotes, and numbers on the page are placeholders and must be replaced with real information before launch.
  • Demo images, fonts, icons, and other third-party assets need to be checked under their respective licenses; the code's MIT license alone cannot be used to judge them.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Serve the folder rather than double-clicking `index.html`: the Three.js scene is an ES module loaded through an import map, which browsers block on `file://`.

Original README

Portrait photos load from [Unsplash](https://unsplash.com) and should be replaced with your own.

Original README

Everything is loaded from CDNs.

Original README

Lumen is a fictional company; names, logos, quotes and numbers on the page are placeholder content.

Original README
https://github.com/MiddleSugar7000/lumen-saas-landing-page-template/blob/main/LICENSEhttps://github.com/MiddleSugar7000/lumen-saas-landing-page-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 88 / 100
Technologies
HTML
Website type
SaaS · Corporate Website
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-10-01
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 25411af0a04c5c080bfe6a03fb713afb46bd6e9a85ca7c05d0c4a2bbe8ac54aa

2026-10-02T15:35:18.731Z

Source file / repository
<!--
  Lumen: free SaaS / AI landing page template (HTML, GSAP, Lenis, Three.js). MIT licensed.
  Made by MiddleSugar7000, freelance full-stack developer: https://middlesugar7000.xyz
-->

<a href="https://middlesugar7000.github.io/lumen-saas-landing-page-template/">
  <img src=".github/assets/hero.svg" alt="Lumen, a free dark SaaS landing page template with a scroll-driven Three.js scene, built with HTML, GSAP, Lenis and Three.js" width="100%">
</a>

<p align="center">
  <a href="https://middlesugar7000.github.io/lumen-saas-landing-page-template/"><img src=".github/assets/btn-demo.svg" alt="Live demo" height="56"></a>&nbsp;
  <a href="https://github.com/MiddleSugar7000/lumen-saas-landing-page-template/generate"><img src=".github/assets/btn-use.svg" alt="Use this template" height="56"></a>&nbsp;
  <a href="https://github.com/MiddleSugar7000/lumen-saas-landing-page-template/archive/refs/heads/main.zip"><img src=".github/assets/btn-download.svg" alt="Download ZIP" height="56"></a>&nbsp;
  <a href="https://github.com/MiddleSugar7000/lumen-saas-landing-page-template/stargazers"><img src=".github/assets/btn-star.svg" alt="Star on GitHub" height="56"></a>
</p>

<p align="center">
  <img alt="License: MIT" src="https://img.shields.io/badge/license-MIT-FF6A2B?style=flat-square&labelColor=07080B">
  <img alt="No build step" src="https://img.shields.io/badge/build-none%20needed-F4F5F7?style=flat-square&labelColor=07080B">
  <img alt="Three.js" src="https://img.shields.io/badge/Three.js-scroll--driven%203D-FF6A2B?style=flat-square&labelColor=07080B">
  <img alt="GSAP" src="https://img.shields.io/badge/GSAP-ScrollTrigger%20%2B%20SplitText-F4F5F7?style=flat-square&labelColor=07080B">
  <a href="https://middlesugar7000.xyz"><img alt="Made by MiddleSugar7000" src="https://img.shields.io/badge/made%20by-MiddleSugar7000-FF6A2B?style=flat-square&labelColor=07080B"></a>
</p>

# Lumen: Free SaaS Landing Page Template with Three.js (HTML + GSAP + Lenis)

**Lumen is a free, MIT-licensed landing page template for SaaS, AI and developer-tool products.** It's a dark, cinematic page for a fictional AI inference cloud, built around one persistent Three.js scene: a liquid chrome core with a glass ring that, as you scroll, dissolves into 11,000 particles that become a globe and then a GPU fabric. Around it: GSAP ScrollTrigger motion, Lenis smooth scroll, a bento grid of live mini UIs, a console mockup, pricing, FAQ and more. Plain HTML, CSS and JS: no framework, no npm, no build step.

Use it for an AI product, API, dev tool, cloud platform, B2B SaaS, startup launch or waitlist page. Swap the copy and you have a premium launch page in an afternoon.

> 🛠️ **Want one built for your own product?** This template was designed and coded by **[MiddleSugar7000](https://middlesugar7000.xyz)**, a freelance full-stack developer. Custom landing pages from **$450**, delivered in 48–72 hours. **[Hire me →](https://middlesugar7000.xyz/#contact)**

---

## Contents

- [Preview](#preview)
- [Features](#features)
- [Quick start](#quick-start)
- [Customize it](#customize-it)
- [Page sections](#page-sections)
- [Performance](#performance)
- [Tech stack](#tech-stack)
- [FAQ](#faq)
- [License](#license)
- [Need a custom landing page?](#need-a-custom-landing-page)

## Preview

<a href="https://middlesugar7000.github.io/lumen-saas-landing-page-template/">
  <img src=".github/assets/showcase.svg" alt="Screenshots of the Lumen SaaS landing page template: hero with liquid chrome core, pinned particle globe, bento grid with live mini UIs, console dashboard mockup" width="100%">
</a>

## Features

<img src=".github/assets/features.svg" alt="Template features: scroll-driven WebGL scene, GSAP and Lenis motion, live mini UIs, adaptive quality, no build step" width="100%">

- **One scroll-driven 3D scene.** A procedural Three.js world (no model files): liquid chrome core, fresnel glass ring, chrome orbits and a particle field that morphs halo → globe → GPU fabric in a pinned story section, then returns as a rising "sun" behind the final CTA.
- **Motion with weight.** Lenis smooth scroll, GSAP ScrollTrigger + SplitText: word-by-word hero reveal, scroll-fill statement text, a console mockup that tilts into place, stacking cards, rolling counters, parallax.
- **Live mini UIs.** Latency sparkline that updates in real time, model router with travelling packets, a typing terminal, autoscaling bars, flipping toggles, uptime ring, spend meter. All HTML/SVG, no images.
- **13 sections.** Hero, logos, statement, 3D story, bento features, console, stats, how-it-works, testimonials, pricing with monthly/yearly toggle, FAQ, CTA, footer.
- **Fast on big screens.** A render-pixel budget and automatic quality scaling keep it smooth on 1440p/4K monitors and laptops (see [Performance](#performance)).
- **Ember Dark design system.** Near-black blue-tinted surfaces, one ember accent (`#FF6A2B`), Geist + Instrument Serif typography, hairline borders.
- **Responsive and accessible.** Fluid `clamp()` type, mobile layouts, keyboard focus states, and full `prefers-reduced-motion` support.
- **SEO-ready.** Semantic headings, meta description, Open Graph tags and theme color.

## Quick start

```bash
git clone https://github.com/MiddleSugar7000/lumen-saas-landing-page-template.git
cd lumen-saas-landing-page-template
npx serve .
```

Serve the folder rather than double-clicking `index.html`: the Three.js scene is an ES module loaded through an import map, which browsers block on `file://`. Any static server works (`python -m http.server` too).

**Deploy for free:** push to GitHub and enable **GitHub Pages**, or drag the folder into Netlify, Vercel or Cloudflare Pages.

## Customize it

| What | Where |
| --- | --- |
| Colors, radii, easing | CSS variables on `:root` in `css/style.css` (`--bg-0`, `--accent`, `--r-lg`…) |
| Accent color | Change `--accent` / `--accent-2` in CSS and `ACCENT` at the top of `js/scene.js` |
| Fonts | The Google Fonts `<link>` in `<head>` (Geist, Geist Mono, Instrument Serif) |
| Copy, pricing, FAQ | Plain HTML in `index.html` |
| 3D scene, choreography | `js/scene.js` (materials, particle shapes, scroll poses in `frame()`) |
| Motion, mini UIs | `js/main.js` (ScrollTriggers, counters, charts, testimonials data) |
| Template credit badge | The `<aside class="promo">` block in `index.html`. Delete it to remove the badge |

## Page sections

1. **Hero** with the liquid chrome core, word-by-word headline and live telemetry strip
2. **Logo marquee** with masked edges
3. **Statement** that fills in as you scroll
4. **Pinned 3D story** with three stages: bring any model, run it everywhere (globe), scale on the fabric
5. **Bento features** with seven live mini UIs
6. **Console mockup** that tilts into place, with floating notifications
7. **Stats** with rolling counters over a giant faded number
8. **How it works** as stacking cards (terminal, region map, request trace)
9. **Testimonials** in three vertical marquee columns
10. **Pricing** with an animated monthly / yearly toggle
11. **FAQ** accordion
12. **Final CTA** with the core rising behind the headline
13. **Footer** with a giant wordmark

## Performance

The 3D scene renders at most ~2.1M pixels per frame (≈1080p), whatever the display. On a 1440p monitor with Windows scaling, the native resolution would be 6–8M pixels. Bloom runs at half resolution, the glass ring uses a cheap fresnel shader instead of a transmission pass, and the scene pauses whenever no 3D section is on screen. If frames still run long, resolution drops step by step and then bloom switches off. Under `prefers-reduced-motion` the camera stays calm and every scroll animation is disabled.

## Tech stack

HTML5 · CSS (custom properties) · JavaScript (ES modules) · [Three.js](https://threejs.org) r170 · [GSAP 3.13](https://gsap.com) + ScrollTrigger + SplitText · [Lenis](https://lenis.darkroom.engineering) · Google Fonts. Everything is loaded from CDNs.

## FAQ

**Is this SaaS landing page template really free?**
Yes. Lumen is released under the MIT license, so you can use it in personal and commercial projects, modify it and ship it. Keeping the license notice is the only requirement.

**Do I need React, Next.js or a build tool?**
No. It's plain HTML/CSS/JS. Serve the folder from any static host.

**What kind of product is it good for?**
AI products, APIs, developer tools, cloud and infrastructure platforms, B2B SaaS, startup launches and waitlists. Anything that benefits from a dark, technical, premium look.

**Can I remove the "Free template by MiddleSugar7000" badge?**
Yes. Delete the `<aside class="promo">` block in `index.html`. A link back is appreciated, never required.

**Will the 3D scene slow down my visitors' devices?**
It's built to scale down. It caps render resolution, pauses when off screen, and lowers quality automatically on slower GPUs.

**Who made this template?**
[MiddleSugar7000](https://middlesugar7000.xyz), a freelance full-stack developer who builds custom landing pages, SaaS products, APIs and AI integrations.

**Can you build a custom version for my business?**
Yes. Custom landing pages start at $450 and are typically delivered in 48–72 hours, with a fixed quote within 24 hours and no calls required. [Get in touch](https://middlesugar7000.xyz/#contact).

## License

[MIT](LICENSE) © MiddleSugar7000. A ⭐ or a link back to [middlesugar7000.xyz](https://middlesugar7000.xyz) is appreciated, never required.

Lumen is a fictional company; names, logos, quotes and numbers on the page are placeholder content. Portrait photos load from [Unsplash](https://unsplash.com) and should be replaced with your own.

## Need a custom landing page?

<a href="https://middlesugar7000.xyz/#contact">
  <img src=".github/assets/hire.svg" alt="Want one built for your product? Hire MiddleSugar7000, freelance full-stack developer. Custom landing pages from $450, SaaS MVPs from $950 and AI integrations from $650." width="100%">
</a>

<p align="center">
  <a href="https://middlesugar7000.xyz/#contact"><img src=".github/assets/btn-hire.svg" alt="Hire me" height="56"></a>&nbsp;
  <a href="https://middlesugar7000.xyz"><img src=".github/assets/btn-portfolio.svg" alt="My portfolio" height="56"></a>
</p>

I'm **MiddleSugar7000**, a freelance full-stack developer. I design and build:

- **Custom landing pages:** from $450, 48–72 hours
- **Web apps and SaaS MVPs:** auth, PostgreSQL, Stripe / Dodo Payments / Whop checkout, from $950
- **APIs and AI integrations:** OpenAI, Anthropic Claude, Gemini, from $650

Text-only communication (Discord, Telegram, email or X), fixed quotes, weekly previews, and you own 100% of the code.

🌐 [middlesugar7000.xyz](https://middlesugar7000.xyz) · ✈️ [Telegram](https://t.me/middlesugar7000) · 💬 Discord: `middlesugar7000.main` · 📧 [[email protected]](mailto:[email protected])

More free templates: [VOLT Arc](https://github.com/MiddleSugar7000/volt-arc-landing-page-template), a cinematic product launch page.

<p align="center"><sub>Keywords: free SaaS landing page template, AI landing page template, dark landing page template, Three.js landing page, WebGL landing page, GSAP ScrollTrigger template, Lenis smooth scroll, startup landing page, developer tool website template, HTML landing page, MIT website template.</sub></p>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

mazer

mazer

Mazer is a free and open-source Bootstrap 5 admin dashboard and landing page template that does not depend on jQuery. It provides prebuilt releases, source builds, and CDN inclusion, and includes dark mode, perfect-scrollbar, and ApexCharts examples.

HTML · Admin dashboard

Freelancer

Freelancer

A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.

HTML · Portfolio

Creative

Creative

A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.

HTML · Corporate Website

startbootstrap-agency

startbootstrap-agency

Agency is a one-page Bootstrap portfolio theme from Start Bootstrap, MIT licensed. It includes a responsive portfolio grid with modal details and a preconfigured SB Forms contact form that requires an API token.

HTML · Corporate Website

startbootstrap-landing-page

startbootstrap-landing-page

A general-purpose Bootstrap landing page template from Start Bootstrap, MIT licensed, with a Pug/SCSS/npm build pipeline.

HTML · Corporate Website

Landing-Page

Landing-Page

A general-purpose landing page HTML template maintained by Tailwind Toolbox, written in pure HTML and loading the complete Tailwind CSS via CDN.

HTML · Corporate Website