Config

Welcome to the config wiki page. This page should help to understand how to configure vibe.

General config file

~/.config/vibe/config.toml contains the config vibe itself and has the following options:

[graphics_config]
# Decide which gpu vibe should prefer.
# Can be either "low-power" (often your integrated GPU) or "high-performance" (your external GPU)
power_preference = "low-power"

# Set backend which you'd like to use. Can be any of those entries with `pub const <NAME>`: https://docs.rs/wgpu/latest/wgpu/struct.Backends.html#implementations
# Note:
#  - It's recommended to let it be `VULKAN`
#  - Writing each letter CAPITALIZED is required!
backend = "VULKAN"

# # (optional)
# # You can pass the name of your gpu explicitely by setting its name.
# # Just uncomment the line below, `vibe` will throw an error and list you all available devices it can find. Copy+paste then the device name you'd like to ues for `vibe`.
# gpu_name = "<your gpu>"

[audio_config]
# # (optional)
# # You can set the audio (output) device which `vibe` should listen to process them (like your current playing song or your microphone).
# # Invoke `vibe` with the `--show-output-devices` cli argument and it will give you a list of devices which you can choose from.
# # Pick the desired output and replace the text with the brackets below with your picked device.
# #
# # If this field omitted `vibe` will try to use your default audio output device.
# output_device_name = "<your output device name>"

Output config file format

Location

Each output (monitor) has its own config file which can you find in ~/.config/vibe/output_configs/<output-name>.toml.

Format

Each output-config has the following structure:

# set to `false` if you don't want to have any shaders on the given output
enable = true

# now add as many components/shaders as you want. They will be rendered sequentially.
# See below in the `Components` section for a list of components which you can copy+paste and tweak afterwards

An example config with every component can be found here.

Hot-reloading / Tinkering

You can enable hot-reloading for one output-config by just adding the name of the output you'd like to tinker/hot-reload as an argument to vibe.

Example

I have ~/.config/vibe/output_configs/HDMI-A-1.toml on my machine so I just invoke vibe HDMI-A-1 and a window will pop-up with hot-reloading.

Components

A component is an animation/effect you can add to the components block of the config of the given output. For example you can add the Bars component to let vibe render bars with audio visualizing and effects.

Bars

Displays the frequency bars as in cava/glava. There are multiple variations of this (bars with different effects/how you can decorate them).

The general config looks as follows:

[[components]]
[components.Bars]
# set the maximum height for the bars.
# Examples:
#   - `1.0` means 100% (it will use your full monitor height for the bars)
#   - `0.25` means 25% of your full monitor height will be used for the bars
max_height = 0.75

# Set where the bars should be placed.
# Can be one of the following values:
#
#     Bottom, Right, Left, Top, Custom
#
# You can uncomment the lines after the `==` to use a custom placement instead
placement = "Bottom"
# ==
# [components.Bars.placement.Custom]
# # Set the position of the bottom left corner.
# # Each value should be within the range `[0, 1]`. For example:
# #  - `[0.0, 0.0]` means the top left corner of your screen
# #  - `[0.0, 1.0]` means the bottom left corner of your screnn
# #  - `[1.0, 1.0]` means the bottom right corner of your screen
# bottom_left_corner = [0.0, 0.0]
# #
# # Set the area width on how many space the bars should occupy.
# # This value should be in the range [0, 1]. Examples:
# #   - `1.0` means that it should use the full screen width
# #   - `0.5` means that it should use half of the screen width
# width_factor = 1.0
# #
# # Rotate the bars with the given degree.
# rotation = 0.0

# Set the format of the bars.
# For example:
#   If you want the bars to be mirrored in the middle and in the middle of the screen
#   the bass should be shown, then you'd choose `TrebleBassTreble` which means:
#   "From left to right: Treble bars, bass bars and then again treble bars".
#
# Can be one of the following values:
#   - BassTreble
#   - TrebleBass
#   - TrebleBassTreble
#   - BassTrebleBass
format = "BassTreble"

# set the amount of bars you'd like to display
[components.Bars.audio_conf]
amount_bars = 60

# Set how fast the bars should adjust to the new height.
# The higher the value, the faster they are adjusting to the new heights.
sensitivity = 2.0

# Set the frequency range (in Hz) which it should visualize.
freq_range = { start = 50, end = 10000 }

In addition to the config above, you have to pick one Bars variation:

Bars variation - Color

Example image

Give each bar a solid color:

[components.Bars.variant]
# each value must be within the range 0-255
Color = [0, 0, 255, 255] # [red, green, blue, alpha]

Bars variation - Presence gradient

Example image

If the bar is relatively small, it will use the given low_presence color. The higher the bar is, the more it will use high_presence instead.

[components.Bars.variant.PresenceGradient]
# each value must be within the range 0-255
high_presence = [0, 255, 255, 255] # [red, green, blue, alpha]
low_presence = [13, 0, 82, 255]  # [red, green, blue, alpha]

Bars variation - FragmentCode

Example image

This is for people who would like to decorate the bars by writing the fragment shader on their own :D You can write the fragment shader in wgsl or glsl. There are some variables which you can access:

`wgsl` example

[components.Bars.variant.FragmentCode]
language = "Wgsl"

path = "/tmp/fragment_code.wgsl"
# or inline the code directly:
# code = """
# @fragment
# fn main(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
#     let color = sin(vec3<f32>(2., 4., 8.) * iTime * .25) * .2 + .6;
#     let alpha = 1. - (pos.y / iResolution.y);
#
#     return vec4<f32>(color, alpha);
# }
# """

`glsl` example

[components.Bars.variant.FragmentCode]
language = "Glsl"
path = "/tmp/fragment_code.glsl"
# or inline the code directly:
# code = """
# void main() {
#     vec3 col = sin(vec3(2., 4., 8.) * iTime * .25) * .2 + .6;
#     float alpha = 1. - gl_FragCoord.y / iResolution.y;
#
#     fragColor = vec4(col, alpha);
# }
# """

Fragment canvas

Create a component to write shadertoy-like shaders. If you want to use the shadertoy-shaders, you generally need to do the following things:

Replace the void mainImage(...) function signature with void main().
Replace fragCoord with gl_FragCoord and it should work.

The config looks as follows:

[[components]]
# Set the length of the `freqs` buffer (aka. the amount of bars)
[components.FragmentCanvas.audio_conf]
amount_bars = 60

# Set how fast the bars should adjust to the new height.
# The higher the value, the faster they are adjusting to the new heights.
sensitivity = 2.0

# Set the frequency range (in Hz) which it should visualize.
freq_range = { start = 50, end = 10000 }

Fragment code

You can write them in wgsl or glsl. Here are the global variables which you can access in your fragment shader:

`wgsl` example

[components.FragmentCanvas.fragment_code]
language = "Wgsl"
path = "/tmp/fragment_code.wgsl"
# or inline the code directly:
# code = """
# @fragment
# fn main(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
#     // create a black screen
#     var color = vec3(0.);
#     return vec4<f32>(color, 1.);
# }
# """

`glsl` example

[components.FragmentCanvas.fragment_code]
language = "Glsl"
path = "/tmp/fragment_code.glsl"
# or inline the code directly
# code = """
# void main() {
#     // also create a black screen...
#     vec3 col = vec3(0.);
#     fragColor = vec4(col, 1.);
# }
# """

Aurodio

Example image

Something similar to this one: https://www.shadertoy.com/view/3XfGD4. The config looks as follows:

[[components]]
[components.Aurodio]
# rgb colors. Each values has to be within the range [0, 255].
base_color = [0, 122, 122]
# set the speed on how the whole canvas moves. The higher your value, the faster it moves.
movement_speed = 0.009999999776482582

[components.Aurodio.audio_conf]
# Set how fast the bars should adjust to the new height.
# The higher the value, the faster they are adjusting to the new heights.
sensitivity = 2.0

# You can add any amount of those `[[components.Aurodio.layers]]`.
# Each one will be used to render one layer of those glowing lines.
#
# Note: Don't add too many since they will increase the computing power significantly for your gpu!
[[components.Aurodio.layers]]
# start and end frequency (in Hz) which the layer should "listen" to
freq_range = { start = 50, end = 500 }
# decide how far out you'd like to zoom for the layer. The highe trhe value, the more "cells"
# you are going to see
zoom_factor = 5.0

# # Uncomment this block to add a second layer of "lines".
# [[components.Aurodio.layers]]
# freq_range = { start = 600, end = 2000 }
# zoom_factor = 10.0

Graph

Basically a continuous version of the Bars component.

The config looks as follows:

[[components]]
[components.Graph]
# set the maximum height for the bars.
# Examples:
#   - `1.0` means 100% (it will use your full monitor height for the bars)
#   - `0.25` means 25% of your full monitor height will be used for the bars
max_height = 0.5

# The smaller this value is, the less blurry it will appear at its edge.
smoothness = 0.01

# Set the placement of the graph on your screen. Possible values are: ["Top", "Bottom", "Right", "Left"]
placement = "Bottom"

[components.Graph.audio_conf]
# Set how fast the bars should adjust to the new height.
# The higher the value, the faster they are adjusting to the new heights.
sensitivity = 2.0

# Set the frequency range (in Hz) which it should visualize.
freq_range = {start = 50, end = 5000}

In addition to the config above, you have to pick one Graph variant.

Graph variant - Color

Example image

Give the graph just a single color:

[components.Graph.variant]
# each value must be within the range 0-255
Color = [0, 0, 255, 255] # [red, green, blue, alpha]

Graph variant - Horizontal gradient

Example image

Create a horizontal color gradient:

[components.Graph.variant.HorizontalGradient]
# each value must be within the range 0-255
left = [255, 0, 0, 255] # [red, green, blue, alpha]
right = [0, 0, 255, 255] # [red, green, blue, alpha]

Graph variant - Vertical gradient

Example image

Create a vertical color gradient:

[components.Graph.variant.VerticalGradient]
# each value must be within the range 0-255
top = [3, 185, 191, 255] # [red, green, blue, alpha]
bottom = [2, 111, 114, 255] # [red, green, blue, alpha]

Circle

Draws the frequencies in a circle with different variants. The config looks as follows:

[[components]]
[components.Circle]
# Set the radius of the circle
radius = 0.1

# Rotate the circle (in Degrees).
#
# - `0.0`: Bass is on the right
# - `90.0`: Bass is at the bottom
# - etc.
rotation = 90.0

# Set the center coordinates of the circle.
# This array must contain 2 values where each value is within the range [0, 1].
# Example values:
#  - [0.0, 0.0]: Center is at the top left corner
#  - [1.0, 1.0]: Center is at the bottom right corner
#  - [0.5, 0.5]: Center is at the half of your screen height and width (a.k.a. in the middle of your screen)
position = [0.5, 0.5]

[components.Circle.audio_conf]
# Set the amount of "spikes"/"bars" for each half of the circle.
amount_bars = 30

# Set how fast the bars should adjust to the new height.
# The higher the value, the faster they are adjusting to the new heights.
sensitivity = 2.0

# Set the frequency range (in Hz) which it should visualize.
freq_range = { start = 50, end = 10000 }

Circle Variant - Graph

Example image

Renders the frequencies in a "continuous" graph:

[components.Circle.variant.Graph]
# Set how far the spikes should go out at most.
# The higher the value, the further away are the spikes of the center of the circle.
spike_sensitivity = 0.2

# Set the color of the circle.
# Each value must be within the range 0-255
# [red, green, blue, alpha]
color = [255, 255, 255, 255]

Radial

Display the bars in a circle:

[[components]]
[components.Radial]

# Rotate the radial (in degrees).
# Positive rotation is counter-clockwise. Negative clockwise.
init_rotation = 90.0

# Radius of the radial circle.
circle_radius = 0.2

# How far the bars should jump out.
# The smaller the value the less further away are the bars "jumping".
bar_height_sensitivity = 1.0

# Set the width of the bars.
bar_width = 0.01

# Set the center coordinates of the circle.
# This array must contain 2 values where each value is within the range [0, 1].
# Example values:
#  - [0.0, 0.0]: Center is at the top left corner of your screen
#  - [1.0, 1.0]: Center is at the bottom right corner of your screen
#  - [0.5, 0.5]: Center is at the half of your screen height and width (a.k.a. in the middle of your screen)
position = [0.5, 0.5]

[components.Radial.audio_conf]
# set the amount of bars
amount_bars = 60

# Set how fast the bars should adjust to the new height.
# The higher the value, the faster they are adjusting to the new heights.
sensitivity = 2.0

# Set the frequency range (in Hz) which it should visualize.
freq_range = { start = 50, end = 10000 }

Choose a variant to color the bars:

Radial - Color variant

Example image

Set the color of the bars:

[components.Radial.variant]
# each value must be within the range 0-255
Color = [0, 255, 0, 255] # [red, green, blue, alpha]

Chessy

Place a bunch of things in a grid like structure where each cell gets randomly assigned to an audio bar as from the Bars component.

Example with the Heart pattern:

Example image

[[components]]
[components.Chessy]
# Set how fast the canvas should move. The smaller the value, the slower the canvas moves.
movement_speed = 0.1

# Set which pattern each cell from the grid should display. Can be one of the following values:
#
#   "Box", "Circle", "Heart"
#
pattern = "Heart"

# Decide how "far away" you'd like to zoom out of the grid.
# The higher the value, the more cells you'll see.
zoom_factor = 5.0

[components.Chessy.audio_conf]
# Note: I know the name is bad but I couldn't really make up a new name. If you have one: Feel free to create an issue.
#
# Explanation: If it's set to `10` for example, then each cell can choose exactly one from at most 10 different audio frequency ranges.
#              Basically: Imagine you'd use the `Bars` component and set it to `10` bars. Now, if you're a cell you have to choose one
#                         you'd like to represent out of those `10` bars.
amount_bars = 10

# Set how fast each cell should adjust to the frequency.
# The higher the value, the faster they are adjusting to the new heights.
sensitivity = 5.0

# Set the frequency range (in Hz) which it should visualize.
freq_range = { start = 50, end = 10000 }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Config

General config file

Output config file format

Location

Format

Hot-reloading / Tinkering

Example

Components

Bars

Bars variation - Color

Bars variation - Presence gradient

Bars variation - FragmentCode

`wgsl` example

`glsl` example

Fragment canvas

Fragment code

`wgsl` example

`glsl` example

Aurodio

Graph

Graph variant - Color

Graph variant - Horizontal gradient

Graph variant - Vertical gradient

Circle

Circle Variant - Graph

Radial

Radial - Color variant

Chessy

Clone this wiki locally

Config

General config file

Output config file format

Location

Format

Hot-reloading / Tinkering

Example

Components

Bars

Bars variation - Color

Bars variation - Presence gradient

Bars variation - FragmentCode

wgsl example

glsl example

Fragment canvas

Fragment code

wgsl example

glsl example

Aurodio

Graph

Graph variant - Color

Graph variant - Horizontal gradient

Graph variant - Vertical gradient

Circle

Circle Variant - Graph

Radial

Radial - Color variant

Chessy

Clone this wiki locally

`wgsl` example

`glsl` example

`wgsl` example

`glsl` example