Lenis Website

Setup

The usual process for Next.js based apps/websites:

1. Install node modules:

   $ pnpm i

2. Get the .env variables from Vercel (check .env.template), after installing Vercel CLI:

   $ vc link

   $ vc env pull

3. Set up GSAP authentication:

   Copy .npmrc.config to .npmrc and replace GSAP_AUTH_TOKEN with your token

4. Run development environment:

   $ pnpm dev

Stack

• Lenis - Smooth scroll library
• Tempus - Animation timing control
• Hamo - React hooks and utilities
• PNPM - Package manager
• Next.js - React framework
• Three.js - 3D graphics
• @react-three/drei - Three.js React utilities
• @react-three/fiber - Three.js React renderer
• GSAP Business - Animation library
• Sass Modules - CSS preprocessing
• Zustand - State management
• Next PWA - Progressive Web App support
• Next SEO - SEO optimization
• Next Sitemap - Sitemap generation
• @svgr/webpack - SVG imports

Code Style & Linting

• Eslint (Next and Prettier plugins)
• Prettier with the following settings:

  {
    "endOfLine": "auto",
    "semi": false,
    "singleQuote": true
  }

• Husky + lint-staged precommit hooks

Development Tools

• Bundle Analyzer - Analyze bundle sizes
• Duplicate Package Checker - Check for duplicate packages
• Stats.js - Performance monitoring
• Leva - Debug UI controls

Folder Structure

Alongside the usual Next.js folder structure (/public, /pages, etc.) We've added a few other folders:

• /assets: General Images/Videos and SVGs
• /components: Reusable components with their respective Sass files
• /config: General settings (mostly Leva for now)
• /hooks: Reusable Custom Hooks
• /layouts: High level layout components
• /lib: Reusable Scripts and State Store
• /styles: Global styles and Sass partials

Deployment

• Vercel - Hosting & Continuous Deployment
• GitHub - Version Control