Security

Dark-first editorial landing page with a WebGL curtain reveal, ASCII art, and chamfered UI

Built With

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

About this template

A dark-first landing page with a restrained editorial type system and interactive set pieces: a WebGL scroll-reveal curtain image, ASCII-art icons and portraits, a pinned duotone coverage gallery, count-up stats, and a chamfered cut UI language. Theme-aware with full dark mode and reduced-motion support.

Special Features

  • Light and dark mode via next-themes, dark-first design
  • WebGL scroll-reveal curtain image with duotone treatment
  • Canvas ASCII icons, portraits, and hero wave field
  • Pinned duotone coverage gallery
  • Scroll-triggered count-up stats
  • Chamfered cut-corner buttons and corner-plus motif
  • Smooth scroll with Lenis (auto-disabled for reduced motion)
  • Fully responsive
  • Optimized for accessibility with full reduced-motion fallbacks
  • SEO and Open Graph ready

Included Sections

  • Sticky nav with animated dropdown mega-menu
  • Hero with serif headline and ASCII wave backdrop
  • Chamfered product mockup with looping demo video
  • Trusted-by logo wall with corner crosshairs
  • Pinned duotone coverage gallery
  • Feature cards with live ASCII glyphs
  • Value prop with WebGL curtain reveal
  • Testimonials with ASCII portraits
  • Count-up stats panel
  • Case study statement with CTA
  • Pricing with monthly and yearly toggle
  • FAQ accordion
  • Final CTA
  • Footer with link columns and social icons