CHAART. OS — Patterns

06 — Interaction Patterns

인터랙션 & 애니메이션 아카이브

--ease, --dur-hover, --radius-hover 등 토큰 기반 인터랙션 규칙을 라이브 데모로 확인합니다.

01 — Hover Micro-Radius

직각 철학: 모든 사각형은 기본 --radius: 0. 호버 시에만 --radius-hover(3px)가 적용되어 인터랙션 피드백을 줍니다.

R = 0 (기본)

border-radius: 0

R = 3px (hover)

border-radius: var(--radius-hover)

Pill 100px

50%

예외: --radius-pill / --radius-round

☞ 아래 카드를 호버해보세요 — --radius-hover 적용을 확인할 수 있습니다

TOKEN

--radius-hover

VALUE

3px

SCOPE

:hover / :focus only

02 — Easing Functions

두 가지 이징 커브: --ease(부드러운 감속, 기본 트랜지션)와 --ease-out-expo(빠른 출발, 히어로/패널 전환용).

--ease (기본)

cubic-bezier(0.22, 1, 0.36, 1)

--ease-out-expo

cubic-bezier(0.16, 1, 0.3, 1)

Linear (비교용)

linear

TOKEN

VALUE

--ease

cubic-bezier(0.22, 1, 0.36, 1) — 기본 트랜지션

--ease-out-expo

cubic-bezier(0.16, 1, 0.3, 1) — 히어로, 패널 전환

03 — Duration Scale

7단계 지속시간 스케일. --dur-fast(150ms)부터 --dur-xl(1000ms)까지, 용도에 맞는 토큰을 선택합니다.

--dur-fast

150ms

버튼 피드백, 토글

--dur-normal

200ms

색상 변화, 보더

--dur-slow

300ms

스크롤 리빌, 카드 진입

--dur-hover

380ms

호버 효과, --radius-hover

--dur-medium

500ms

패널 전환, 리사이즈

--dur-long

800ms

히어로 페이드, 섹션 진입

--dur-xl

1000ms

전체 페이지 전환

04 — Scale & Shadow Interactions

호버 시 scale(1.04), 클릭 시 scale(0.97), 그림자는 --shadow-sm에서 --shadow-lg로 승격됩니다.

■

Hover: Scale 1.04

transform: scale(1.04)

○

Click: Scale 0.97

transform: scale(0.97)

♦

Shadow Lift

--shadow-sm → --shadow-lg

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

05 — Keyframe Animations

시스템에 등록된 @keyframes 카탈로그. 진입(fadeUp, scaleIn), 루프(glow, livePulse), ERP 전용(badgeBreath, loading)으로 분류됩니다.

ENTRY ANIMATIONS

fadeUp

Y +40px → 0

fadeIn

opacity 0 → 1

scaleIn

scale 0.96 → 1

slideRight

X -24px → 0

LOOP ANIMATIONS

glow

--red-brand 그림자 맥동

livePulse

라이브 상태 표시등

scrollPulse

스크롤 유도 아이콘

spin

로딩 스피너

ERP ANIMATIONS (Dealer 전용)

badgeBreath

배지 미세 맥동

online-pulse

온라인 상태 그림자

스켈레톤 쉬머

modalSlideUp

모달 진입 효과

06 — Transition Recipes

자주 사용되는 토큰 조합. .transition-fast, .transition-normal, .transition-slow 유틸리티 클래스와 함께 사용합니다.

RECIPE

CSS

USE CASE

버튼 피드백

all var(--dur-fast) var(--ease)

.btn-*, 토글, 체크박스

카드 호버

all var(--dur-hover) var(--ease)

카드, 리스트 아이템

패널 전환

all var(--dur-medium) var(--ease-out-expo)

사이드바, 모달, 드로어

히어로 진입

opacity var(--dur-long), transform var(--dur-long) var(--ease)

히어로 섹션, 페이지 로드

색상 변화

background var(--dur-normal), color var(--dur-normal) var(--ease)

링크, 네비게이션 탭

UTILITY CLASSES (base.css)


            .transition-fast   { transition: all var(--dur-fast) var(--ease); }

            .transition-normal { transition: all var(--dur-normal) var(--ease); }

            .transition-slow   { transition: all var(--dur-slow) var(--ease); }

인터랙션 & 모션 라이브러리.

인터랙션 & 애니메이션 아카이브