{"id":13606366,"url":"https://github.com/darkroomengineering/satus","last_synced_at":"2025-05-15T09:08:23.347Z","repository":{"id":37247673,"uuid":"414351618","full_name":"darkroomengineering/satus","owner":"darkroomengineering","description":"Advanced Next.js App Router starter for content-driven sites","archived":false,"fork":false,"pushed_at":"2025-04-24T22:15:46.000Z","size":10465,"stargazers_count":656,"open_issues_count":1,"forks_count":60,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-24T22:25:34.546Z","etag":null,"topics":["approuter","boilerplate","example","gsap","lenis","nextjs","react-three-fiber","satus","starter","starter-kit","storyblok","theatrejs","three","vercel"],"latest_commit_sha":null,"homepage":"https://satus.darkroom.engineering/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/darkroomengineering.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["darkroomengineering"],"polar":"darkroomengineering"}},"created_at":"2021-10-06T19:54:34.000Z","updated_at":"2025-04-24T22:15:50.000Z","dependencies_parsed_at":"2024-04-09T09:50:11.698Z","dependency_job_id":"e303ee1e-fc4b-42a0-a610-c2542f2045a8","html_url":"https://github.com/darkroomengineering/satus","commit_stats":{"total_commits":476,"total_committers":12,"mean_commits":"39.666666666666664","dds":"0.39075630252100846","last_synced_commit":"bef3ebc1606d71fa0b16bb8bfb6943c98e51de6e"},"previous_names":["darkroomengineering/satus","studio-freight/satus"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Fsatus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Fsatus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Fsatus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Fsatus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darkroomengineering","download_url":"https://codeload.github.com/darkroomengineering/satus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310520,"owners_count":22049470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["approuter","boilerplate","example","gsap","lenis","nextjs","react-three-fiber","satus","starter","starter-kit","storyblok","theatrejs","three","vercel"],"created_at":"2024-08-01T19:01:08.546Z","updated_at":"2025-05-15T09:08:18.337Z","avatar_url":"https://github.com/darkroomengineering.png","language":"TypeScript","readme":"[![SATUS](https://assets.darkroom.engineering/satus/banner.gif)](https://github.com/darkroomengineering/satus)\n\n# Satūs\n\nA 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.\n\n## Quick Setup\n\n1. Install dependencies:\n   ```bash\n   bun install\n   ```\n\n2. Setup Vercel and environment variables:\n   ```bash\n   vercel link\n   vercel env pull\n   ```\n\n3. Start development server:\n   ```bash\n   bun dev\n   ```\n\n## Project Structure\n\n```\n├── app/                          # Next.js application pages and routes\n│   └── (pages)/                  # Page components and layouts\n├── components/                   # Reusable UI components\n│   ├── button/                   # Button components\n│   ├── form/                     # Form components\n│   ├── animation/                # Animation components\n│   └── ...                       # Other UI components\n├── hooks/                        # Custom React hooks\n├── intergrations/                # Third party integrations\n│   ├── hubspot/                  # Hubspot form integration\n│   ├── storyblok/                # Storyblok CMS integration\n│   └── shopify/                  # Shopify integration\n├── libs/                         # Utility libraries and functions\n├── orchestra/                    # Debugging and development tools\n├── styles/                       # Styling system configuration and utilities\n└── webgl/                        # WebGL and 3D graphics\n    ├── components/               # WebGL components\n    ├── hooks/                    # WebGL-specific hooks\n    └── utils/                    # WebGL utilities\n```\n\n## Core Technologies\n\n- **Framework \u0026 Runtime**\n  - [Next.js 15.2](https://nextjs.org) App Router with React Server Components\n  - [React 19.0](https://react.dev) with React Compiler for improved performance\n  - [Bun](https://bun.sh) as JavaScript runtime and package manager\n  - TypeScript with strict type checking\n\n- **3D \u0026 Graphics**\n  - [React Three Fiber](https://docs.pmnd.rs/react-three-fiber) \u0026 [Drei](https://github.com/pmndrs/drei)\n  - [Three.js 0.174.0](https://threejs.org/) for 3D rendering\n  - Custom WebGL shaders and materials\n  - Advanced gradient animations with flowmap support\n  - [Postprocessing](https://pmndrs.github.io/postprocessing) for visual effects\n\n- **Animation \u0026 Interaction**\n  - [Theatre.js 0.7](https://www.theatrejs.com/) for animation tooling\n  - [GSAP 3.12](https://greensock.com/gsap/) (Business Edition) for advanced animations\n  - [Lenis 1.1](https://github.com/darkroomengineering/lenis) for smooth scrolling\n  - [Hamo](https://github.com/darkroomengineering/hamo) utilities\n  - [Tempus](https://github.com/darkroomengineering/tempus) timing utilities\n\n- **Content Management**\n  - [Storyblok 3.2](https://www.storyblok.com/) headless CMS\n  - [Shopify](https://www.shopify.com/) e-commerce integration\n  - [HubSpot](https://www.hubspot.com/) form management\n\n- **Development Tools**\n  - [Biome 1.9.4](https://biomejs.dev/) for linting \u0026 formatting\n  - [Lefthook](https://github.com/evilmartians/lefthook) for Git hooks automation\n  - Theatre.js Studio for animation debugging\n  - Built-in debug tools at `/orchestra`\n  - Hot module replacement\n  - VSCode configuration included\n\n## Development Tools\n\n### Available Scripts\n- `bun dev` - Start development server with Turbo\n- `bun dev:https` - Start development server with HTTPS\n- `bun build` - Build the project for production\n- `bun start` - Start the production server\n- `bun setup:styles` - Generate style configuration files\n- `bun watch:styles` - Watch and rebuild styles on changes\n- `bun typecheck` - Run TypeScript type checking\n- `bun lint` - Run Biome linting\n- `bun analyze` - Analyze bundle sizes\n\n### Debug Features (at `/orchestra`)\n- Theatre.js Studio\n- FPS Meter\n- Grid Debugger\n- Minimap\n\n## Styling Architecture\n\n- **System Overview**\n  - Tailwind CSS v4.0.9 with custom utilities\n  - PostCSS with advanced configuration and functions\n  - CSS Modules for component styles\n  - Responsive viewport-based units\n\n- **Key Features**\n  - Viewport-relative units (`mobile-vw`, `desktop-vw`)\n  - Custom responsive grid system (configurable [in styles/layout.mjs](/styles/layout.mjs))\n  - Pre-defined breakpoints (800px desktop threshold)\n  - Typography system with [SERVER MONO](https://github.com/internet-development/www-server-mono) font\n  - Theme support\n  - Custom scaling utilities with 's' prefix\n\n- **Build Process**\n  - Automated style generation with `setup:styles` script\n  - CSS optimization with cssnano in production\n  - Type-safe theme properties and configuration\n\nFor more details on the styling system, see [styles/README.md](/styles/README.md).\n\n## Git Workflow\n\n### Automated Git Hooks (via Lefthook)\n- **Pre-commit**: Runs Biome to check and format staged files\n- **Post-merge**: Automatically pulls latest environment variables from Vercel\n\n## Documentation\n\n- Detailed documentation available in the respective folders:\n  - [`libs/readme.md`](/libs/readme.md)\n  - [`styles/readme.md`](/styles/readme.md)\n  - [`integrations/readme.md`](/integrations/readme.md)\n  - [`hooks/readme.md`](/hooks/readme.md)\n  - [`components/readme.md`](/components/readme.md)\n\n## Deployment\n\nThe project can be deployed on Vercel, Netlify, or any service supporting Next.js. See PROD-README.md for production-specific details.\n\n## License\n\nMIT © [darkroom.engineering](https://github.com/darkroomengineering)","funding_links":["https://github.com/sponsors/darkroomengineering","https://polar.sh/darkroomengineering"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkroomengineering%2Fsatus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarkroomengineering%2Fsatus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkroomengineering%2Fsatus/lists"}