눈이
떨립니다.

한 패턴, 네 가지 진동

스크롤이 진행될 때마다 같은 geometric primitive 가 다른 패턴으로 변형됩니다. 4 stage 모두 동일한 흑백 binary 와 동일한 vermillion focal: 변하는 것은 패턴 함수 하나뿐입니다.

--pattern-stage = 0.0
stripe(x) = sin(x · freq) > 0 ? 흑 : 백

--pattern-stage = 0.33
moire(x,y) = grid(x,y,0) XOR grid(x,y,12°)

--pattern-stage = 0.66
wave(r) = sin(r · freq + uTime) > 0 ? 흑 : 백

--pattern-stage = 1.0
radial(θ) = mod(θ, π/12) > π/24 ? 흑 : 백

* 4 stage · 실제 패턴은 SVG attribute update · reduced-motion 시 정적 프레임 swap (§ethics #4) · flash 0 · transition 1.5초 이상 점진 잠금 (§ethics #1) · 스크롤 구간 사용자 swap

패턴 분해도 6 layer

키네틱 옵아트 한 프레임이 만들어지는 6 layer 분해입니다. 베이스 그리드 · 위상 · 주파수 · 진폭 · 간섭 · 단일 vermillion 포인트. 모두 SVG 한 render pass 에서 합산됩니다.

* 6 layer mock · 실제 패턴은 SVG 1 pass · attribute source 부분 공개 (§FAQ) · 라이선스에 따라 full source 제공 (Pro / Enterprise) · layer 4 주파수 변조는 1.5초 점진 잠금

상호작용 명세

마우스 · 스크롤 · 터치 입력이 SVG attribute 로 변환됩니다. 입력 device 별 fallback 과 광민감성 보호까지 모두 명시합니다.

--phase-shift = mouseX / innerWidth
stripe(x) = sin(x · freq + phase · 2π)

--pattern-stage = clamp(scrollY / pageH, 0, 1)
pattern = blend(stage[i], stage[i+1], 1.5s ease)

if (!svg || reducedMotion || lowGPU) {
  swapImages(stage1..stage4)

if (acknowledged && !staticMode) {
  enablePatterns({ flash: 0, transition: 1500 })

* 4 인터랙션 mock · SVG attribute 명세 · 터치 fallback 디바이스 자동 감지 (§ethics #2) · 광민감성 보호 카드 4 (§ethics #1) · GPU 성능 정직 (§ethics #9)

패턴의 신뢰 5 룰

쇼케이스 art-piece 의 product-trust 는 정량 지표가 아니라 신뢰 룰 그 자체입니다. 60fps · 접근성 · 디바이스 · reduced-motion · 광민감성 5축.

* 5 신뢰 룰 · 도전자 sample 의 정량 trust 와 다른 카테고리 · 쇼케이스 graphic art-piece 의 신뢰는 신뢰 룰 자체가 trust signal · 룰 5 광민감성 보호는 graphic-pattern 카테고리 특수 강화

도입 플랜

쇼케이스 라이선스 3 단계 · 단일 페이지 임베드 · 5 페이지 + 커스텀 · 풀 패턴 라이선스. 약정 없음.

* 가격 mock · 사용자 swap · 라이선스 옵션 §ethics #7 명시 · 약정 없음 · 환불 정책은 푸터 정책 링크

만든 사람과 사용처

만든 사람의 한 마디와 4 가지 사용 사례 (mock).

* 4 사용처 mock · 실제 도입 사례는 도입 문의 후 별도 공유 · 실명·실 작품 표기 없음 · 합성 사례 없음 (§ethics #6)

운영 원칙

접근성 · 광민감성 · 라이선스 · 재사용 · 디바이스 fallback 5 cell. 쇼케이스 graphic art-piece 의 운영 책임.

* 5 cell · §ethics 11 항목 중 핵심 5 운영 cell · cell 2 광민감성 보호가 저전력 모드 자리를 대체 (graphic-pattern 카테고리 특수) · 자세한 약관은 푸터 정책 링크

자주 묻는 질문

* 6 FAQ mock · 추가 문의는 아래 도입 문의

도입 문의

사용 목적 · 디바이스 · 예산 · 라이선스 옵션 · 추가 메모. 영업일 1일 내 응답.