1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//! Compositor-side background blur behind translucent containers.
//!
//! Two floating cards with different corner radii blur whatever is behind
//! the surface (`ext-background-effect-v1`). On compositors without the
//! protocol or its blur capability this renders plain translucent cards.
use guido::prelude::*;
fn main() {
env_logger::init();
App::new().run(|app| {
let radius = create_signal(24.0f32);
app.add_surface(
SurfaceConfig::new()
.width(420)
.height(260)
.anchor(Anchor::TOP)
.margin([120, 0, 0, 0])
.layer(Layer::Overlay)
.exclusive_zone(ExclusiveZone::None)
.background_color(Color::TRANSPARENT),
move || {
container()
.width(fill())
.height(fill())
.layout(Flex::column().spacing(16.0).center())
.child(
// Blurred card: translucent background + blur behind.
// Restricted to the compositor's backdrop, since this
// example is about the desktop showing through a
// translucent surface, not about blurring the surface's
// own content.
container()
.backdrop_blur(
BackdropBlur::new(0.0).sources(BackdropSources::COMPOSITOR),
)
.background(Color::rgba(0.12, 0.12, 0.18, 0.55))
.corners(move || radius.get())
.padding(24.0)
.when_hovered(|s| s.lighter(0.05))
.on_click(move || {
// Cycle the radius to show the region follows it
radius.update(|r| *r = if *r >= 48.0 { 0.0 } else { *r + 12.0 });
})
.child(text("Blurred — click to change the corner radius")),
)
.child(
// Control card without blur, for comparison
container()
.background(Color::rgba(0.12, 0.12, 0.18, 0.55))
.corners(16.0)
.padding(24.0)
.child(text("Same background, no blur")),
)
},
);
});
}