스크롤이 진행될 때마다 같은 mesh 표면이 다른 hue 가 dominant 한 phase 로 cycle 합니다. 네 hue 모두 동시에 mesh 위에 존재하되, 색위상만 회전합니다.
초기 cool 진주광 상태. 틸이 mesh 의 50% 를 점유하고 나머지 세 hue 가 잔여로 흩어진다. 환경은 차분하고 깊다.
warm·cool 의 경계. 마젠타가 진주광의 pink-purple 영역을 점령한다. 보는 사람이 처음 색이 움직였다고 느끼는 순간.
4-hue 중 가장 밝은 결. 라임이 진주광의 acid green 영역을 점령한다. 화면이 가장 생기 있게 열리는 구간.
warmth 의 정점. 앰버가 진주광의 warm gold 영역을 점령하고, mesh 는 잔잔한 지평선처럼 수렴한다. 그리고 다시 틸(phase 1)로 cycle 복귀.
이리데슨트 메쉬 한 frame 이 만들어지는 다섯 layer 의 분해. 메쉬 · 노이즈 워프 · 이리데슨스 셰이더 · 시야각 의존 · 환경맵. 모두 GPU 한 pass 에서 합산됩니다.
다섯 layer 의 합산 결과. 한 GPU pass 안에서 mesh · noise warp · iridescence · viewing-angle · environment 가 더해진 뒤 frame buffer 로 출력된다. 60fps target.
gradient mesh 정점 grid 위에서 4-hue 가 corner·edge·center 로 보간된다. 정점 수는 적되 보간은 부드럽다. mesh 자체는 정적 grid, 변하는 것은 4-hue 색위상.
perlin noise 가 mesh 정점 위치를 미세하게 warp 한다. 12s loop. 정적인 mesh 도 표면이 흐르는 듯한 정서를 얻는다. uNoiseWarpAmp 0.12, 광민감성 보호 상한.
oklch hue 공간에서 시야각 vector 가 hue rotation 입력이 된다. uViewingAngle 0~360deg. 시야각에 따라 dominant hue 가 이동한다. 056 의 핵심 시그니처. 마우스 위치가 곧 가상 시야각.
soft frosted environment cubemap. cool diffuse base 위에 조개·물방울 표면 같은 pearlescent caustic ridge 가 얹힌다. hard specular 없이 soft diffuse 만, no-plastic-gloss 분기 정당화에 정합.
마우스 위치 = 가상 시야각 → mesh hue shift. 포인터 굴절 워블. 터치 디바이스 fallback. 입력 device 별 fallback 까지 모두 명시합니다.
마우스 위치가 가상 시야각 0~360deg 이 되고, 그 값이 mesh 의 iridescent hue shift 를 만든다. 셰이더 uniform uViewingAngle (float). 즉시 반응, no easing, 60fps update. §0 nav 의 angle toggle 과 마우스 위치 둘 다 입력으로 받는다.
마우스 위치를 따라 mesh 표면이 아주 미세하게 distortion wobble 한다. 셰이더 uniform uPointerPosition (vec2). 즉시 반응, no easing, 60fps update. 워블 amp 0.04, 광민감성 보호를 위해 작은 진폭으로 통제.
터치 디바이스 · 저사양 GPU · WebGL 미지원 시 자동 fallback. 4-hue 정적 이미지로 swap 하고, 터치 스와이프로 phase 를 전환한다. reduced-motion 활성 시와 동일한 동작.
쇼케이스 아트피스의 product-trust 는 정량 지표가 아닌 신뢰 룰 그 자체입니다. 60fps · 접근성 · 디바이스 호환 · 광민감성 보호 · reduced-motion 다섯 축.
mesh 셰이더는 60fps 를 target 으로 한다. requestAnimationFrame 기준이며, 디바이스가 60fps 에 미달하면 자동으로 4-hue 정적 swap 으로 전환한다. 가짜 60fps 를 주장하지 않는다.
mesh canvas 는 aria-label 을 명시하고, 4-hue 각각에 4-frame description 을 단다. 스크린리더 친화적이며 '틸 dominant'·'마젠타 dominant' 처럼 hue 를 명시한 alt 텍스트가 필수다.
WebGL 미지원 · 저사양 GPU · 저전력 모드를 자동 감지하면 4-hue 정적 이미지로 swap 한다. 디바이스 성능에 대해 정직하게 알린다.
4-hue 멀티컬러 mesh 는 gradual transition 만 허용한다. flicker·급격한 색 변화 없이 16s 이상의 cycle period 로 부드럽게 전이한다. 광민감성 발작·전정 장애 사용자를 보호한다.
prefers-reduced-motion 이 활성이면 mesh 가 정지하고 4-hue 정적 이미지로 swap 된다. mesh phase 도 정적 1 frame 으로 고정된다. 광민감성·전정 장애 사용자에게 친화적이다.
쇼케이스 라이선스 3 단계 · 단일 페이지 임베드 · 5 페이지 + 커스텀 · 풀 셰이더 라이선스. 약정 없음.
만든 사람의 한 마디와 네 가지 사용 사례 (mock).
각도가 색을 바꾼다는 한 문장을 두고 오래 매달렸습니다. 신기한 화면을 만들고 싶었던 건 아닙니다. 보는 자리가 조금만 달라져도 같은 빛이 다른 결로 읽힌다는 사실을, 화면 위에서 담담하게 보여 주고 싶었습니다. 그래서 60fps 도, 정적 fallback 도, 광민감성 보호도 과장 없이 지킵니다. 100% 를 약속하기보다, 디바이스가 버거우면 솔직하게 정적으로 내려놓는 쪽을 택했습니다.
예: 럭셔리 브랜드 신제품 발표 무대의 시작 30초 인트로 mesh. 무대 LED 로 송출되는 풀스크린 진주광. (mock 사례 · 실제 브랜드명 표기 X)
예: 시즌 화장품 컬렉션 lookbook 의 배경 mesh 가 제품 색상 lineup 을 받쳐 준다. (mock 사례 · 실제 브랜드명 표기 X)
예: 시즌 런웨이 디지털 페이지에서 진주광 mesh 가 시즌 무드를 시각화한다. (mock 사례 · 실제 브랜드·디자이너 표기 X)
예: 색상 선택 인터페이스의 배경 mesh. 사용자가 차체 색을 고르면 mesh 가 그 hue 로 phase shift 한다. (mock 사례 · 실제 브랜드·모델 표기 X)
접근성 · 저전력 · 라이선스 · 디바이스 · 재사용 다섯 cell. 쇼케이스 art-piece 의 운영 책임입니다.
mesh canvas aria-label 명시 · 4-hue 별 4-frame alt 텍스트 mandatory · 스크린리더 친화 · 키보드 fallback (스페이스바 phase 전환).
battery saver API 감지 시 mesh 정지 → 정적 mode. 4-hue cycle 정지. 배터리 보호. 모바일 default 권장.
Showcase Embed · Pro · Enterprise 3 단계 · 사용 범위 명시 · GLSL source 공유는 Enterprise 만. 재배포·2차 가공은 별도 협의.
WebGL 미지원 · 저사양 GPU 자동 감지 후 4-hue 정적 이미지 swap. 디바이스 성능 정직. 가짜 60fps 주장 X.
다른 프로젝트 재사용은 Pro 이상. 재배포 X · 2차 가공은 Enterprise 협의. 클로닝·역공학 X.
사용 목적 · 디바이스 타깃 · 예산 · 라이선스 옵션 · 추가 메모. 영업일 1일 내 응답.