AudioBits is currently tested in Chromium-based browsers. Other browsers are not yet verified.

The Rift

Tear open a living fracture. Stretch, destabilize and seal it into a collapsing implosion.

Add to project

npx shadcn@latest add joacod/audiobits/the-rift

Adds editable source and the audiobits runtime dependency. Installation guide

Installs the catalog defaults and sound controller. The website visuals and input system stay in the showcase.

Use this sound

Use in src/integration.ts. Call play() from a user gesture and handle activation errors. Connect updates to application state; stop on cancellation or hiding, and dispose on removal.

import { createAudio } from "audiobits";
import {
  createRift,
  type RiftShape,
} from "./sounds/experiences/the-rift/controller";

const audio = createAudio();
const rift = createRift(audio);
let request = 0;

export async function play(shape: Partial<RiftShape> = { aperture: 0.6 }) {
  const token = ++request;
  await audio.start();
  if (token !== request) return;
  rift.open(shape);
  // Settle immediately, or after your own opening gesture is valid.
  rift.settle();
}

// Each value is normalized to [0, 1].
export function update(shape: Partial<RiftShape>) {
  rift.update(shape);
}

// The creative finale. Returns its audio-clock timeline.
export function close() {
  request++;
  return rift.collapse();
}

export function stop() {
  request++;
  rift.stop();
}

export async function dispose() {
  stop();
  rift.dispose();
  await audio.dispose();
}
Production lifecycle

Customize or inspect

Connect your application's state and events to the sound controller. The full showcase source includes the browser host, input, and visuals.

View complete public source