53:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:T6766,import { useAudioConfig } from "@/hooks/use-audio-config"; import { useFrameSource } from "@/hooks/use-frame-source"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { useVisibility } from "@/hooks/use-visibility"; import { createBarLevels } from "@/lib/audio/bar-levels"; import type { BarIdle } from "@/lib/audio/bar-levels"; import { clamp } from "@/lib/audio/decibels"; import { subscribeFrame } from "@/lib/audio/frame-loop"; import type { FrameSource, Orientation, VisualFrame } from "@/lib/audio/types"; import { ELECTRIC_CANVAS_CLASS, ELECTRIC_GLOW_CLASS, clearElectricCanvas, createElectricSparks, createRandom, displace, emitSpark, fitElectricCanvases, moveSparks, readElectricColors, strokeSparks, } from "@/lib/electric"; import type { ElectricCanvasSize, ElectricColors, ElectricSparks, } from "@/lib/electric"; import { createCompatEffect } from "@/lib/solid/effect"; import type { DivDOMProps } from "@/lib/solid/jsx-types"; import { omitProps } from "@/lib/solid/props"; import { setRefValue } from "@/lib/solid/ref"; import type { RefTarget } from "@/lib/solid/ref"; import { cn } from "@/lib/utils"; const DEFAULT_BAR_COUNT = 16; const DEFAULT_MIN_LEVEL = 0.08; const DEFAULT_INTENSITY = 0.6; const DEFAULT_BAR_WIDTH = 6; const DEFAULT_BAR_GAP = 4; const REDUCED_MOTION_INTERVAL_MS = 250; const COLOR_REFRESH_FRAMES = 30; const MS_PER_SECOND = 1000; const FRAME_SECONDS = 1 / 60; const MAX_STEP_SECONDS = 0.05; /** A filament has 2^4 segments, so every split halves one cleanly. */ const FILAMENT_DEPTH = 4; const FILAMENT_POINTS = 2 ** FILAMENT_DEPTH + 1; /** Shortest segment in pixels before a filament drops to fewer points. */ const SEGMENT_PX = 5; /** How much each finer split bends compared with the one before. */ const ROUGHNESS = 0.72; /** How far a free tip wanders, relative to the jitter amplitude. */ const FREE_TIP = 0.5; /** Each jagged shape holds at least this long, so the crackle never strobes. */ const JITTER_MS = 42; /** Largest bend, relative to the filament's length. */ const MAX_BEND = 0.35; /** Brightness flicker, at most 12%. */ const FLICKER = 0.12; /** Tips start to glow above this level. */ const TIP_LEVEL = 0.25; const MAX_ARCS = 3; /** Arcs jump to the next bar or the one after. */ const MAX_ARC_REACH = 2; const ARC_DEPTH = 3; const ARC_POINTS = 2 ** ARC_DEPTH + 1; const ARC_ATTEMPTS = 2; /** Both neighbours must be this loud for an arc to jump between them. */ const ARC_THRESHOLD = 0.45; const ARC_CHANCE = 0.35; const ARC_MIN_MS = 70; const ARC_MAX_MS = 150; /** How far an arc bends, relative to the distance it spans. */ const ARC_BOW = 0.3; const MAX_SPARKS = 64; /** A rise this big in one frame throws sparks. */ const SPARK_RISE = 0.12; const SPARK_MIN_LEVEL = 0.3; const SPARK_COOLDOWN_MS = 90; /** Pixels per second squared. */ const SPARK_GRAVITY = 520; /** Pixels per second. */ const SPARK_SPEED = 180; /** Pixels per second, sideways. */ const SPARK_SPREAD = 70; const SPARK_MIN_MS = 260; const SPARK_MAX_MS = 560; const SPARK_TRAIL_SECONDS = 0.03; type Align = "center" | "start" | "end"; type Tip = "from" | "to"; export interface ElectricBarVisualizerActions { /** Paint levels (0..1) directly. They are resampled to the bar count. */ paint: (levels: ArrayLike) => void; } export interface ElectricBarVisualizerProps extends Omit { /** A visual source; the bars follow its frequency bands. */ source?: FrameSource | null; /** Levels, 0..1, for declarative use. */ levels?: ArrayLike; /** Number of bars. Bands are resampled to fit. Default 16. */ barCount?: number; /** Where bars grow from. Default `center`. */ align?: Align; /** Symmetric around the middle bar. Default false. */ mirrored?: boolean; /** Resting bar size, 0..1. Default 0.08. */ minLevel?: number; /** What the bars do with no signal. Default `static`. */ idle?: BarIdle; /** Runs an arc along the bars, for connecting or thinking states. Default false. */ loading?: boolean; orientation?: Orientation; /** How jagged and restless the filaments are, 0..1. Default 0.6. */ intensity?: number; /** Arcs jump between loud neighbouring bars. Default true. */ arcs?: boolean; /** Sparks fly off the tips on sudden rises. Default true. */ sparks?: boolean; /** Widest bar in pixels. Default 6. */ barWidth?: number; /** Gap between bars in pixels. Default 4. */ barGap?: number; actionsRef?: RefTarget; ref?: RefTarget; className?: string; } /** * Where the bars sit, in CSS pixels. `across` runs along the row of bars and * `along` runs the way they grow, so both orientations share one drawing. */ export interface ElectricLayout { horizontal: boolean; align: Align; barWidth: number; barGap: number; /** Centre of the first bar, across. */ first: number; /** Distance between bar centres. */ pitch: number; /** Where bars grow from, along: the base, or the middle when centred. */ base: number; /** Length of a bar at level 1. */ span: number; } export interface ElectricLayoutOptions { align: Align; barCount: number; barGap: number; barWidth: number; orientation: Orientation; } /** Fits the bars into a canvas, narrowing bars and gaps when space is short. */ export const layoutElectricBars = ( width: number, height: number, { align, barCount, barGap, barWidth, orientation }: ElectricLayoutOptions ): ElectricLayout => { const horizontal = orientation === "horizontal"; const count = Math.max(1, barCount); const acrossLength = horizontal ? width : height; const alongLength = horizontal ? height : width; const pitch = Math.min( barWidth + barGap, Math.max(0, acrossLength - barWidth * 2) / count ); const scale = pitch / (barWidth + barGap || 1); const resolvedWidth = barWidth * scale; const resolvedGap = barGap * scale; const inset = Math.min(resolvedWidth, alongLength / 4); const baseFor = { center: alongLength / 2, end: alongLength - inset, start: inset, }; return { align, barGap: resolvedGap, barWidth: resolvedWidth, base: baseFor[align], first: (acrossLength - count * pitch + resolvedGap + resolvedWidth) / 2, horizontal, pitch, span: Math.max(0, alongLength - inset * 2), }; }; const barFrom = (layout: ElectricLayout, level: number) => layout.align === "center" ? layout.base - (level * layout.span) / 2 : layout.base; const barTo = (layout: ElectricLayout, level: number) => { if (layout.align === "center") { return layout.base + (level * layout.span) / 2; } const direction = layout.align === "end" ? -1 : 1; return layout.base + direction * level * layout.span; }; /** Which way a tip points, along: sparks fly that way. */ const tipDirection = (layout: ElectricLayout, tip: Tip) => { const growth = layout.align === "end" ? -1 : 1; return tip === "to" ? growth : -growth; }; /** * How far a filament wanders sideways, in pixels. Louder bars crackle more, * and short ones never bend more than a third of their length. */ const jitterAmplitude = ( layout: ElectricLayout, intensity: number, level: number ) => Math.min( intensity * (layout.barWidth + layout.barGap) * 0.6 * (0.3 + 0.7 * level), level * layout.span * MAX_BEND ); export interface ElectricArc { /** The arc joins this bar and the one `reach` bars on. */ index: number; reach: number; /** Which end of the bars it joins: `to` is the tip, `from` the base (centred bars only). */ tip: Tip; bornMs: number; /** 0 when the arc is gone. */ lifeMs: number; /** Bend at each point, in units of the arc's bow. */ jitter: Float32Array; } export interface ElectricSceneOptions { barCount: number; intensity: number; arcs: boolean; sparks: boolean; loading: boolean; reducedMotion: boolean; /** Makes the crackle repeatable. Each scene gets its own by default. */ seed?: number; } export interface ElectricScene { /** Sideways offset of each filament point, per bar, in units of its jitter amplitude. */ jitter: Float32Array; /** Brightness of each bar, 0.88..1. */ flicker: Float32Array; arcs: ElectricArc[]; sparks: ElectricSparks; /** Advances the crackle, arcs and sparks to `nowMs`. */ step: (nowMs: number, levels: Float32Array, layout: ElectricLayout) => void; } const loudestIndex = (levels: Float32Array) => { let loudest = 0; for (const [index, level] of levels.entries()) { if (level > (levels[loudest] ?? 0)) { loudest = index; } } return loudest; }; let sceneCount = 0; /** * The moving parts of the electric look, apart from any canvas: jagged * filaments, arcs between loud neighbours and sparks thrown off sudden rises. * With reduced motion it stays straight and still. */ export const createElectricScene = ({ arcs, barCount, intensity, loading, reducedMotion, seed, sparks, }: ElectricSceneOptions): ElectricScene => { sceneCount += 1; const random = createRandom(seed ?? sceneCount); const signed = () => random() * 2 - 1; const jitter = new Float32Array(barCount * FILAMENT_POINTS); const flicker = new Float32Array(barCount).fill(1); const arcList: ElectricArc[] = Array.from({ length: MAX_ARCS }, () => ({ bornMs: 0, index: 0, jitter: new Float32Array(ARC_POINTS), lifeMs: 0, reach: 1, tip: "to", })); const pool = createElectricSparks(MAX_SPARKS); const previous = new Float32Array(barCount); const lastEmitMs = new Float64Array(barCount).fill(-Infinity); let lastMs = 0; let lastJitterMs = -Infinity; let primed = false; const rerollFilaments = (centered: boolean) => { for (let index = 0; index < barCount; index += 1) { const from = centered ? signed() * FREE_TIP : 0; displace( jitter, index * FILAMENT_POINTS, FILAMENT_POINTS, [from, signed() * FREE_TIP], random, ROUGHNESS ); flicker[index] = 1 - FLICKER * random(); } }; const startArc = ( arc: ElectricArc, [index, reach]: [number, number], tip: Tip, nowMs: number ) => { arc.index = index; arc.reach = reach; arc.tip = tip; arc.bornMs = nowMs; arc.lifeMs = ARC_MIN_MS + random() * (ARC_MAX_MS - ARC_MIN_MS); }; /** While loading, one arc rides the sweep across the bars. */ const followSweep = ( nowMs: number, levels: Float32Array, centered: boolean ) => { const peak = loudestIndex(levels); const leansLeft = (levels[peak - 1] ?? 0) > (levels[peak + 1] ?? 0); const index = clamp(leansLeft ? peak - 1 : peak, 0, barCount - 2); const [arc] = arcList; if (arc) { startArc(arc, [index, 1], centered ? "from" : "to", nowMs); arc.lifeMs = JITTER_MS * 2; } }; const spawnArcs = ( nowMs: number, levels: Float32Array, centered: boolean ) => { for (let attempt = 0; attempt < ARC_ATTEMPTS; attempt += 1) { const reach = 1 + Math.floor(random() * MAX_ARC_REACH); const index = Math.floor(random() * Math.max(0, barCount - reach)); const strength = Math.min(levels[index] ?? 0, levels[index + reach] ?? 0); const charged = strength >= ARC_THRESHOLD && random() < ARC_CHANCE * intensity * strength; const free = arcList.find((arc) => arc.lifeMs === 0); const taken = arcList.some( (arc) => arc.lifeMs > 0 && arc.index === index ); if (charged && free && !taken) { startArc( free, [index, reach], centered && random() < 0.5 ? "from" : "to", nowMs ); } } }; const updateArcs = ( nowMs: number, levels: Float32Array, centered: boolean ) => { if (barCount < 2) { return; } if (loading) { followSweep(nowMs, levels, centered); } else { spawnArcs(nowMs, levels, centered); } for (const arc of arcList) { if (arc.lifeMs > 0) { displace(arc.jitter, 0, ARC_POINTS, [0, 0], random, ROUGHNESS); } } }; const expireArcs = (nowMs: number) => { for (const arc of arcList) { if (arc.lifeMs > 0 && nowMs - arc.bornMs >= arc.lifeMs) { arc.lifeMs = 0; } } }; const launchSpark = ( index: number, level: number, layout: ElectricLayout ) => { const tip: Tip = layout.align === "center" && random() < 0.5 ? "from" : "to"; const along = tip === "to" ? barTo(layout, level) : barFrom(layout, level); const across = layout.first + index * layout.pitch; const speed = SPARK_SPEED * (0.5 + random()) * (0.5 + intensity); const alongVelocity = tipDirection(layout, tip) * speed; const acrossVelocity = signed() * SPARK_SPREAD; emitSpark(pool, { lifeMs: SPARK_MIN_MS + random() * (SPARK_MAX_MS - SPARK_MIN_MS), vx: layout.horizontal ? acrossVelocity : alongVelocity, vy: layout.horizontal ? alongVelocity : acrossVelocity, x: layout.horizontal ? across : along, y: layout.horizontal ? along : across, }); }; const emitSparks = ( nowMs: number, levels: Float32Array, layout: ElectricLayout ) => { for (const [index, level] of levels.entries()) { const rise = level - (previous[index] ?? 0); const rested = nowMs - (lastEmitMs[index] ?? 0) >= SPARK_COOLDOWN_MS; if (rise >= SPARK_RISE && level >= SPARK_MIN_LEVEL && rested) { lastEmitMs[index] = nowMs; const count = 2 + Math.floor(random() * 3); for (let spark = 0; spark < count; spark += 1) { launchSpark(index, level, layout); } } } }; const step = ( nowMs: number, levels: Float32Array, layout: ElectricLayout ) => { const seconds = lastMs === 0 ? FRAME_SECONDS : clamp((nowMs - lastMs) / MS_PER_SECOND, 0, MAX_STEP_SECONDS); lastMs = nowMs; if (reducedMotion) { return; } const centered = layout.align === "center"; if (nowMs - lastJitterMs >= JITTER_MS) { lastJitterMs = nowMs; rerollFilaments(centered); if (arcs) { updateArcs(nowMs, levels, centered); } } expireArcs(nowMs); if (sparks) { if (primed) { emitSparks(nowMs, levels, layout); } moveSparks(pool, seconds, SPARK_GRAVITY); } previous.set(levels); primed = true; }; return { arcs: arcList, flicker, jitter, sparks: pool, step }; }; interface PaintInput { scene: ElectricScene; layout: ElectricLayout; levels: Float32Array; colors: ElectricColors; intensity: number; nowMs: number; } const plot = ( context: CanvasRenderingContext2D, layout: ElectricLayout, across: number, along: number, move: boolean ) => { const x = layout.horizontal ? across : along; const y = layout.horizontal ? along : across; if (move) { context.moveTo(x, y); } else { context.lineTo(x, y); } }; /** Short filaments use fewer points, so they stay a line and not a scribble. */ const strideFor = (length: number) => { const depth = clamp( Math.ceil(Math.log2(Math.max(1, length) / SEGMENT_PX)), 1, FILAMENT_DEPTH ); return 2 ** (FILAMENT_DEPTH - depth); }; /** How one pass draws the filaments. */ interface FilamentPass { /** Line width, relative to the bar width. */ width: number; /** Least line width in pixels. */ minWidth: number; /** Share of the jitter the pass follows: the sheath stays close to a bar while the core crackles. */ bend: number; join: CanvasLineJoin; alpha: (level: number) => number; } const GLOW_PASS: FilamentPass = { alpha: (level) => 0.1 + 0.35 * level, bend: 0.35, join: "round", minWidth: 2, width: 1.6, }; const SHEATH_PASS: FilamentPass = { alpha: (level) => 0.35 + 0.35 * level, bend: 0.35, join: "round", minWidth: 1, width: 1, }; const CORE_PASS: FilamentPass = { alpha: (level) => 0.8 + 0.2 * level, bend: 1, join: "miter", minWidth: 1.25, width: 0.3, }; const traceFilament = ( context: CanvasRenderingContext2D, { intensity, layout, scene }: PaintInput, index: number, level: number, bendShare: number ) => { const across = layout.first + index * layout.pitch; const amplitude = jitterAmplitude(layout, intensity, level) * bendShare; const from = barFrom(layout, level); const to = barTo(layout, level); const stride = strideFor(Math.abs(to - from)); const offset = index * FILAMENT_POINTS; context.beginPath(); for (let point = 0; point < FILAMENT_POINTS; point += stride) { const along = from + ((to - from) * point) / (FILAMENT_POINTS - 1); const bend = (scene.jitter[offset + point] ?? 0) * amplitude; plot(context, layout, across + bend, along, point === 0); } }; const strokeFilaments = ( context: CanvasRenderingContext2D, input: PaintInput, pass: FilamentPass ) => { context.lineWidth = Math.max( pass.minWidth, input.layout.barWidth * pass.width ); context.lineJoin = pass.join; for (const [index, level] of input.levels.entries()) { const flicker = input.scene.flicker[index] ?? 1; context.globalAlpha = clamp(pass.alpha(level) * flicker, 0, 1); traceFilament(context, input, index, level, pass.bend); context.stroke(); } }; /** Where a bar's tip is, jitter included, as `[across, along]`. */ const tipOf = ( { intensity, layout, scene }: PaintInput, index: number, level: number, tip: Tip ): [number, number] => { const point = tip === "to" ? FILAMENT_POINTS - 1 : 0; const bend = (scene.jitter[index * FILAMENT_POINTS + point] ?? 0) * jitterAmplitude(layout, intensity, level); const along = tip === "to" ? barTo(layout, level) : barFrom(layout, level); return [layout.first + index * layout.pitch + bend, along]; }; const fillTips = ( context: CanvasRenderingContext2D, input: PaintInput, radius: number ) => { const tips: Tip[] = input.layout.align === "center" ? ["from", "to"] : ["to"]; for (const [index, level] of input.levels.entries()) { const heat = (level - TIP_LEVEL) / (1 - TIP_LEVEL); if (heat > 0) { context.globalAlpha = clamp(heat, 0, 1) * (input.scene.flicker[index] ?? 1); context.beginPath(); for (const tip of tips) { const [across, along] = tipOf(input, index, level, tip); const x = input.layout.horizontal ? across : along; const y = input.layout.horizontal ? along : across; context.moveTo(x + radius, y); context.arc(x, y, radius, 0, Math.PI * 2); } context.fill(); } } }; const traceArc = ( context: CanvasRenderingContext2D, input: PaintInput, arc: ElectricArc ) => { const { layout, levels } = input; const [fromAcross, fromAlong] = tipOf( input, arc.index, levels[arc.index] ?? 0, arc.tip ); const [toAcross, toAlong] = tipOf( input, arc.index + arc.reach, levels[arc.index + arc.reach] ?? 0, arc.tip ); const acrossSpan = toAcross - fromAcross; const alongSpan = toAlong - fromAlong; const length = Math.hypot(acrossSpan, alongSpan) || 1; const bow = length * ARC_BOW; context.beginPath(); for (let point = 0; point < ARC_POINTS; point += 1) { const progress = point / (ARC_POINTS - 1); const bend = (arc.jitter[point] ?? 0) * bow; plot( context, layout, fromAcross + acrossSpan * progress - (alongSpan / length) * bend, fromAlong + alongSpan * progress + (acrossSpan / length) * bend, point === 0 ); } }; const strokeArcs = ( context: CanvasRenderingContext2D, input: PaintInput, lineWidth: number, alpha: number ) => { context.lineWidth = lineWidth; for (const arc of input.scene.arcs) { if (arc.lifeMs > 0) { const age = (input.nowMs - arc.bornMs) / arc.lifeMs; context.globalAlpha = clamp(alpha * (1 - age * age), 0, 1); traceArc(context, input, arc); context.stroke(); } } }; /** Wide, soft strokes. The canvas is blurred with CSS, which is far cheaper than `shadowBlur`. */ const paintGlow = (context: CanvasRenderingContext2D, input: PaintInput) => { const { barWidth } = input.layout; context.strokeStyle = input.colors.glow; context.fillStyle = input.colors.glow; strokeFilaments(context, input, GLOW_PASS); fillTips(context, input, barWidth * 1.2); context.lineJoin = "round"; strokeArcs(context, input, barWidth, 0.7); }; const paintMain = (context: CanvasRenderingContext2D, input: PaintInput) => { const { barWidth } = input.layout; context.strokeStyle = input.colors.body; strokeFilaments(context, input, SHEATH_PASS); context.lineJoin = "miter"; strokeArcs(context, input, Math.max(1.5, barWidth * 0.45), 0.6); context.strokeStyle = input.colors.core; context.fillStyle = input.colors.core; strokeFilaments(context, input, CORE_PASS); strokeArcs(context, input, 1, 1); fillTips(context, input, Math.max(1, barWidth * 0.35)); strokeSparks( context, input.scene.sparks, Math.max(1, barWidth * 0.25), SPARK_TRAIL_SECONDS ); }; export const ElectricBarVisualizer = (props: ElectricBarVisualizerProps) => { const config = useAudioConfig(); const reducedMotion = useReducedMotion(); const orientation = () => props.orientation ?? config.orientation ?? "horizontal"; let root: HTMLDivElement | undefined; let main: HTMLCanvasElement | undefined; let glow: HTMLCanvasElement | undefined; let input: ArrayLike | null = null; let hadLevels = false; const visible = useVisibility(() => root ?? null); const paint = (next: ArrayLike) => { input = next; }; useFrameSource( () => props.source, (frame) => paint(frame.bands) ); createCompatEffect( () => props.levels, (levels) => { if (levels) { input = levels; hadLevels = true; } else if (hadLevels) { input = null; hadLevels = false; } } ); createCompatEffect( () => props.actionsRef, (ref) => { setRefValue(ref, { paint }); return () => setRefValue(ref, null); } ); createCompatEffect( () => ({ align: props.align ?? "center", arcs: props.arcs ?? true, barCount: props.barCount ?? DEFAULT_BAR_COUNT, barGap: props.barGap ?? DEFAULT_BAR_GAP, barWidth: props.barWidth ?? DEFAULT_BAR_WIDTH, idle: props.idle ?? "static", intensity: props.intensity ?? DEFAULT_INTENSITY, loading: props.loading ?? false, minLevel: props.minLevel ?? DEFAULT_MIN_LEVEL, mirrored: props.mirrored ?? false, orientation: orientation(), reducedMotion: reducedMotion(), sparks: props.sparks ?? true, }), (options) => { const container = root; const sharp = main; const blurred = glow; const mainContext = sharp?.getContext("2d"); const glowContext = blurred?.getContext("2d"); if (!(container && sharp && blurred && mainContext && glowContext)) return; const strength = clamp(options.intensity, 0, 1); const barLevels = createBarLevels(options); const scene = createElectricScene({ ...options, intensity: strength }); let size: ElectricCanvasSize = { glowRatio: 1, height: 0, ratio: 1, width: 0, }; let layout = layoutElectricBars(0, 0, options); let colors = readElectricColors(sharp, blurred); let sinceColor = 0; let lastPaint = 0; let active = false; const resize = () => { size = fitElectricCanvases(sharp, blurred); layout = layoutElectricBars(size.width, size.height, options); }; resize(); const observer = new ResizeObserver(resize); observer.observe(sharp); const unsubscribe = subscribeFrame((nowMs) => { if (!visible.current || size.width === 0) return; if (++sinceColor >= COLOR_REFRESH_FRAMES) { sinceColor = 0; colors = readElectricColors(sharp, blurred); } if ( options.reducedMotion && nowMs - lastPaint < REDUCED_MOTION_INTERVAL_MS ) return; lastPaint = nowMs; const nextActive = barLevels.step(nowMs, input); if (nextActive !== active) { active = nextActive; container.toggleAttribute("data-active", active); } scene.step(nowMs, barLevels.levels, layout); const drawing: PaintInput = { colors, intensity: options.reducedMotion ? 0 : strength, layout, levels: barLevels.levels, nowMs, scene, }; clearElectricCanvas(glowContext, size, size.glowRatio); paintGlow(glowContext, drawing); clearElectricCanvas(mainContext, size, size.ratio); paintMain(mainContext, drawing); }); return () => { unsubscribe(); observer.disconnect(); container.removeAttribute("data-active"); }; } ); const rest = omitProps(props, [ "ref", "class", "className", "source", "levels", "barCount", "align", "mirrored", "minLevel", "idle", "loading", "orientation", "intensity", "arcs", "sparks", "barWidth", "barGap", "actionsRef", ]); return (

{ root = node; setRefValue(props.ref, node); }} >

); }; 56:T56d,Audio component source adapted from https://github.com/audiocn/ui. MIT License — Copyright (c) 2026 OrcDev Regular SVG icon geometry adapted from @phosphor-icons/react 2.1.10. MIT License — Copyright (c) 2020 Phosphor Icons The following permission and warranty terms apply to both notices. Retain this file with copies or substantial portions of the source. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 52:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","solid-js@^1.9.15",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/solid-js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"solid-js@^1.9.15"}]]}]}]]}],["$","$L53",null,{"namespace":"@audiocn-solid","registryDependencies":["@audiocn-solid/core","@audiocn-solid/electric","@audiocn-solid/use-audio-config","@audiocn-solid/use-frame-source","@audiocn-solid/use-reduced-motion","@audiocn-solid/use-visibility"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"components/ui/electric-bar-visualizer.tsx","content":"$55","type":"registry:ui"},{"path":"lib/audiocn-license.txt","content":"$56","type":"registry:file","target":"@lib/audiocn-license.txt"}],"className":"h-[70svh] min-h-80"}]]}]