Request: Documentation and example code for window-specific background blurring (by App ID or Namespace)

[ffs-akl]

I would like to request documentation and clear example code regarding how to apply background blurring to specific windows based on their App ID or Namespace/Class.

Proposed Addition:

Could you please provide:

1. An explanation or guide on how to target specific windows by App ID or namespace within shojiwm.
2. A snippet or configuration/code example demonstrating how to enable background blur for them.

Thank you very much for your time and help!

[bea4dev]

I'm definitely planning to expand the documentation, but if you’d like to get the information sooner, please refer to the configuration section below.
The default configuration already implements conditional rendering that changes the SSD based on the appId.
https://github.com/bea4dev/ShojiWM/blob/main/packages/config/src/index.tsx#L862

[ffs-akl]

I’m using the default configuration, but I’m not getting the liquid glass effect shown in your demo video. Instead, I only get the blurred effect shown in the screenshot below. Could you please let me know if there’s any additional configuration required to achieve the same effect?

my config

 const TERMINALS = ["kitty", "ghostty"];
  if (TERMINALS.includes(window.appId() ?? "")) {
    innerComponents = (
      <ShaderEffect shader={backgroundShader} direction="column">
        <Box direction="row" style={titlebarStyle}>
          {appIcon}
          {label}
          {minimizeButton}
          {maximizeButton}
          {closeButton}
        </Box>
        <ClientWindow />
      </ShaderEffect>
    );
  }

[bea4dev]

With the default configuration, the background distortion effect is applied only very slightly.
Please try adjusting the following uniforms variables.
https://github.com/bea4dev/ShojiWM/blob/main/packages/config/src/index.tsx#L822