Bop

Use

1. Clone the repository
2. Open index.html in a modern web browser
3. Or click the button below to view on GitHub Pages:

4. Enjoy the journey

Realtime Audio Visualization

In Listen Mode, the visualizer reacts in real-time to your microphone input, creating dynamic patterns and movements synchronized with the beat.

Presets

Quickly switch between visual presets using the Next Preset and Random Preset buttons.

• Preset Cycling: Move between preloaded visual styles for a variety of experiences.
• Randomize: Instantly shuffle to a new visual configuration.

Reset Functionality

Use the Reset button to revert any changes made during a session to the original default settings.

Customization Controls

Access the customization panel via the Controls button, where you can fine-tune every aspect of the visualization in real-time. All changes are immediately reflected on the canvas.

Track Management

You can create and manage custom playlists directly within the app. Here's how to work with tracks:

• Add New Tracks: Use the Create button to open the modal and add tracks by selecting audio files.
• Edit Existing Tracks: Customize track details such as:
  • Title and artist information
  • Visual properties including color and movement
  • Track duration (automatically set based on the uploaded file)
• Save Playlists: Save your custom playlist for future use. It is stored locally in the browser. SOON™

Visual Customization

Each track has its own unique visual settings, which can be modified through the controls sidebar. Available parameters include:

• Detail Level: Controls the complexity of visual elements (e.g., spinning records, shaders).
• Movement Speed: Adjusts how fast the visuals move or spin.
• Color Intensity: Changes the brightness and contrast of the visuals.
• Glow Strength: Modifies the strength of glowing effects.
• Shape Complexity: Adds more intricate details to shapes in the visualizer.
• Primary and Secondary Colors: Customize the two main colors for each track’s visual theme.