asepharyana
5bbf75a65b
- Remove tw-animate-css import + dead src/components/ui shadcn tree - Convert 7 orphaned components (moderation, analysis, guild-selector, voice/activity-timeline, shared/empty+error) to new primitives - Add missing moderation/view.tsx; analysis uses SearchPanel directly - globals.css now uses new signal-driven ops-console tokens - tsc --noEmit clean, next build green (11 routes), local smoke 200
77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "motion/react";
|
|
import { useMemo } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface WaveformProps {
|
|
seed: string | number;
|
|
bars?: number;
|
|
height?: number;
|
|
className?: string;
|
|
tone?: "signal" | "amber" | "vermilion";
|
|
}
|
|
|
|
// deterministic pseudo-random from seed so the shape is stable per recording
|
|
function hashSeed(seed: string | number): number {
|
|
const s = String(seed);
|
|
let h = 2166136261;
|
|
for (let i = 0; i < s.length; i++) {
|
|
h ^= s.charCodeAt(i);
|
|
h = Math.imul(h, 16777619);
|
|
}
|
|
return h >>> 0;
|
|
}
|
|
|
|
export function Waveform({
|
|
seed,
|
|
bars = 40,
|
|
height = 40,
|
|
className,
|
|
tone = "signal",
|
|
}: WaveformProps) {
|
|
const reduce = useReducedMotion();
|
|
const values = useMemo(() => {
|
|
let state = hashSeed(seed) || 1;
|
|
const out: number[] = [];
|
|
for (let i = 0; i < bars; i++) {
|
|
state = (Math.imul(state, 1103515245) + 12345) >>> 0;
|
|
const r = (state % 1000) / 1000;
|
|
// envelope: louder in the middle, quieter at edges
|
|
const env = Math.sin((i / (bars - 1)) * Math.PI);
|
|
out.push(0.18 + r * 0.82 * (0.4 + env * 0.6));
|
|
}
|
|
return out;
|
|
}, [seed, bars]);
|
|
|
|
const color = {
|
|
signal: "var(--color-signal)",
|
|
amber: "var(--color-amber)",
|
|
vermilion: "var(--color-vermilion)",
|
|
}[tone];
|
|
|
|
return (
|
|
<div
|
|
className={cn("flex items-end gap-[2px]", className)}
|
|
style={{ height }}
|
|
aria-hidden
|
|
>
|
|
{values.map((v, i) => (
|
|
<motion.span
|
|
key={i}
|
|
className="flex-1 rounded-[2px]"
|
|
style={{ background: color, height: `${Math.max(8, v * 100)}%` }}
|
|
initial={reduce ? false : { scaleY: 0.2, opacity: 0 }}
|
|
animate={{ scaleY: 1, opacity: 1 }}
|
|
whileHover={{ scaleY: 1.15 }}
|
|
transition={{
|
|
duration: 0.3,
|
|
delay: reduce ? 0 : i * 0.006,
|
|
ease: [0.22, 1, 0.36, 1],
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|