gpui-ai

Effects · Decoration

Glass

Glass rather than frost: a convex bevel, Snell's law across its normal, and the view under the rim squeezed where the surface tips over. Frosted blurs what it covers; this lenses it.

Glass — gpui-ai

Starts when it scrolls into view

Pop out

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

The decorations story, opened on Glass. 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 glass_panel(cx: &App) -> impl IntoElement {
    div()
        .size_full()
        .child(
            img(lensed(f32::from(decoration::frame_radius(cx))))
                .absolute()
                .inset_0(),
        )
        // A breath of the panel's own ground, and the lit top edge. Glass is
        // not colourless; it lifts what is under it.
        .child(
            div()
                .absolute()
                .inset_0()
                .rounded(decoration::frame_radius(cx))
                .bg(cx.theme().background.opacity(0.16)),
        )
        .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))