A modern React application template with advanced features including WebGL graphics, animations, and CMS integration. Satūs means "start" or "beginning" in Latin, serving as a foundation for new projects.

1. Install dependencies:

   bun install

2. Setup Vercel and environment variables:

   vercel link
   vercel env pull

3. Start development server:

   bun dev

├── app/                          # Next.js application pages and routes
│   └── (pages)/                  # Page components and layouts
├── components/                   # Reusable UI components
│   ├── button/                   # Button components
│   ├── form/                     # Form components
│   ├── animation/                # Animation components
│   └── ...                       # Other UI components
├── hooks/                        # Custom React hooks
├── intergrations/                # Third party integrations
│   ├── hubspot/                  # Hubspot form integration
│   ├── storyblok/                # Storyblok CMS integration
│   └── shopify/                  # Shopify integration
├── libs/                         # Utility libraries and functions
├── orchestra/                    # Debugging and development tools
└── webgl/                        # WebGL and 3D graphics
    ├── components/               # WebGL components
    ├── hooks/                    # WebGL-specific hooks
    └── utils/                    # WebGL utilities

• Framework & Runtime

  • Next.js App Router
  • Bun as JavaScript runtime and package manager
  • TypeScript for type safety

• 3D & Graphics

  • React Three Fiber & Drei
  • Custom WebGL shaders and materials
  • Advanced gradient animations with flowmap support
  • Three.js integration with optimized performance

• Animation & Interaction

  • Theatre.js for animation tooling
  • GSAP for advanced animations
  • Lenis for smooth scrolling
  • Hamo utilities

• Content Management

  • Storyblok headless CMS
  • Shopify e-commerce integration

• Development Tools

  • Biome for linting & formatting
  • Theatre.js Studio for animation debugging
  • Built-in debug tools at /orchestra
  • Hot module replacement
  • VSCode configuration included

• bun dev - Start development server with Turbo
• bun dev:https - Start development server with HTTPS
• bun setup:styles - Generate style configuration files
• bun typecheck - Run TypeScript type checking
• bun lint - Run Biome linting

• Theatre.js Studio
• FPS Meter
• Grid Debugger
• Minimap

• PostCSS with custom functions and utilities
• Tailwind CSS integration
• Typography system with SERVER MONO font
• Responsive units (mobile-vw, desktop-vw)
• CSS Modules for component styles
• Custom grid system (4 columns mobile, 12 columns desktop)
• Automatic dark/light theme support

• Pre-commit: Runs Biome to check and format staged files
• Post-merge: Automatically pulls latest environment variables from Vercel

• Detailed documentation available in the docs folder
• Component-specific documentation in respective directories
• HOW-TO.md for common procedures and best practices
• See GSAP Documentation and Storyblok Documentation for integration details

The project can be deployed on Vercel, Netlify, or any service supporting Next.js. See PROD-README.md for production-specific details.

MIT © darkroom.engineering