AI App

Minimal landing page with scroll-driven set pieces, a WebGL hero, and a pinned phone walkthrough

Built With

Next.js 16+
React
TypeScript
Tailwind v4
Motion
WebGL
Three.js
React Three Fiber
Lenis
next-themes

About this template

A minimal landing page built around scroll-driven set pieces: a WebGL orbit field behind the hero, a video that grows as you scroll, a pinned phone walkthrough, a velocity-reactive gallery marquee, and parallax testimonial columns. Theme-aware with full dark mode and reduced-motion support.

Special Features

  • Light and dark mode via next-themes
  • WebGL orbit field hero with a custom SDF tile shader
  • Scroll-expanding video showcase with gated autoplay
  • Pinned phone walkthrough scrubbed by scroll
  • Velocity-reactive gallery marquee and integration rows
  • Smooth scroll with Lenis (auto-disabled for reduced motion)
  • Fully responsive
  • Optimized for accessibility with full reduced-motion fallbacks
  • SEO and Open Graph ready
  • Easy to customize from a single config

Included Sections

  • Expanding pill nav with morphing label and scroll readout
  • Hero with WebGL orbit field and intro loader
  • Video showcase that expands on scroll
  • Scroll-scrubbed manifesto statement
  • Features list with cursor-following image preview
  • Pinned phone walkthrough across three screens
  • Infinite gallery marquee that reacts to scroll velocity
  • Scroll-scrubbed integration pill rows
  • Parallax testimonial columns
  • Pricing with monthly and yearly toggle
  • FAQ accordion
  • Final CTA with fanned photo prints and magnetic button
  • Footer with link columns and oversized wordmark