Overview
Aether is a premium AI/SaaS landing page template built by SonoJS. It uses Next.js 16, React 19, Tailwind CSS 4, Three.js, Framer Motion, and Lenis to create a polished, interactive experience. The page includes a WebGL hero section, logo marquee, product features, how it works, a live studio showcase, pricing, FAQ, and footer CTAs. It uses Syne and DM Sans for typography, with customizable accent colors and a centralized site config for managing content. The hero animation loads on the client, pauses when out of view, and respects reduced-motion preferences. There’s no backend, authentication, or CMS to set up. The template is also easy to customize, fork, and deploy to GitHub Pages.
Highlights
- 01
WebGL hero that sells the product
Interactive Three.js scene via React Three Fiber - cinematic first impression without a generic kit look.
- 02
One-page SaaS story
Hero, logos, features, steps, showcase, pricing, and FAQ share one Aether brand system.
- 03
Motion with restraint
Framer Motion + Lenis smooth scroll; the canvas pauses when off-screen and respects reduced motion.
- 04
Edit content in one file
Brand name, copy, pricing, and FAQ live in content/site.ts - swap the demo brand before you ship.
You get
- Full Next.js 16 + React 19 + TypeScript source (Aether)
- WebGL hero (Three.js, @react-three/fiber, @react-three/drei)
- Landing sections: logos, features, steps, showcase, pricing, FAQ
- Framer Motion, Lenis, Tailwind CSS 4, Syne + DM Sans
- Central content config (content/site.ts)
- Static-friendly build for GitHub Pages
