Cloudlight

Cloud storage landing page with a WebGL cloud hero, docking navigation, and interactive product storytelling

Built With

Next.js 16+
React 19
TypeScript
Tailwind v4
Motion
WebGL2
next-themes
Lucide

About this template

A landing page for a file transfer and cloud storage product, built around a WebGL cloud hero and a navigation bar that docks as you scroll. Cloudlight combines colorful product illustrations, interactive comparisons, and animated pricing with a clean layout that works in light and dark themes.

Special Features

  • WebGL cloud hero and animated interference fields
  • Docking navigation with desktop submenus and an animated mobile menu
  • Pointer-reactive file format grid
  • Scroll-driven manifesto and section entrances
  • Benchmark comparison with three selectable metrics
  • Team tabs and customer story carousel with manual controls
  • Monthly/yearly billing toggle with rolling prices
  • Responsive layouts and persistent light/dark theme selection
  • Keyboard controls and reduced-motion alternatives
  • Original branding, social images, structured data, and sitemap

Included Sections

  • Cloud hero with docking navigation and transfer window
  • File library introduction
  • Fictional customer logo row
  • Product capability cards
  • Interactive file format grid
  • Scroll-driven manifesto
  • Security and privacy illustrations
  • Selectable benchmark comparison
  • Team workspace tabs
  • Customer story carousel
  • Pricing with animated billing switch
  • FAQ accordion
  • Closing CTA with WebGL background
  • Footer with navigation and social links