audio-pulse

1import { bandEnergy, useAudioBands } from "@/remotion/lib/audio-viz-utils";
2 
3export type AudioPulseProps = {
4  src: string;
5  size?: number;
6  color?: string;
7  ringCount?: number;
8  sensitivity?: number;
9  /**
10   * Optional frame override.
11   * Pass a parent `frame` when using inside `<Sequence from={...}>` to avoid discontinuities.
12   */
13  frame?: number;
14};
15 
16const clamp01 = (value: number) => Math.min(1, Math.max(0, value));
17 
18const smoothstep = (t: number) => {
19  const x = clamp01(t);
20  return x * x * (3 - 2 * x);
21};
22 
23const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
24 
25export const AudioPulse: React.FC<AudioPulseProps> = ({
26  src,
27  size = 240,
28  color = "#e8b86d",
29  ringCount = 3,
30  sensitivity = 1,
31  frame: frameOverride,
32}) => {
33  // 24 bands keeps the low end resolved enough to separate a kick from the
34  // body of the mix; the pulse only reads the bottom third of them.
35  const { bands, frame, fps } = useAudioBands({
36    src,
37    bandCount: 24,
38    frame: frameOverride,
39  });
40 
41  const low = bandEnergy(bands, 0, 8);
42  const full = bandEnergy(bands);
43  // Weighted toward the bass so the orb pumps on the beat rather than on hats.
44  const raw = clamp01((low * 0.72 + full * 0.28) * sensitivity);
45 
46  // Compress: keeps quiet passages visible without flattening the transients.
47  const intensity = smoothstep(Math.pow(raw, 0.78));
48  const idle = 0.5 + 0.5 * Math.sin((frame / fps) * Math.PI * 2 * 0.18);
49  const breathe = 0.03 * idle;
50 
51  return (
52    <div style={{ width: size, height: size, position: "relative" }}>
53      <div
54        style={{
55          position: "absolute",
56          inset: "-14%",
57          borderRadius: "50%",
58          background: `radial-gradient(circle at 50% 50%, ${color}14 0%, transparent 62%)`,
59          filter: "blur(10px)",
60          opacity: 0.78 + intensity * 0.28,
61          scale: 0.96 + intensity * 0.06,
62          pointerEvents: "none",
63        }}
64      />
65      {Array.from({ length: ringCount }).map((_, index) => {
66        const offset = index / Math.max(1, ringCount);
67        const baseScale = 0.56 + offset * 0.25;
68        const phase = (frame / fps) * Math.PI * 2 * 0.42 + index * 1.7;
69        const wobble = Math.sin(phase) * (0.012 + offset * 0.01);
70        const scale =
71          baseScale + intensity * (0.28 + offset * 0.22) + breathe + wobble;
72        const ringOpacity = lerp(0.72, 0.22, offset) * (0.65 + intensity * 0.35);
73        const ringWidth = lerp(2.3, 1.35, offset);
74// … truncated