gpui-ai

Effects · Decoration

Liquid metal

The same stroke with a metallic ramp instead of a beam. Metal is not a light: it snaps from dark to bright and back, because it reflects a small bright thing rather than emitting.

Liquid metal — gpui-ai

Starts when it scrolls into view

Pop out

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

The decorations story, opened on Liquid metal. 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 metal_colour(along: f32) -> Hsla {
    let turns = along.rem_euclid(1.0) * 2.0 * std::f32::consts::TAU;
    // Fourth power rather than sixth: steep enough to read as a reflection
    // rather than a lamp, shallow enough that the ramp is not crossing most
    // of its range inside one piece.
    let sheen = (turns.cos() * 0.5 + 0.5).powi(4);
    Hsla {
        h: 0.62,
        s: 0.10,
        l: 0.28 + sheen * 0.68,
        a: 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))