Distribute (Web)

The official landing page for the Distribute music app..

Discord • About This Project • Distribute App • Getting Started • Tech Stack

---

🤝 Community

• Discord.
• Twitter @sourceloc.

---

📖 About This Project

This repository contains the source code for the public-facing marketing website of Distribute.

Important

This is NOT the Distribute music application.

This repo houses the landing page only. The actual Distribute client and server application are developed and hosted in separate repositories. Links:

• Distribute App
• Distributor

🎵 About Distribute

The landing page promotes Distribute, a next-generation, offline-first music streaming application designed for privacy-conscious audiophiles.

Product Feature	Description
Self-Hosted Core	Connect to your own home server. Your music, your rules.
Offline-First	Local-first architecture ensures music plays without internet.
Library Sync	Smart synchronization between multiple servers.
Privacy Focused	Zero tracking. Absolute user privacy and data ownership.

⚡ Website Features (This Repository)

This landing page project showcases modern web development techniques:

• Interactive Physics: Custom Matter.js implementation for the interactive vinyl section.
• Scroll-Driven Animations: Complex scroll reveals using Framer Motion.
• Modern Stack: Built on Next.js 16 and React 19 with Server Components.
• Design System: Styled with Tailwind CSS 4 and Shadcn UI.

🛠️ Tech Stack

This website is built with the following technologies:

• Frontend Framework: Next.js 16 (App Router)
• UI Library: React 19
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Physics: Matter.js
• Components: Shadcn UI
• Icons: Lucide React

🚀 Getting Started

Follow these steps to run the landing page locally.

Prerequisites

• Node.js v18+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/sourcelocation/distribute.git
   cd distribute/web

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. View the site Open http://localhost:3000 to view the landing page.

📂 Project Structure

web/
├── public/              # Static assets (site images, vinyl textures)
├── src/
│   ├── app/             # Next.js App Router pages
│   ├── components/      # React components (Landing sections, animations)
│   │   ├── ui/          # Shared UI components
│   │   └── ...          # Feature-specific components
│   └── lib/             # Utility functions
├── next.config.ts       # Next.js configuration
├── tailwind.config.ts   # Tailwind CSS configuration
└── package.json         # Project dependencies

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Built with ❤️ by sourcelocation