frost
Builds Badge Card Frost ListRow
The code that drew it
A still frame holds a repeating animation at its first frame and a one-shot at its last, because a still of a moving thing is not reproducible. Run the gallery to review motion.
fn frost(_window: &mut Window, cx: &mut App) -> AnyElement {
let theme = cx.theme().clone();
let card = |title: &'static str, body: &'static str| {
div()
.column()
.gap(px(theme.space(Space::Xs)))
.p(px(theme.space(Space::Md)))
.child(crate::foundation::text(
&theme,
TypeScale::Label,
SharedString::from(title),
))
.child(caption(&theme, body))
};
let stripes = || {
div()
.absolute()
.top(px(56.0))
.left(px(100.0))
.w(px(330.0))
.h(px(64.0))
.flex()
.overflow_hidden()
.children((0..22).map(|index| {
div()
.flex_none()
.w(px(15.0))
.h(px(64.0))
.bg(if index % 2 == 0 {
theme.colors.accent
} else {
theme.colors.canvas
})
}))
};
stack(&theme)
.w(px(480.0))
.child(caption(&theme, "A floating surface on glass"))
.child(
div()
.relative()
.h(px(200.0))
.hairline(&theme)
.radius(&theme, Radius::Card)
.overflow_hidden()
.child(stripes())
.child(filler(&theme, "Document", 8))
.child(
div()
.absolute()
.top(px(48.0))
.left(px(120.0))
.w(px(240.0))
.child(
Frost::new("scene.frost.popover")
.radius(Radius::Card)
.child(card(
"Rename",
"The page behind stays visible, out of focus",
)),
),
),
)
.child(caption(&theme, "The same glass over a panel surface"))
.child(
div()
.relative()
.h(px(160.0))
.hairline(&theme)
.radius(&theme, Radius::Card)
.overflow_hidden()
.child(stripes())
.child(filler(&theme, "Files", 6))
.child(
div()
.absolute()
.top(px(32.0))
.left(px(120.0))
.w(px(280.0))
.child(
Frost::new("scene.frost.rail")
.surface(gpui_kit_theme::Surface::Panel)
.radius(Radius::Dialog)
.blur(32.0)
.child(card("Rail", "The striped backdrop stays out of focus")),
),
),
)
.into_any_element()
}