Gradients

Bar colors are rasterized into a 256×1 lookup texture, so any CSS color and native gradient interpolation work. Pass a preset name or an array of custom stops to the gradient option.

Presets

new FFTVisualizer(canvas, { mode: 'local', gradient: 'sunset' })

<FFTVisualizer mode="local" gradient="sunset" />

Built-in presets (exported as gradientPresets / gradientNames):

classic · rainbow · blue · prism · orangered · steelblue · sunset · aurora · dusk · mono

Custom stops

Any CSS color format works — hex, rgb(), hsl(), named colors:

new FFTVisualizer(canvas, {
  mode: 'local',
  gradient: [
    { stop: 0, color: '#001233' },
    { stop: 0.5, color: 'rgb(15, 155, 142)' },
    { stop: 1, color: 'hsl(280, 95%, 75%)' }
  ]
})

<FFTVisualizer
  mode="local"
  :gradient="[
    { stop: 0, color: '#001233' },
    { stop: 0.5, color: 'rgb(15, 155, 142)' },
    { stop: 1, color: 'hsl(280, 95%, 75%)' }
  ]"
/>

Direction & color mode

• gradientDirection: 'horizontal' runs the gradient across the frequency axis instead of the level axis.
• colorMode: 'bar-level' colors each whole bar by its current level (a VU-meter feel) rather than by position along the gradient axis.

Helpers

For building settings UIs or your own rendering, these are exported from both packages:

import {
  gradientPresets,
  gradientNames,
  resolveGradientStops,
  buildGradientLUT,
  GRADIENT_LUT_SIZE,
  type GradientStop,
  type GradientName,
  type GradientInput
} from 'fft-visualizer-core'

import {
  gradientPresets,
  gradientNames,
  resolveGradientStops,
  buildGradientLUT,
  type GradientStop,
  type GradientName,
  type GradientInput
} from 'fft-visualizer-vue'

The Vue package re-exports these from the core for convenience. The GRADIENT_LUT_SIZE constant is core-only — import it from fft-visualizer-core if you need it.