How to render/blend layers with transparency/alpha

[chris-kruining]

I am using the composition api to split my app into a couple of layers. And I want to implement a top layer with a dialog that has a transparent backdrop as to darken the layers underneath. But when I give that layer an alpha(black, .1) background I just get a black overlay.

Is there some layer blending mode I need to enable somewhere? Or is this outside of the realm of what lipgloss is capable of?

[lrstanley]

The way the compositor, and thus the canvas works right now, a top layer that writes to a cell (regardless of whether it's just alpha changes) will replace the underlying cells. Not sure if that's something that would be easy to support in the compositor either (calculating the merging of two colors when the alpha value is < 1). That said, there are other ways to do backdrops.

References where I also discuss this (and may look at making a PR to simplify this for users):

• https://discord.com/channels/1032368467246075914/1485792124342374420/1496656860512518294
• https://discord.com/channels/1032368467246075914/1466316426917843009/1496661692006928448 (where I discuss the potential for natively supporting in the compositor)

---

Take a look at one of my apps, which is probably the simplest implementation that I can think of right now:

• Vex backdrop: https://github.com/lrstanley/vex/blob/72b505417a2ce2c6910d7f92efa32a2632b9942b/internal/ui/tui.go#L273-L333

The tl;dr is:

1. Add all layers to a compositor.
2. Compose it onto a canvas (I use a reusable canvas, but this can be brand new each time)
3. If there are dialogs/popups/etc, iterate over canvas cells, applying the backdrop style to the cells that are not within the dialog bounds (this happens in applyBackdrop method). This doesn't replace the cells, rather changes the foreground/background color of them.
4. Render the canvas and apply to the view (I use a reusable canvas, but that could be brand new each render).

The result:

WindowsTerminal_7rhf8QVeFI.mp4

[chris-kruining]

This looks really good, thanks for the write up. I'll probably end up with something similar to this. Still want to make an attempt at blending the colors in a cell as well.

[CLHatch]

I would think it would be fairly simple for lipgloss to support full transparency insead of partial transparency? My use case was a shadow, using gradient characters. If you were to use no background for said gradient characters, have it pick up the background of the first non-transparent background color in the layers below.