Config git

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>"

# (optional)
# [audio_config]
# # 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_id = "<your output device id>"

# # (optional)
# # [default_component.<component>]
# # Here you can set the default component which should be used if a new output device has been plugged in your device.
# # For example if you plugged in a new monitor.
# # Here's an example which you can simply uncomment:
# # ---
# [default_component.FragmentCanvas.audio_conf]
# amount_bars = 60
# down = 2.0
# freq_range.Custom = { start = 50, end = 5000 }
# [default_component.FragmentCanvas.fragment_code]
# language = "Wgsl"
# code = """
# @fragment
# fn main(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
#     // create a red screen
#     var color = vec3(1., 0., 0.);
#     return vec4<f32>(color, 1.);
# }
# """

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 width of the component in pixels.
# width = 400
# #
# # Rotate the bars with the given degree.
# rotation = 0.0
#
# # If set to `true`, the bar will also jump "down", otherwise not.
# # See https://github.com/TornaxO7/vibe/pull/178 for an example.
# #
# # Note: This might be only worth if you place the bars in the middle of your screen.
# height_mirrored = false

# 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"

# # (optional)
# # Add a border to the bars.
# # - `color`:
# #   - format: RGBA.
# #   - See the `Color` section in this wiki for more information.
# # - `width`: The higher it is, the bigger border becomes. Just play around the given number.
# border = { width = 0.1, color = "#FF0000FF"}

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

# # (optional)
# # Set how fast the audio values (bars) should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values (bars) should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

# Set the frequency range (in Hz) which it should visualize.
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, end = 5000 }

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]
# format: RGBA
Color = "#0000FFFF"

See here for more information about the color setting.

Bars variation - Horizontal gradient

Example image

Give a horizontal gradient for your bars:

[components.Bars.variant.HorizontalGradient]
# format: RGBA
left = "#0000FFFF"
right = "#FF0000FF"

See here for more information about the color setting.

Bars variation - Vertical gradient

Example image

Give a vertical gradient for your bars:

[components.Bars.variant.VerticalGradient]
# format: RGBA
top = "#FF0000FF"
bottom = "#0000FFFF"

See here for more information about the color setting.

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]
# format: RGBA
high_presence = "#00FFFFFF"
low_presence = "#0d0052ff"

See here for more information about the color setting.

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]]

# [components.FragmentCanvas.texture]
# # (optional)
# # Add a path to an image which will be loaded as a texture in the shader to use it.
# # Take a look into the respective preamble of the shader language  you'd like to use (read further) to see a usage example.
# path = "/path/to/an/image/file.png"

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

# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

# Set the frequency range (in Hz) which it should visualize.
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, end = 5000 }

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]
# format: RGB
# See the `Color` section in this wiki for more information.
base_color = "#008080" # teal
# 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]
# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.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
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, end = 5000 }
# 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

# Set the format of the graph.
# For example:
#   If you want the graph 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 graph, bass graph and then again treble graph".
#
# Can be one of the following values:
#   - BassTreble
#   - TrebleBass
#   - TrebleBassTreble
#   - BassTrebleBass
format = "TrebleBassTreble"

# # (optional)
# # Add a border to the bars.
# # - `color`:
# #   - format: RGBA.
# #   - See the `Color` section in this wiki for more information.
# # - `width`: The higher it is, the bigger border becomes. Just play around the given number.
# border = { width = 0.1, color = "#FF0000FF"}

# Set the placement of the graph on your screen.
# 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.Graph.placement.Custom]
# # Assuming from the `Top` placement: Set the top left origin position.
# # 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
# offset = [0.0, 0.0]
# #
# # Set the amount of bars of the graph (aka its width).
# amount_bars = 512
# #
# # Rotate the bars with the given degree.
# rotation = 90.0

[components.Graph.audio_conf]
# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

# Set the frequency range (in Hz) which it should visualize.
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, 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]
# format: RGBA
Color = "#0000FFFF"

See here for more information about the color setting.

Graph variant - Horizontal gradient

Example image

Create a horizontal color gradient:

[components.Graph.variant.HorizontalGradient]
# format: RGBA
left = "#FF0000FF"
right = "#0000FFFF"

See here for more information about the color setting.

Graph variant - Vertical gradient

Example image

Create a vertical color gradient:

[components.Graph.variant.VerticalGradient]
# format: RGBA
top = "#03b9bf"
bottom = "#026f72"

See here for more information about the color setting.

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

# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

# Set the frequency range (in Hz) which it should visualize.
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, end = 5000 }

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.
# format: RGBA
color = "#FFFFFFFF"

See here for more information about the color setting.

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]

# Set the format of the radial component.
# For example:
#   Assuming you have the initial rotation of the radial set to 90 degrees and you want the
#   bass to be at the top of the circle while the treble should be at the left *and* right,
#   then you'd choose `TrebleBassTreble`.
#
# Can be one of the following values:
#   - BassTreble
#   - TrebleBass
#   - TrebleBassTreble
#   - BassTrebleBass
format = "TrebleBassTreble"

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

# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

# Set the frequency range (in Hz) which it should visualize.
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, end = 5000 }

Choose a variant to color the bars:

Radial - Color variant

Example image

Set the color of the bars:

[components.Radial.variant]
# format: RGBA
Color = "#00FF00FF"

See here for more information about the color setting.

Radial - Height gradient variant

Example image

Set the color for the inner and outer part of the bars:

[components.Radial.variant.HeightGradient]
# format: RGBA
inner = "#FF0000FF"
outer = "#ffffffff"

See here for more information about the color setting.

Radial - Presence Gradient

Example image

Same as the bar's presence gradient just for the radial component.

Set the color for the inner and outer part of the bars:

[components.Radial.variant.PresenceGradient]
# format: RGBA
low = "#0d0052ff"
high = "#00ffffff"

See here for more information about the color setting.

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

# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

# Set the frequency range (in Hz) which it should visualize.
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, end = 5000 }

Rising blocks (WIP)

Spawns a "block" for each beat it detects and let it rise up and slowly fade out.

[[components]]
[components.RisingBlocks]
# set the maximum height of the canvas where the blocks will rise up to
# Examples:
#   - `1.0` means 100% (it will use your full monitor height)
#   - `0.25` means 25% of your full monitor height will be used 
canvas_height = 0.8

# Set the speed of how fast the blocks should rise up. The higher the value is, the faster it will be.
speed = 0.8

# # (optional)
# # Set the easing effect for the rising-effect. Can be one of the following values:
# #   - `in_sine`
# #   - `out_sine`
# #   - `in_out_sine`
# #
# #   - `in_cubic`
# #   - `out_cubic`
# #   - `in_out_cubic`
# easing = "out_sine"

# # (optional)
# # Spawn the blocks at random places
# spawn_random = true

# # (optional)
# # Set the threshold which a frequency must reach before a block can be spawned for it.
# # Should be within the range [0, 1]. Examples: 0.9, 0.5, 0.1
# beat_threshold = 0.5

[components.RisingBlocks.background]
# set the background color (rgba)
color = "#FF0000FF"

# set the foreground color (rgba)
foreground = {color = "#00FFFFFF"}

Encrusting wallpaper

This kind of components adds some effects to the wallpaper which you give to it.

Pulse edges

vibe will try to detect some edges of your wallpaper and let them pulse to the given frequency range:

Click here for some examples.

[[components]]
[components.WallpaperPulseEdges]
# The path to the wallpaper.
# Note: The smaller the file is, the less:
#  - time `vibe` will need to detect the edges of your wallpaper (since it needs to check for less pixels)
#  - power hungry `vibe` will be while rendering
wallpaper_path = "/path/to/your/wallpaper"

# Value range: 0 <= low <= high <= 1.0
# Values will get clamped if they are outside the range.
#
# Explanation:
# After applying the edge detection to each pixel, each pixel will be within the range [0 (not edge), 1 (is edge)].
# Since there's possibly a lot of noise, you'll be able to tweak the thresholds where vibe will say:
#  - "Ok, this is an edge"                 (= <pixel value> is greater than `thresholds.high`)
#  - "Hm... maybe this is an edge."        (= <pixel value> is between `thresholds.high` and `thresholds.low`)"
#  - "Nope, this is not part of an edge."  (= <pixel value> is smaller than `thresholds.low`)
#
# So:
#   - If `vibe` is detecting not enough edges in your opinion:
#     => Decrease `low` if you want to let more pixel get into the heuristic later if it should be part of an edge.
#     => Decrease `high` if you want to definetely add more pixels as edges
#   - If `vibe` is detecting too many edges in your opinion:
#     => Increase `low` if you want to exclude more pixels to the heuristic later if it should be part of an edge.
#     => Increase `high` if you want to definetely add more pixels as edges
thresholds = { high = 0.7, low = 0.3 }

# The general brightness of the wallpaper.
# Should be within the range [0, 1].
wallpaper_brightness = 0.2

# Set the width of the glowing edges. The higher the value, the bigger their width.
edge_width = 4.0

# Decide how bright the pulsating edges should be.
# The higher the value, the brighter they get.
pulse_brightness = 4.0

# `vibe` will apply a gaussian blur on the image to reduce the noise (if it has any).
# You can tweak the parameters here if you want.
gaussian_blur = { sigma = 1.0, kernel_size = 9 }

[components.WallpaperPulseEdges.audio_conf]
# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

# The frequency range which should be used for the edges
# There are also presets:
# freq_range = "Bass"
# freq_range = "Mid"
# freq_range = "Treble"
freq_range.Custom = { start = 500, end = 5000 }

Light sources

Add some light sources which are pulsing to your music!

light-sources-demo.mp4

Music: https://www.youtube.com/watch?v=EdvyBtZhVKM
Wallpaper (I don't know the original author or what the original source is...): https://wallspic.com/de/image/155038-tefl_jobs_in_japan-japan-job-die_japanische_sprache-sprachkenntnisse

[[components]]
[components.WallpaperLightSources]
# The path to your wallpaper
wallpaper_path = "/path/to/wallpaper"

# Add the light sources to your wallpaper.
# Each light source has the following information:
# - `center`: the center coordinate of the light source:
#   - `[0.0, 0.0]`: top left corner
#   - `[1.0, 0.0]`: top right corner
#   - `[0.0, 1.0]`: bottom left corner
#   - `[1.0, 1.0]`: bottom right corner
# - `radius`: set how far the light should go
sources = [{center = [0.275, 0.35], radius = 2.0}, {center = [0.48,0.16], radius = 0.2}]

# - if `true` each light source will listen to the same `audio_conf` setting
# - if `false` the frequency range from `freq_range` will be distributed (like for bars) to each light source
uniform_pulse = true

# if you want to see where the centers of the light sources are, like when you're setting this up for the first time,
# set this to `true`
debug_sources = false

[components.WallpaperLightSources.audio_conf]
# The frequency range which should be used for the edges
# There are also presets:
# freq_range = "Mid"
# freq_range = "Treble"
# freq_range.Custom = { start = 500, end = 5000 }
freq_range = "Bass"

# # (optional)
# # Set how fast the audio values should go up/rise up to the new audio spike.
# # The lower the value, the faster they are adjusting to the new heights.
# up = 0.77

# # (optional)
# # Set how fast the audio values should go down/fall.
# # The higher the value, the faster they are adjusting to the new heights.
# down = 4.0

Fields

Here are description about some fields to avoid duplicated descriptions in the examples.

Color

# -- RGB example --
# format: "#RRGGBB"

Color = "#FF0000" # red

# -- RGBA example --
# format: "#RRGGBBAA"
Color = "#00FF00FF" # green
Color = "#00FF00AA" # a little transparent green

# -- Environment variables --
# Set the color in an environment variable.
# The value of the environment variable must match with one of the other
# formats (RGB or RGBA).

# Example:
# Start `vibe` with `MY_COLOR="#FF0000FF" vibe` (RGBA format)
Color = "$MY_COLOR" # will become `Color = "#FF0000FF"` for `vibe`

Navigation Menu

Config git

General config file

Output config file format

Location

Format

Hot-reloading / Tinkering

Example

Components

Bars

Bars variation - Color

Bars variation - Horizontal gradient

Bars variation - Vertical gradient

Bars variation - Presence gradient

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

Radial - Height gradient variant

Radial - Presence Gradient

Chessy

Rising blocks (WIP)

Encrusting wallpaper

Pulse edges

Light sources

Fields

Color

Uh oh!

Uh oh!

Clone this wiki locally

Config git

General config file

Output config file format

Location

Format

Hot-reloading / Tinkering

Example

Components

Bars

Bars variation - Color

Bars variation - Horizontal gradient

Bars variation - Vertical gradient

Bars variation - Presence gradient

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

Radial - Height gradient variant

Radial - Presence Gradient

Chessy

Rising blocks (WIP)

Encrusting wallpaper

Pulse edges

Light sources

Fields

Color

Uh oh!

Uh oh!

Clone this wiki locally

`wgsl` example

`glsl` example