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.

@Katotodan
Copy link
Member Author

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

Thank you for the clarification @leecalcote.
Just to confirm, does this mean the component direction is appropriate as implemented, or would you prefer that I align it more closely with the version currently on kanvas.new?
Based on the issue description, I took inspiration from the liquid-glass-react reference repository (https://github.com/rdev/liquid-glass-react) and implemented the feature following that concept. I’m happy to refine it further if needed.

@Bhumikagarggg
Copy link
Contributor

@Katotodan Thank you for your contribution! Let's discuss this during the website call tomorrow at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

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

3 participants