한 덩어리, 네 가지 얼굴. WebGL 리퀴드 메탈 셰이더가 스크롤에 따라 형태를 바꿉니다. 무채 크롬, 차가운 환경 반사, 한 줄기 따뜻한 림 라이트.
스크롤이 진행될 때마다 같은 금속 덩어리가 다른 형태로 모핑됩니다. 4 stage 모두 동일한 mesh · 동일한 환경 반사: 변하는 것은 변환 함수 하나.
초기 안정 상태. 표면 흐름만 미세하게 작동하고, 환경 반사가 가장 명확하게 읽히는 stage. 무채 크롬이 차가운 환경맵 전체를 그대로 비춘다.
장력으로 mesh 가 길게 늘어나며 스스로를 한 번 감는다. 접히는 fold 안쪽에서 마젠타 림이 가장 강하게 catch 된다.
표면 진동. mesh 는 구와 거의 같되 법선맵이 ripple 주파수로 흔들린다. 마우스 굴절 리플이 가장 자연스럽게 얹히는 stage.
mesh 가 여러 개의 작은 구로 분열해 무중력으로 흩어진 뒤, 스크롤 끝에서 다시 하나의 차분한 orb 로 수렴한다. 시퀀스의 마지막 정적 frame.
* 4 stage mock: 실제 셰이더는 GPU mesh morph + 법선맵 shift. reduced-motion 시 4-frame 정적 이미지 swap (§ethics #4). 스크롤 구간 사용자 swap.
리퀴드 크롬 한 frame 이 만들어지는 6 layer 분해: mesh · 법선 · 환경맵 · 리플렉션 · 굴절 · 마젠타 림. 모두 GPU 한 pass 에서 합산.
6 layer 합산 결과. 한 GPU pass 안에서 mesh · 법선 · 환경맵 · 리플렉션 · 굴절 · 림 라이트가 합산되어 frame buffer 로 출력된다. 60fps target.
정점 위치가 uMeshStage uniform 에 따라 구 → 리본 → 파동 → 분열로 변환된다. mesh 자체의 정점 수는 동일하고, 변환 함수만 stage 별로 분기한다.
표면 법선맵이 8초 loop 으로 ripple 주파수를 따라 흐른다. mesh 가 정적이어도 표면이 흐르는 듯한 surface flow 정서를 만든다.
studio HDRI 큐브맵. 6 faces · cool blue-cyan 우세. 무채 크롬 표면이 환경을 그대로 반사하는 base layer 다.
Schlick Fresnel 근사. 90도 edge 에서 반사가 강조되어 mirror 정체성을 만든다. 굴절 IOR 은 1.0 에 가까워 거의 거울에 수렴한다.
단일 warm magenta rim 이 좌측 edge 에만 얹힌다. oklch L 0.55 C 0.21 통제. 무채 크롬 위 유일한 따뜻한 광원: neon 이 아닌 stage rim 광 카테고리.
* 6 layer mock · 실제 셰이더는 GPU 1 pass · GLSL source 일부 §FAQ 공개 · 라이선스에 따라 full source 제공 (§6 Pro / Enterprise)
마우스·스크롤·터치 입력이 셰이더 uniform 으로 변환됩니다. 입력 device 별 fallback 까지 모두 명시.
마우스 위치가 환경맵 UV offset 과 미세 굴절 distortion 으로 변환됩니다. 셰이더 uniform uMousePosition (vec2). 즉시 반응 · easing 없음 · 60fps update.
스크롤 진행이 uMeshStage uniform 에 비례합니다 (0..1). 4 stage 로 분기 (구 · 리본 · 파동 · 분열). GPU mesh 정점 변환 · 60fps 보장.
터치 디바이스 · 저사양 GPU · WebGL 미지원 시 자동 fallback. 4 stage 정적 이미지 swap. 터치 스와이프로 stage 전환. reduced-motion 활성과 동일 동작.
* 3 인터랙션 mock · 셰이더 uniform 명세 · 터치 fallback 디바이스 자동 감지 (§ethics #2) · 구형 디바이스 framerate 사전 안내 (§ethics #9)
쇼케이스 아트피스의 product-trust 는 정량 지표가 아닌 신뢰 룰 그 자체. 60fps · 접근성 · 디바이스 호환 · 다크모드 · reduced-motion 5축.
셰이더는 60fps target · requestAnimationFrame 기준. 디바이스가 60fps 미달 시 자동 fallback (4-frame 정적 swap). framerate 정직: 가짜 60fps 주장 X.
셰이더 canvas 는 aria-label 명시. 4 stage 별 4-frame description alt 텍스트 mandatory · 스크린리더 친화 (§ethics #1).
WebGL 미지원 · 저사양 GPU · 저전력 모드 자동 감지 후 4-frame 정적 이미지로 swap. 디바이스 성능 정직 (§ethics #2·#9).
showcase 톤은 cinematic dark void 정합. 라이트 모드 X · 시스템 light 선호 시 fallback 안내 cue.
prefers-reduced-motion 활성 시 셰이더 정지 → 4-frame 정적 이미지 swap. 광민감성·전정 장애 사용자 친화 (§ethics #4).
* 5 신뢰 룰 · 도전자 sample 의 정량 trust 와 다른 카테고리 · 쇼케이스 art-piece 의 신뢰는 ‘신뢰 룰’ 자체가 trust signal.
쇼케이스 라이선스 3 단계: 단일 페이지 임베드 · 5 페이지 + 커스텀 · 풀 셰이더 라이선스. 약정 없음.
단일 페이지 임베드 · 기본 4 stage · 무채 chrome
5 페이지 임베드 · 커스텀 컬러 · 셰이더 파라미터 조정
풀 셰이더 라이선스 · GLSL source · 무제한 사용
* 가격 mock · 사용자 swap · 라이선스 옵션 §ethics #7 명시 · 약정 없음 · 환불 정책 §푸터 정책 링크.
만든 사람의 한 마디 + 4 가지 사용 사례 (mock).
셰이더 한 줄, 한 줄을 직접 만지는 작은 팀입니다. 디자인이 어디까지 갈 수 있는지, 그 질문 하나만 들고 액체 금속 한 덩어리를 무대 위에 올렸습니다. 60fps 를 장담하지 않습니다. 디바이스가 못 따라오면 정직하게 정적 화면으로 내려갑니다. 화려함보다 담담하게, 다만 멀리.
예: 신제품 발표 무대 · 행사 시작 30초 인트로 셰이더 · 무대 LED 송출. mock 사례: 실제 브랜드명 verbatim X.
예: 투자자 미팅 첫 슬라이드 백그라운드 셰이더 · 회사 정체성 시각화. mock 사례: 실제 회사명 verbatim X.
예: 인터랙티브 설치 미술 · 관객 마우스·터치 입력에 반응하는 셰이더. mock 사례: 실제 미술관·작가명 verbatim X.
예: 게임 스플래시 · 로딩 진행률 시각화 셰이더 · 게임 엔진 통합. mock 사례: 실제 게임 verbatim X.
* 4 사용처 mock · 실제 도입 사례는 §6 도입 문의 후 별도 공유 · 실명·실 작품 verbatim X (§ethics #6).
접근성 · 디바이스 fallback · 저전력 · 라이선스 · 재사용 5 cell. 쇼케이스 art-piece 의 운영 책임.
셰이더 canvas aria-label 명시 · 4 stage 별 4-frame alt 텍스트 mandatory · 스크린리더 친화 · 키보드 fallback (스페이스바 stage 전환).
WebGL 미지원 · 저사양 GPU 자동 감지 후 4-frame 정적 이미지 swap. 디바이스 성능 정직: 가짜 60fps 주장 X.
battery saver API 감지 시 셰이더 정지 → 정적 mode. 배터리 보호 + 사용자 디바이스 책임. 모바일 default 권장.
Showcase Embed · Pro · Enterprise 3 단계 · §6 명시 · 사용 범위 명시 · GLSL source 공유는 Enterprise 만.
다른 프로젝트 재사용은 Pro 이상. 재배포 X · 2차 가공은 Enterprise 협의. 클로닝·역공학 X.
* 5 cell · §ethics 11 항목 중 핵심 5 항목 운영 cell · 자세한 약관은 §푸터 정책 링크.
* 6 FAQ mock · 추가 문의는 §10 contact form.
사용 목적·디바이스 타깃·예산·라이선스 옵션·추가 메모. 영업일 1일 내 응답.
* 셰이더는 실시간 WebGL raymarch · 도식 §3 분해 · 4-stage 시퀀스 §2 · reduced-motion / WebGL 미지원 시 정적 4-frame fallback (§ethics #4)