Bloop Orb

Shaders 92

About

An audio-reactive animated orb rendered with a WebGPU/WGSL shader, useful as a voice-assistant avatar that shifts between idle, listening, thinking and speaking states in sync with microphone or audio-track levels.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bloop Orb to your project and fits it to your theme.

Code

How Bloop Orb is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import OrbBloop from "@/components/ui/orb-bloop";
import { BloopState } from "@/components/ui/orb-bloop-utils/types";
import {
  BLOOP_PALETTES,
  BloopPaletteName,
} from "@/components/ui/orb-bloop-utils/palettes";
import { useCorsAudioSrc } from "@/components/ui/orb-bloop-utils/use-orb-audio";

type AudioMode = "ambient" | "mic" | "file";
type Palette = BloopPaletteName;
type OrbState = BloopState;

export interface OrbBloopDemoProps {
  palette?: Palette;
  orbState?: OrbState;
  size?: number;
  audioMode?: AudioMode;
  audioSource?: "url" | "upload";
  audioUrl?: string;
  audioFile?: string;
  watercolor?: boolean;
  watercolorStrength?: number;
}

export default function Demo({
  palette = BloopPaletteName.blue,
  orbState = BloopState.listen,
  size = 240,
  audioMode = "ambient",
  audioSource = "url",
  audioUrl = "",
  audioFile,
  watercolor = true,
  watercolorStrength = 0.5,
}: OrbBloopDemoProps) {
  const colors =
    BLOOP_PALETTES[palette] ?? BLOOP_PALETTES[BloopPaletteName.blue];
  const audioRef = React.useRef<HTMLAudioElement | null>(null);
  const rawSrc = audioSource === "upload" && audioFile ? audioFile : audioUrl;
  const playSrc = useCorsAudioSrc(audioMode === "file" ? rawSrc : "");

  return (
    <div className="flex size-full min-h-80 flex-col items-center justify-center gap-3 p-6">
      {audioMode === "file" ? (
        <audio
          ref={audioRef}
          src={playSrc || undefined}
          controls
          autoPlay
          crossOrigin="anonymous"
          className="h-9 max-w-xs"
        />
      ) : null}
      <OrbBloop
        size={size}
        audioMode={audioMode}
        audioElement={audioRef}
        audioSrc={playSrc}
        state={orbState}
        bloopColorMain={colors.main}
        bloopColorLow={colors.low}
        bloopColorMid={colors.mid}
        bloopColorHigh={colors.high}
        watercolorStrength={watercolor ? watercolorStrength : 0}
        watercolorAnimated={false}
      />
    </div>
  );
}