Flux: Animated AI & SaaS Landing Page Template (Three.js Particle Morph + GSAP ScrollTrigger)

Live demo: https://flux-ai-landing-demo.vercel.app

Flux is a polished, dark landing page for AI products, SaaS tools, dev tools and startups. The hero has a GPU particle cloud that visitors can push around with the pointer. In the pinned "How it works" section, scrolling morphs the particles from a sphere to a torus to a data wave to a double helix, and the copy for each step crossfades along with it.

Under the motion is a complete, conversion-ready page: glass nav, hero with an animated "ask a question" card, logo strip, 3-step story, bento features with spotlight hover, metrics with a drawn chart, pricing with a monthly/yearly toggle, FAQ, CTA with an email form, and footer.

It's plain Three.js + GSAP + Vite and easy to rebrand: copy in index.html, brand colours in CSS variables, particle colours/count/shapes in one file. It respects prefers-reduced-motion, ships a CSS fallback for browsers without WebGL, and drops to 9k particles on phones.

Features:

- ✨ One GPU particle system, 4 morph shapes, staggered per-particle timing, pointer repulsion, rim glow

- 🎬 ScrollTrigger: masked word reveals, pinned 3-step story driving the morph, count-ups, drawn chart line

- 💳 Pricing with an animated monthly/yearly toggle (values in data attributes)

- 🧱 Bento feature grid, FAQ (native <details>), CTA email form ready for Formspree/ConvertKit/Mailchimp

- ⚡ Lighthouse (mobile, live demo): Performance 94, Accessibility 100, Best Practices 100, SEO 100

- 🧘 Reduced-motion support + on-page toggle. No-WebGL CSS fallback

- 📱 Mobile: 9k particles, DPR cap 1.5, lazy scene init, pauses when hidden

- 🔤 Self-hosted OFL fonts (Inter Tight, Instrument Serif)