GlassGlass

레이어Layers

아래에서 위로 세 겹입니다. React의 LiquidGlass와 Flutter의 HoronLiquidGlass가 @horon-ai/tokens의 같은 값을 읽습니다.Three layers, bottom to top. React's LiquidGlass and Flutter's HoronLiquidGlass read the same values from @horon-ai/tokens.

• 배경: 뒤 내용을 20px 흐리게 하고 채도를 180%로 올립니다.Backdrop: blurs what is behind by 20px and raises saturation to 180%.
• 채움: glass-clear, glass-regular, glass-thick 중 하나입니다. React는 호스트가 칠하고 Flutter는 위젯이 칠합니다.Fill: one of glass-clear, glass-regular, or glass-thick. In React the host paints it; in Flutter the widget does.
• 테두리: 가장자리 안쪽 1px 링입니다. 위가 가장 밝고(rgba(255, 255, 255, 0.7)), 가운데에서 옅어졌다가(rgba(255, 255, 255, 0.12)) 아래에서 조금 다시 밝아집니다(rgba(255, 255, 255, 0.3)). 다크 모드는 더 옅습니다.Border: a 1px ring inside the edge. Brightest at the top (rgba(255, 255, 255, 0.7)), fading at the middle (rgba(255, 255, 255, 0.12)) and brightening a little at the bottom (rgba(255, 255, 255, 0.3)). Darker in dark mode.

굴절, 혼합 모드, 높이에 따라 바뀌는 값은 쓰지 않습니다. Safari와 macOS 데스크톱 앱(WKWebView)은 배경을 휘게 할 수 없어서, 모든 플랫폼이 같은 모습이 되도록 모두가 그릴 수 있는 것만 남겼습니다. 그림자도 재질에 넣지 않고, 떠 있는 표면이 shadow 토큰으로 따로 정합니다.No refraction, blend mode, or value that changes with height. Safari and the macOS desktop app (WKWebView) cannot bend the backdrop, so only what every platform can draw remains, which keeps them looking the same. Shadow is not part of the material either: a floating surface sets it separately with the shadow token.

호스트에는 자기 테두리를 두지 않습니다. 유리 테두리가 가장자리입니다. 오류 상태(data-invalid)에서는 테두리가 위험 색으로 바뀝니다.The host draws no border of its own; the glass border is the edge. In the invalid state (data-invalid) the border turns to the danger color.

투명도 줄이기 설정이 켜져 있거나 backdrop-filter를 지원하지 않으면 흐림 대신 glass-fill-frost 채움을 쓰고 테두리는 그대로 둡니다.With reduced transparency enabled, or without backdrop-filter support, the surface uses the glass-fill-frost fill instead of blurring and keeps its border.

쓰는 법Usage

import { LiquidGlass } from "@horon-ai/react";

<div className="relative overflow-clip rounded-xl bg-glass-thick p-5">
  <LiquidGlass />
  <p className="relative">Content</p>
</div>