gpui-ai

Effects · Decoration

Photo + scrim

The same photograph under a fixed dark scrim — a flat black at sixty per cent, chosen by hand and identical in every theme. The commonest thing anyone will actually want.

Photo + scrim — gpui-ai

Starts when it scrolls into view

Pop out

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

The decorations story, opened on Photo + scrim. 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 scrim_panel(cx: &App) -> impl IntoElement {
    div()
        .size_full()
        .child(photograph(cx))
        // Fixed, not from the theme: this is what an application reaches for
        // when it wants one look everywhere.
        .child(
            div()
                .absolute()
                .inset_0()
                .rounded(decoration::frame_radius(cx))
                .bg(SCRIM),
        )
}

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))