gpui-ai

Effects · Decoration

Veil

The over layer, not the under one: a gradient across the content, passing every click through to what it covers.

Veil — gpui-ai

Starts when it scrolls into view

Pop out

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

The decorations story, opened on Veil. 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 veil(cx: &App) -> impl IntoElement {
    let ink: Hsla = cx.theme().primary;
    div()
        .size_full()
        .rounded(decoration::frame_radius(cx))
        .bg(linear_gradient(
            // Down and across, so it reads as light falling rather than a band.
            135.0,
            linear_color_stop(ink.opacity(0.0), 0.35),
            linear_color_stop(ink.opacity(0.42), 1.0),
        ))
}

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