The landing page for the Moss Laboratories ecosystem — a suite of open-source, privacy-first Android applications. Built with React, TypeScript, and Vite, deployed on Vercel.
Audiophile-grade music player for Android. UAC 2.0 USB DAC support, lossless playback (FLAC, ALAC, WAV, DSD), gapless transitions, and a focused listening interface.
- Status: Live on Google Play
- Version:
- Site: flick-player.site
Encrypted media vault with AES-256, biometric unlock, decoy vault (plausible deniability), folder-based passcodes, and auto-kill triggers. Shares files to Flick via in-memory handoff.
- Status: Live on Google Play
- Version:
| Layer | Choice |
|---|---|
| Framework | React 19, TypeScript 6 |
| Build | Vite 8 |
| Routing | React Router 7 |
| Styling | Tailwind CSS v4, shadcn/ui |
| Animation | Framer Motion, GSAP + ScrollTrigger |
| 3D / Shaders | Three.js (R3F, Drei), custom GLSL fragment shaders |
| State | Zustand (localStorage-persisted) |
| Data fetching | SWR (GitHub Releases API) |
| Forms & validation | React Hook Form + Zod |
| Markdown | react-markdown + remark-gfm |
| Icons | Lucide React |
| Deployment | Vercel |
- Node.js 20.19+ or 22.12+ (Vite 8 requirement)
- pnpm (the lockfile is
pnpm-lock.yaml) - Git
pnpm install
pnpm dev # Start dev server at localhost:5173
pnpm build # Type-check and production build
pnpm preview # Serve the production build locally| Command | Description |
|---|---|
pnpm dev |
Vite dev server with HMR |
pnpm build |
tsc -b && vite build |
pnpm preview |
Preview production build |
pnpm lint |
ESLint across the project |
pnpm test |
Vitest unit tests |
pnpm test:ui |
Vitest with browser UI |
pnpm test:e2e |
Playwright end-to-end tests |
pnpm test:e2e:ui |
Playwright with interactive UI |
The
tests/ande2e/directories are scaffolded but not yet populated — the test runners are wired up, suites are pending.
A single-page entry that mounts a BrowserRouter with the route table in
src/main.tsx:
src/
main.tsx # React mount + route definitions (BrowserRouter)
index.css # Tailwind + custom brutalist/glass styles
pages/
Home.tsx # Landing — assembles all sections
Downloads.tsx # App download links + live stats
Changelog.tsx # GitHub releases feed (react-markdown)
Announcements.tsx # Announcement index
AnnouncementDetail.tsx # Single announcement
Community.tsx # Bundled docs (README, privacy, terms…)
AppPage.tsx # Shared Flick/Latch product page (/flick, /latch)
Contact.tsx # Contact channels + mailto composer
Search.tsx # Client-side search across announcements, releases, docs
NotFound.tsx # 404 status page
Admin.tsx # Announcement admin (password-gated)
components/
Layout.tsx # Route shell: nav + <Outlet/> + footer + boot screen
ErrorBoundary.tsx # Top-level render error fallback (500 UI)
ScrollToTop.tsx # Scroll restoration on route change
BackToTop.tsx # Floating back-to-top button
Navigation.tsx # Sticky nav + accent/theme picker + search entry
Hero.tsx # Full-viewport hero
Ecosystem.tsx # Apps overview section
AppShowcase.tsx # Flick + Latch feature grid (live release data)
BentoSpine.tsx # Bento-grid staggered section
Integration.tsx # Cross-app integration section
BrokenGridIntegration.tsx # Broken-grid handoff section
DiagonalMockupShowcase.tsx # Scroll-pinned mockup carousel
MockupLoader.tsx # Animated mockup placeholder
Ethos.tsx # Design principles + manifesto
ShaderBackground.tsx # Three.js animated dot-field background
ShaderBackgroundLazy.tsx # Lazy-loaded shader background (code-split)
LoadingScreen.tsx # Animated boot screen
Footer.tsx # Site footer
ui/ # shadcn/ui primitives
hooks/
useGitHubRelease.ts # Single release fetch (SWR)
useGitHubReleases.ts # Release list fetch (SWR)
useAnnouncements.ts # Announcements fetch (Supabase REST, SWR)
useIsMobile.ts # Viewport breakpoint hook
lib/
apps.ts # Flick/Latch catalog shared by Home + app pages
docs.ts # Community documents + slug resolution
routes.ts # Known-route matcher (shared with edge middleware)
announcements.ts # Announcement types + helpers
utils.ts # cn() class-merge helper
shaders/
dotField.frag # GLSL fragment shader
stores/
useMossStore.ts # Zustand store (accent color + prefs, persisted)
middleware.ts # Vercel edge middleware — real 404 status for unknown routes
public/
favicon.svg
assets/ # Logos, banners, mockups
See docs/ARCHITECTURE.md for a detailed breakdown and docs/SETUP.md for setup, customization, and deployment notes.
Brutalist aesthetic with glassmorphism panels, monospace labels, hairline borders, and a metallic accent system. Interactive features include:
- Shader background — animated dot grid responding to mouse position and accent color
- Accent color picker — 8-color theme switcher with persistence
- Performance mode — toggle to disable all heavy effects for accessibility
- Reduced motion — respects
prefers-reduced-motion
- Ecosystem growth — expand the Moss suite beyond Flick and Latch.
- Deeper cross-app handoffs — extend in-memory integration between apps.
Edit this list as priorities firm up.
PRs are welcome against the default branch. Before opening one:
pnpm lint
pnpm build # type-checks via tsc -bSee CONTRIBUTING.md for branch conventions and the local setup walkthrough.
This ecosystem is privacy-first. If you find a vulnerability, do not open a public issue — report it privately per SECURITY.md or email moss_apps@proton.me.
Built on React, Vite, Three.js / React Three Fiber, Tailwind CSS, shadcn/ui, Framer Motion, GSAP, Zustand, SWR, React Router, and Lucide. Typography: DM Sans + JetBrains Mono via Google Fonts.
Source code is licensed under the GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later). See LICENSE. The license field in package.json carries the matching SPDX identifier.
Deployed on Vercel at mosslabs.vercel.app with SPA rewrite rules (all routes → index.html except /assets/). The vercel.json handles this. A root middleware.ts (Vercel Edge Middleware) returns a real 404 status for unknown routes while still serving the SPA shell, so crawlers see correct status codes. A push to the connected branch deploys automatically.
Moss Laboratories — moss_apps@proton.me
GitHub: moss-apps