Skip to content

Add Liquid glass card#1314

Open
Katotodan wants to merge 1 commit intolayer5io:masterfrom
Katotodan:feat/liquid-class-card
Open

Add Liquid glass card#1314
Katotodan wants to merge 1 commit intolayer5io:masterfrom
Katotodan:feat/liquid-class-card

Conversation

@Katotodan
Copy link
Member

Notes for Reviewers
This PR introduces a new LiquidGlass UI primitive to the Sistent library. The component provides a reusable “liquid glass / glassmorphism” effect that can be used as a container for content while preserving readability and visual depth.

Features

  1. Frosted glass effect using backdrop-filter (blur + saturation)
  2. Optional “overLight” mode for light backgrounds
  3. Optional shadow toggle (showShadow)
  4. Customizable:
  • blurAmount
  • saturation
  • cornerRadius
  • padding

Implementation Notes

  • The glass effect is isolated in a dedicated backdrop layer to avoid blurring child content.
  • Defaults are provided to ensure the component works out-of-the-box while remaining customizable.

This PR fixes #1238

Signed commits

  • Yes, I signed my commits.

Signed-off-by: DANIEL KATOTO <katotodan@gmail.com>
@Katotodan
Copy link
Member Author

While developing, I tried this component inside a simple react app to see the output.
Here is the demo

Screen.Recording.2026-02-11.at.16.58.03.mov

Here is a screenshot of code for the above react app visualization.
Screenshot 2026-02-11 at 17 00 17

@Katotodan
Copy link
Member Author

I have also tried it with layer5 website locally.

Screen.Recording.2026-02-11.at.17.02.10.mov

Here is a portion of layer5 main page code with the LiquidGlass component on it
Screenshot 2026-02-11 at 17 03 32

The zIndex is customized (and other properties as well).

@leecalcote
Copy link
Member

We have something similar on www.kanvas.new now., so the concept is viable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Explore use of Liquid Glass design effects in different Sistent components

2 participants