gpui-ai

Effects · Decoration

Frosted

Actual frosted glass: the backdrop blurred on the CPU and placed by the same numbers as the sharp copy behind it, so the two line up. GPUI has no backdrop filter — this works because the parent knows where both are.

Frosted — gpui-ai

Starts when it scrolls into view

Pop out

NORD FROST · DARK · RADIUS 6/10 · BASE 16PX · SHADOW

The decorations story, opened on Frosted. The switcher above the card is the story's own — every state it offers has a page here.

Code

Cut from the gallery’s own decorations, so it is the code that drew the frame above rather than a description of it.

crates/gallery/src/decorations.rsOpen in the galleryImplementation
fn frosted_panel(cx: &App) -> impl IntoElement {
    let ground = cx.theme().background;
    div()
        .size_full()
        .child(
            // Deliberately unrounded: this one is larger than the slot and
            // positioned by offset, so its corners are nowhere near the
            // frame's. The wash and the edge light above it carry the shape.
            img(frosted(f32::from(decoration::frame_radius(cx))))
                .absolute()
                .inset_0(),
        )
        // Frost is not only blur: a little of the panel's own ground, and a
        // lit top edge where the light catches the bevel.
        .child(
            div()
                .absolute()
                .inset_0()
                .rounded(decoration::frame_radius(cx))
                .bg(ground.opacity(0.45)),
        )
        .child(edge_light(cx))
}

Applying it

Every framed component takes a Decoration, and the layer decides for itself whether it belongs to the shape — either by carrying the frame’s radius, or by not reaching a corner. The two rules are the whole contract.

crates/gallery/src/decorations.rs
let card = ApprovalCard::new("decorated-gate", "Publish the launch plan?")
    .description(
        "The card is unchanged. Everything behind and in front of it \
         is the application's.",
    )
    .decoration(kind.build(cx))