GPUI Box GitHub

Components / overlay

Frost builder

A frosted-glass surface: blurred backdrop, tinted fill, caller's content.

A builder is RenderOnce. Construct and mount it in one expression.

use gpui_kit::overlay::Frost;

Reviewed in frost.

Construct
new(ident: impl Into<Ident>) -> Self
Options

Chain onto the value.

surface(surface: Surface) -> Self
radius(radius: Radius) -> Self
blur(blur: f32) -> Self
child(child: impl IntoElement) -> Self
Example · frost
fn frost(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let card = |title: &'static str, body: &'static str| {
        div()
            .column()
            .gap(px(theme.space(Space::Xs)))
            .p(px(theme.space(Space::Md)))
            .child(crate::foundation::text(
                &theme,
                TypeScale::Label,
                SharedString::from(title),
            ))
            .child(caption(&theme, body))
    };
    // What is behind the glass is a page, not a test pattern. A block of
    // accent stripes dropped into a panel reads as a hole cut in it, and it
    // answers the wrong question anyway: the thing a reader has to be able to
    // judge is whether text they can otherwise read has gone out of focus.
    stack(&theme)
        .w(px(480.0))
        .child(caption(&theme, "A floating surface on glass"))
        .child(
            div()
                .relative()
                .h(px(200.0))
                .surface(&theme, Surface::Panel)
                .radius(&theme, Radius::Card)
                .overflow_hidden()
                .child(filler(&theme, "Document", 8))
                .child(
                    div()
                        .absolute()
                        .top(px(48.0))
                        // Far enough left to cross the lines. Placed clear of
                        // them the glass had nothing behind it, so the picture
                        // could not answer the one question it is here for:
                        // whether text a reader can otherwise read has gone
                        // out of focus.
                        .left(px(64.0))
                        .w(px(240.0))
                        .child(
                            Frost::new("scene.frost.popover")
                                .radius(Radius::Card)
                                .child(card(
                                    "Rename",
                                    "The page behind stays visible, out of focus",
                                )),
                        ),
                ),
        )
        .child(caption(
            &theme,
            "The same glass, blurred further and raised above the panel",
        ))
        .child(
            div()
                .relative()
                .h(px(160.0))
                .surface(&theme, Surface::Panel)
                .radius(&theme, Radius::Card)
                .overflow_hidden()
                .child(filler(&theme, "Files", 6))
                .child(
                    div()
                        .absolute()
                        .top(px(32.0))
                        .left(px(64.0))
                        .w(px(280.0))
                        .child(
                            Frost::new("scene.frost.rail")
                                // A surface a step above the page it covers.
                                // Tinted with the page's own colour the glass
                                // had no surface of its own: at any alpha, a
                                // fill the colour of what is behind it adds
                                // nothing, and the rail's words landed
                                // directly on the words of the file list.
                                .surface(gpui_kit_theme::Surface::Raised)
                                .radius(Radius::Dialog)
                                .blur(32.0)
                                .child(card(
                                    "Rail",
                                    "The lines behind stay legible and out of focus",
                                )),
                        ),
                ),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/overlay/frost.rs