https://github.com/helloprkr/sphere-audio-context

Created with StackBlitz ⚡️
https://github.com/helloprkr/sphere-audio-context

Last synced: 4 months ago
JSON representation

Created with StackBlitz ⚡️

• Host: GitHub
• URL: https://github.com/helloprkr/sphere-audio-context
• Owner: helloprkr
• Created: 2025-02-25T07:11:55.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-25T21:33:46.000Z (over 1 year ago)
• Last Synced: 2025-06-24T00:43:42.839Z (about 1 year ago)
• Language: TypeScript
• Homepage: https://stackblitz.com/edit/sb1-9ss4dulu
• Size: 46.9 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# sphere-audio-context

# 🎵 Three.js Audio Visualization Framework

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![React](https://img.shields.io/badge/React-18.3.1-blue.svg)](https://reactjs.org/)

[![Three.js](https://img.shields.io/badge/Three.js-0.162.0-green.svg)](https://threejs.org/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5.5.3-blue.svg)](https://www.typescriptlang.org/)

[![Vite](https://img.shields.io/badge/Vite-5.4.2-purple.svg)](https://vitejs.dev/)



A robust boilerplate for building audio-reactive 3D visualizations with Three.js, Web Audio API, and React.

Created by [@HelloPrkr](https://github.com/helloprkr).

## 🚀 Quick Start

```bash

npm install

npm run dev

```

## 🎯 Core Features

- **WebGL Rendering**: Three.js with custom GLSL shaders

- **Audio Processing**: Real-time FFT analysis (20Hz-20kHz)

- **React Integration**: Type-safe components with hot reload

- **Performance**: Optimized for 60+ FPS

## 🛠️ Technical Stack

- **Frontend**: React 18.3 + TypeScript 5.5

- **3D Graphics**: Three.js 0.162

- **Build System**: Vite 5.4

- **Audio**: Web Audio API

- **Styling**: Tailwind CSS

## 📦 Installation

```bash

git clone https://github.com/yourusername/threejs-audio-viz.git

cd threejs-audio-viz

npm install

```

## 💻 Usage

```typescript

import { ThreeScene } from './components/ThreeScene';

import { AnimationConfig } from './config/animationConfig';

const config: Partial = {

  sphere: { size: 1.0, segments: 64 },

  audio: { sensitivity: 1.0, attackSpeed: 0.5 }

};

function App() {

  return ;

}

```

## ⚙️ Configuration

### Visual Settings

```typescript

interface VisualConfig {

  gradient: {

    type: 'linear' | 'radial' | 'angular';

    points: GradientPoint[];

    direction: number;

  };

  effects: {

    swirlingStrength: number;

    energyThreshold: number;

    transparency: number;

  };

}

```

### Audio Settings

```typescript

interface AudioConfig {

  sensitivity: number;

  minFrequency: number;

  maxFrequency: number;

  attackSpeed: number;

  decaySpeed: number;

  effectType: 'scale' | 'color' | 'displacement' | 'particles' | 'deformation';

}

```

## 🏗️ Architecture

```

src/

├── components/

│   ├── ThreeScene.tsx    # WebGL renderer

│   ├── Controls.tsx      # UI controls

│   └── AudioEffects.tsx  # Audio processing

├── config/

│   ├── animationConfig.ts

│   └── audioEffects.ts

└── App.tsx

```

## 🔧 Development

```bash

# Development

npm run dev

# Type checking

npm run typecheck

# Production build

npm run build

```

## 🎨 Features

### Visualization

- 6-point gradient system

- 10k particle starfield

- Orbital camera controls

- Real-time shader effects

### Audio

- Microphone input handling

- FFT frequency analysis

- Attack/decay controls

- Multiple effect modes

[Edit in StackBlitz next generation editor ⚡️](https://stackblitz.com/~/github.com/helloprkr/sphere-audio-context)