85bd079d18
- 표현 엔진: 채널 34개(mouthRound 추가), 표정 28종·강도 곡선·반응 클립 26종·지문 cue, 미세표정 누설 - 발화층: 한글 자모 비짐 9종, TTS 오디오 선분석 정렬, 60ms 앞당김·모음 간 비닫힘 - 발화 동반층: 억양·강세에 맞춘 고개 표류·끄덕임·질문 갸웃·들숨·눈썹 박·시선 회피·쉼 깜빡임 - P1 서연 리노컷 렌더러: 원화 픽셀 입술 띠 변형, 하관 띠 변형(턱·코 들썩), 볼 불룩, 작은 크기 선 보정, 모티프·배경 색면 - /dev/avatar-lab, check:avatar-presets·check:avatar-lipsync, avatar-lab E2E 19개
83 lines
1.9 KiB
CSS
83 lines
1.9 KiB
CSS
/* =====================================================================
|
|
linocut-avatar.css — LinocutAvatar 렌더러 스타일. 결정문 §8.4.
|
|
배경 전환 1.8s·figure 페이드 0.2s는 reduced motion에서 즉시 전환한다.
|
|
===================================================================== */
|
|
|
|
.linocut-avatar {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.linocut-avatar__backdrop {
|
|
transition: fill 1.8s ease;
|
|
}
|
|
|
|
.linocut-avatar__figure {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.linocut-avatar__figure[data-ready="true"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.linocut-avatar__backdrop {
|
|
transition: none;
|
|
}
|
|
.linocut-avatar__figure {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* 결·주름 등 순수 스트로크 요소 — 불투명도는 채널값에 따라 JS가 직접 쓴다. */
|
|
.linocut-avatar__wrinkle,
|
|
.linocut-avatar__crease,
|
|
.linocut-avatar__lower-lid,
|
|
.linocut-avatar__tear-pool,
|
|
.linocut-avatar__iris-radial {
|
|
fill: none;
|
|
stroke-width: 1.2;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
/* 이마·팔자 주름 — 두께가 변하는 리본(채운 다각형). 불투명도는 JS가 직접 쓴다. */
|
|
.linocut-avatar__wrinkle-ribbon {
|
|
stroke: none;
|
|
}
|
|
|
|
.linocut-avatar__tear-flow {
|
|
stroke-width: 1;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 눈썹 몸체 위로 삐져나온 털 획 — 정적 불투명도(채널 무관). */
|
|
.linocut-avatar__brow-hair {
|
|
fill: none;
|
|
stroke-width: 1.3;
|
|
stroke-linecap: round;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* 아랫입술 아래 그늘 초승달 해칭(입체감). */
|
|
.linocut-avatar__lip-shadow-crescent {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* 벌어졌을 때(g>0.5) 아랫입술 쪽에 보이는 가는 보조 선. */
|
|
.linocut-avatar__mouth-line-secondary {
|
|
fill: none;
|
|
stroke-width: 1;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.linocut-avatar__pallor-color {
|
|
mix-blend-mode: color;
|
|
}
|
|
|
|
.linocut-avatar__grain {
|
|
mix-blend-mode: multiply;
|
|
opacity: 0.35;
|
|
pointer-events: none;
|
|
}
|