gpui-ai

Effects · Decoration

Tint

Translucency and an edge highlight, no blur. Cheaper, honest about it, and what most panels actually need.

Tint — gpui-ai

Starts when it scrolls into view

Pop out

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

The decorations story, opened on Tint. 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 tint_panel(cx: &App) -> impl IntoElement {
    div()
        .size_full()
        .child(
            div()
                .absolute()
                .inset_0()
                .rounded(decoration::frame_radius(cx))
                .bg(cx.theme().background.opacity(0.55)),
        )
        .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))