유리 표면

불투명도를 낮춰야 blur 가 보입니다. 불투명한 유리는 그냥 판입니다.

아래 표면들은 Card 안이 아니라 페이지 배경 위에 직접 놓았습니다. 유리 뒤에 블롭이 있어야 backdrop blur 가 할 일이 생깁니다. 하단 남색 틴트는 뺐습니다 — 위가 밝고 아래가 어두우면 면이 부푼 것으로 읽힙니다. 상단 하이라이트만 얕게 남겨 "빛이 스치는 판"이 되게 했습니다.

768px 이하에서는 blur 가 16px · 12px 로 줄고, prefers-reduced-motion 이면 orb 와 grain 애니메이션이 멈춥니다.

glass-surface

카드(Card). 페이지의 기본 판

blur · saturate: 28px · 1.6

glass-secondary

행 · 작은 판 · 보조 버튼 · Stats

blur · saturate: 22px · 1.5

glass-surface glass-opaque

blur 를 못 쓰는 곳. 불투명 카드

blur · saturate: 없음

glass-secondary glass-opaque

불투명 행

blur · saturate: 없음

glass-surface glass-specular

사광 한 줄기. 히어로 · 강조 판

blur · saturate: 28px · 1.6

glass-surface uyoo-highlight

왼쪽 위 광. 프로필 · 배지판

blur · saturate: 28px · 1.6

uyoo-noise

그레인을 판 위에 overlay. SVG 필터 #uyoo-grain 필요

bg-uyoo-grain

움직이는 노이즈 배경. SVG 필터 #uyoo-noise 필요

uyoo-orb

숨 쉬며 형태가 바뀌는 구체. 로그인 화면의 장식이나 빈 상태에 하나만 둡니다.

쓰는 법

<section className="glass-surface p-6">카드</section>
<div className="glass-secondary px-4 py-3">행</div>
<section className="glass-surface glass-opaque p-6">불투명 카드</section>
<section className="glass-surface glass-specular p-6">사광</section>
<div className="uyoo-orb size-24" />

클래스	blur · saturate	용도
glass-surface	28px · 1.6	카드(Card). 페이지의 기본 판
glass-secondary	22px · 1.5	행 · 작은 판 · 보조 버튼 · Stats
glass-surface glass-opaque	없음	blur 를 못 쓰는 곳. 불투명 카드
glass-secondary glass-opaque	없음	불투명 행
glass-surface glass-specular	28px · 1.6	사광 한 줄기. 히어로 · 강조 판
glass-surface uyoo-highlight	28px · 1.6	왼쪽 위 광. 프로필 · 배지판

유리 토큰

표면 클래스가 읽는 변수입니다.

--glass-primary

라이트: rgba(255,255,255,.34)
다크: rgba(255,255,255,.08)

glass-surface 바탕. 불투명도를 낮춰야 blur 가 보인다.

--glass-secondary

라이트: rgba(255,255,255,.5)
다크: rgba(255,255,255,.11)

glass-secondary 바탕

--glass-highlight

라이트: rgba(255,255,255,.7)
다크: rgba(255,255,255,.18)

glass-specular 사광

--glass-shadow

라이트: rgba(27,59,111,.08)
다크: rgba(0,0,0,.3)

shadow-uyoo 의 색

--glass-border

라이트: rgba(255,255,255,.55)
다크: rgba(255,255,255,.14)

유리 테두리(흰 선). 표 구분선에도 쓴다.

SVG 필터

uyoo-noise · bg-uyoo-grain 은 문서에 필터가 있어야 보입니다. 패키지는 참조만 합니다.

루트 layout 의 body 첫 자식

/* components.css 가 참조만 하는 필터. 문서에 한 번 렌더해 둔다. */
<svg width="0" height="0" aria-hidden="true" style={{ position: "absolute" }}>
  <filter id="uyoo-grain">
    <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <filter id="uyoo-noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch" />
    <feColorMatrix type="saturate" values="0" />
  </filter>
</svg>