Crisp Web Platform
Relevant source files
The following files were used as context for generating this wiki page:
The Crisp Web Platform, located in the apps/web directory, serves as the marketing and product website for the Crisp native macOS application. It is designed to reflect the app's identity through a "dark, cinematic" aesthetic, utilizing heavy motion and premium UI primitives to demonstrate the software's capabilities, such as silence detection and filler word removal.
The platform is built as a Single Page Application (SPA) using a modern frontend stack including React, TypeScript, and Tailwind CSS v4. It emphasizes transparency and privacy, serving as the primary host for the project's legal documentation and installation instructions via Homebrew or direct DMG download.
Sources: apps/web/README.md:1-12, apps/web/index.html:10-25
Architecture and Technology Stack
The web platform is integrated into the Crisp monorepo and managed via Turborepo. It utilizes a variety of libraries for animation, routing, and styling to achieve a high-performance, visually engaging user experience.
Core Frameworks
- Build Tool: Vite
- Frontend Library: React 18
- Language: TypeScript
- Package Manager: Bun
UI and Animation
- Styling: Tailwind CSS v4
- Animation: Framer Motion (for kinetic text, 3D tilts, and reveal-on-scroll effects)
- Smooth Scrolling: Lenis
- Routing: @tanstack/react-router
Sources: apps/web/package.json:16-33, apps/web/README.md:8-10, package.json:1-12
Dependency Overview
| Dependency | Purpose |
|---|---|
framer-motion | Premium animations and transitions |
lenis | Implementation of smooth momentum scrolling |
@tanstack/react-router | Typesafe client-side routing |
@tailwindcss/vite | Integration for Tailwind CSS v4 styling |
Sources: apps/web/package.json:16-25
Content and Routing Structure
The platform organizes its content into distinct sections and pages, primarily focused on the landing experience and legal transparency.
Site Constants
Key metadata and external links are centralized in src/site.ts to ensure consistency across the application.
export const REPO = "https://github.com/rafay99-epic/Crisp%22%3B
export const AUTHOR = "Syntax Lab Technology";
export const REQUIREMENTS = "macOS 14 · Apple Silicon";
export const BREW_INSTALL = "brew install --cask rafay99-epic/apps/crisp";
Sources: apps/web/src/site.ts:2-12
Navigation and Legal Pages
The LegalPage component dynamically renders documentation such as the Privacy Policy and Terms of Use. It uses a sticky header and a cinematic "orb" background effect consistent with the brand's identity.
The diagram above shows the relationship between the main entry point and the routed pages within the web platform.
Sources: apps/web/src/pages/LegalPage.tsx:7-60, apps/web/src/content/legal.tsx:32-35
Deployment and Infrastructure
The platform is designed for deployment on Vercel as a static marketing site.
Vercel Configuration
The deployment process leverages Turborepo, where the root directory is set to apps/web. The platform includes a vercel.json to handle SPA rewrites (enabling paths like /privacy to resolve correctly) and security headers.
CI/CD Flow
- Production Deploys: Automatically triggered on every push to the
mainbranch. - Preview URLs: Automatically generated for other branches and Pull Requests.
- Build Command:
bun run buildwhich executestsc -b && vite build.
Sources: apps/web/README.md:37-51, apps/web/package.json:7-13
Installation and Distribution
A critical function of the web platform is facilitating the distribution of the native macOS app. The Download section provides clear instructions for users to install Crisp via Terminal.
Distribution Channels
- Homebrew: The preferred method using
brew install --cask rafay99-epic/apps/crisp. - Direct DMG: Links to GitHub Releases for direct downloads.
- Nightly Channel: Instructions for users to install the experimental channel side-by-side with the stable version.
Sources: apps/web/src/sections/Download.tsx:36-70, apps/web/src/site.ts:15-16
Privacy and Data Transparency
Reflecting the project's "private by default" philosophy, the web platform explicitly documents its data handling practices.
- Static Nature: The site is a static page with no cookies, tracking scripts, or analytics.
- Local Processing: The platform emphasizes that the Crisp app processes all video locally on the user's Mac.
- External Requests: The documentation discloses that the app only connects to the internet for Hugging Face model downloads and GitHub update checks.
Sources: apps/web/src/content/legal.tsx:34-100
The Crisp Web Platform effectively translates the native application's technical sophistication into a cinematic web experience while maintaining the project's core values of transparency and performance.