Aether

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

1. 01

   WebGL hero that sells the product

   Interactive Three.js scene via React Three Fiber - cinematic first impression without a generic kit look.

2. 02

   One-page SaaS story

   Hero, logos, features, steps, showcase, pricing, and FAQ share one Aether brand system.

3. 03

   Motion with restraint

   Framer Motion + Lenis smooth scroll; the canvas pauses when off-screen and respects reduced motion.

4. 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