V.056 · HOLLO · IRIDESCENT MESH SHOWCASEWEBGL · GRADIENT MESH · NOISE WARP · 4 HUESPHASE 1 / 4 · ANGLE 45deg · FPS 60 / 60
홀로
IRIDESCENT · 4 HUES
PHASE 1 / 4 · ANGLE 45deg · FPS 60 / 60
V.056 · 이리데슨트 홀로그래픽 메쉬 쇼케이스

각도가
색을 바꿉니다.

하나의 빛, 네 개의 결. WebGL 그라디언트 메쉬가 스크롤·포인터·시야각에 따라 진주광을 흘립니다. 틸·마젠타·라임·앰버가 동시에 mesh 위에 존재하되 색위상이 cycle 합니다.

도입 문의 →↓ 4-hue 시퀀스 보기
SCROLL TO PHASE · 0%
* 셰이더 live GLSL · 도식 §3 분해 · 4-hue 시퀀스 §2 · reduced-motion 시 정적 4-hue swap · 광민감성 보호 gradual transition mandatory

하나의 빛, 네 개의 결

스크롤이 진행될 때마다 같은 mesh 표면이 다른 hue 가 dominant 한 phase 로 cycle 합니다. 네 hue 모두 동시에 mesh 위에 존재하되, 색위상만 회전합니다.

01
틸 dominant (Teal)
uMeshHue1 = #2EBFA5
oklch(0.65 0.18 180deg)
phase = 0.0 · dominant 50%

초기 cool 진주광 상태. 틸이 mesh 의 50% 를 점유하고 나머지 세 hue 가 잔여로 흩어진다. 환경은 차분하고 깊다.

스크롤 0~25% · 4s phase · 60fps
02
마젠타 dominant (Magenta)
uMeshHue2 = #DD4F8C
oklch(0.65 0.18 0deg)
phase = 0.25 · dominant 50%

warm·cool 의 경계. 마젠타가 진주광의 pink-purple 영역을 점령한다. 보는 사람이 처음 색이 움직였다고 느끼는 순간.

스크롤 25~50% · 4s phase · 60fps
03
라임 dominant (Lime)
uMeshHue3 = #B5DA38
oklch(0.65 0.18 130deg)
phase = 0.5 · dominant 50%

4-hue 중 가장 밝은 결. 라임이 진주광의 acid green 영역을 점령한다. 화면이 가장 생기 있게 열리는 구간.

스크롤 50~75% · 4s phase · 60fps
04
앰버 dominant (Amber)
uMeshHue4 = #E89A3F
oklch(0.65 0.18 60deg)
phase = 0.75 · dominant 50%

warmth 의 정점. 앰버가 진주광의 warm gold 영역을 점령하고, mesh 는 잔잔한 지평선처럼 수렴한다. 그리고 다시 틸(phase 1)로 cycle 복귀.

스크롤 75~100% · 4s phase · 60fps
* 4-hue phase demo · 실제 셰이더는 GPU 4-hue simultaneous transit · reduced-motion 시 4-hue 정적 이미지 swap · 광민감성 보호 gradual transition only · 스크롤 구간 도입 시 맞춤 조정

셰이더 분해도 5 layer

이리데슨트 메쉬 한 frame 이 만들어지는 다섯 layer 의 분해. 메쉬 · 노이즈 워프 · 이리데슨스 셰이더 · 시야각 의존 · 환경맵. 모두 GPU 한 pass 에서 합산됩니다.

5 layer 분해 (phase 1 틸 dominant frame)PHASE 1 / 4 · ANGLE 45deg
01 · COMPOSITE · final framelayer 2-5 합산 결과
02 · MESH · gradient meshgradient mesh 정점 grid · 4-hue interpolation
03 · NOISE WARP · vertex warpperlin noise warp · uNoiseWarpAmp 0.12 · 12s loop
04 · IRIDESCENCE · viewing-angle hue shiftoklch hue shift by uViewingAngle · 4-hue interpolation
05 · ENV MAP · soft pearlescent basepearlescent environment · soft diffuse · no hard specular
5 layer composite → final frame · 1 GPU pass60fps target · all uniforms updated per frame
01

Composite · 최종 합산

다섯 layer 의 합산 결과. 한 GPU pass 안에서 mesh · noise warp · iridescence · viewing-angle · environment 가 더해진 뒤 frame buffer 로 출력된다. 60fps target.

02

Mesh · 그라디언트 메쉬

gradient mesh 정점 grid 위에서 4-hue 가 corner·edge·center 로 보간된다. 정점 수는 적되 보간은 부드럽다. mesh 자체는 정적 grid, 변하는 것은 4-hue 색위상.

03

Noise Warp · 노이즈 워프

perlin noise 가 mesh 정점 위치를 미세하게 warp 한다. 12s loop. 정적인 mesh 도 표면이 흐르는 듯한 정서를 얻는다. uNoiseWarpAmp 0.12, 광민감성 보호 상한.

04

Iridescence · 시야각 의존 hue shift

oklch hue 공간에서 시야각 vector 가 hue rotation 입력이 된다. uViewingAngle 0~360deg. 시야각에 따라 dominant hue 가 이동한다. 056 의 핵심 시그니처. 마우스 위치가 곧 가상 시야각.

05

Env Map · 진주광 환경 base

soft frosted environment cubemap. cool diffuse base 위에 조개·물방울 표면 같은 pearlescent caustic ridge 가 얹힌다. hard specular 없이 soft diffuse 만, no-plastic-gloss 분기 정당화에 정합.

* 5 layer 실시간 GPU 1 pass · GLSL source 일부 §FAQ #5 공개 · 라이선스에 따라 full source 제공 (§6 Pro / Enterprise) · mesh 는 reflection·refraction 을 단일 env layer 로 통합한 5-layer 구조

시야각·포인터 인터랙션

마우스 위치 = 가상 시야각 → mesh hue shift. 포인터 굴절 워블. 터치 디바이스 fallback. 입력 device 별 fallback 까지 모두 명시합니다.

시야각
시점이 색을 바꿉니다

마우스 위치가 가상 시야각 0~360deg 이 되고, 그 값이 mesh 의 iridescent hue shift 를 만든다. 셰이더 uniform uViewingAngle (float). 즉시 반응, no easing, 60fps update. §0 nav 의 angle toggle 과 마우스 위치 둘 다 입력으로 받는다.

uViewingAngle = atan2(mouseY, mouseX) * 180 / PI hueShift = oklch_rotate(uViewingAngle)
응답 지연 1 frame (16ms) · 60fps
포인터
굴절 워블

마우스 위치를 따라 mesh 표면이 아주 미세하게 distortion wobble 한다. 셰이더 uniform uPointerPosition (vec2). 즉시 반응, no easing, 60fps update. 워블 amp 0.04, 광민감성 보호를 위해 작은 진폭으로 통제.

uPointerPosition = vec2(mx, my) wobble = sin(uv + uPointerPosition * 0.04)
워블 amp 0.04 · 60fps · 광민감성 보호
터치
터치 fallback

터치 디바이스 · 일부 GPU · WebGL 대체 모드 시 자동 fallback. 4-hue 정적 이미지로 swap 하고, 터치 스와이프로 phase 를 전환한다. reduced-motion 활성 시와 동일한 동작.

if (!webgl || reducedMotion || isLowGPU) { swapImages(phase1..phase4) }
4-hue 정적 swap · 디바이스 자동 감지
* 3 인터랙션 셰이더 uniform 명세 · 터치 fallback 디바이스 자동 감지 · GPU 성능 정직 (일부 디바이스 framerate 낮음 사전 안내) · 광민감성 보호 amp 통제

진주광의 신뢰 5 룰

쇼케이스 아트피스의 product-trust 는 정량 지표가 아닌 신뢰 룰 그 자체입니다. 60fps · 접근성 · 디바이스 호환 · 광민감성 보호 · reduced-motion 다섯 축.

V.056 · TRUST STAMPPHASE 1 / 4
결
GRAIN · HUE · WAVE
056 · IRIDESCENT MESH · 5-LAYER ANATOMY · 4 HUES
쇼케이스 신뢰 인장oklch-controlled · pearlescent category
01

60fps 보장

mesh 셰이더는 60fps 를 target 으로 한다. requestAnimationFrame 기준이며, 디바이스가 60fps 에 미달하면 자동으로 4-hue 정적 swap 으로 전환한다. 실측 프레임 를 주장하지 않는다.

target 60 / actual ___
02

접근성 alt 텍스트

mesh canvas 는 aria-label 을 명시하고, 4-hue 각각에 4-frame description 을 단다. 스크린리더 친화적이며 '틸 dominant'·'마젠타 dominant' 처럼 hue 를 명시한 alt 텍스트가 필수다.

4-hue × 4-frame alt
03

디바이스 fallback

WebGL 대체 모드 · 일부 GPU · 저전력 모드를 자동 감지하면 4-hue 정적 이미지로 swap 한다. 디바이스 성능에 대해 정직하게 알린다.

자동 감지 · 4-hue fallback
04

광민감성 보호

4-hue 멀티컬러 mesh 는 gradual transition 만 허용한다. flicker·급격한 색 변화 없이 16s 이상의 cycle period 로 부드럽게 전이한다. 광민감성 광민감성·전정 민감 사용자를 보호한다.

gradual only · 16s cycle min
05

reduced-motion 대응

prefers-reduced-motion 이 활성이면 mesh 가 정지하고 4-hue 정적 이미지로 swap 된다. mesh phase 도 정적 1 frame 으로 고정된다. 광민감성·전정 장애 사용자에게 친화적이다.

prefers-reduced-motion 자동
* 5 신뢰 룰 · 도전자 sample 의 정량 trust 와 다른 카테고리 · 쇼케이스 art-piece track 의 신뢰는 신뢰 룰 자체가 trust signal

도입 플랜

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

Showcase Embed
₩290,000
* 1회 라이선스 · 약정 없음
단일 페이지 임베드 · 기본 4-hue · 진주광 mesh
  • ✓단일 페이지 임베드 권한
  • ✓4-hue 시퀀스 기본
  • ✓진주광 mesh + noise warp
  • ✓시야각·포인터 인터랙션
예: 브랜드 키노트 인트로 · 화장품 lookbook 단일 페이지 · 향수 캠페인 페이지
도입 문의
recommended
Pro
₩890,000
* 1회 라이선스 + 12개월 유지보수
5 페이지 임베드 · 커스텀 hue · 셰이더 파라미터 조정
  • ✓Showcase Embed 전부
  • ✓5 페이지 임베드 권한
  • ✓4-hue 커스텀 (사용자 hex)
  • ✓noise warp amp 조정
  • ✓셰이더 uniform 노출 (4개)
  • ✓12개월 유지보수
예: 패션 컬렉션 풀 시리즈 · 화장품 브랜드 사이트 풀 시퀀스 · 자동차 컨피겨레이터 멀티 페이지
시작하기
Enterprise
별도 협의
* 라이선스 형태 · 사용 범위 · 유지보수 협의
풀 셰이더 라이선스 · GLSL source · 무제한 사용
  • ✓Pro 전부
  • ✓풀 GLSL source 제공
  • ✓무제한 페이지 · 도메인
  • ✓셰이더 uniform 전체 노출
  • ✓커스텀 hue 추가 (5+)
  • ✓전담 유지보수
  • ✓우선 지원 (24h)
예: 게임 엔진 통합 · 인터랙티브 설치 미술 · 자동차 브랜드 풀 셰이더 자산 · 럭셔리 브랜드 디지털 캠페인
문의
* 가격 demo · 도입 시 맞춤 조정 · 라이선스 옵션 명시 · 약정 없음 · 환불 정책 §푸터 정책 링크

만든 사람과 사용처

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

만든 사람

각도가 색을 바꾼다는 한 문장을 두고 오래 매달렸습니다. 신기한 화면을 만들고 싶었던 건 아닙니다. 보는 자리가 조금만 달라져도 같은 빛이 다른 결로 읽힌다는 사실을, 화면 위에서 담담하게 보여 주고 싶었습니다. 그래서 60fps 도, 정적 fallback 도, 광민감성 보호도 과장 없이 지킵니다. 100% 를 약속하기보다, 디바이스가 버거우면 솔직하게 정적으로 내려놓는 쪽을 택했습니다.

— 홀로 셰이더 팀 ___ · ___-___-___ · iridescent ___년차
키노트

브랜드 키노트 인트로

예: 럭셔리 브랜드 신제품 발표 무대의 시작 30초 인트로 mesh. 무대 LED 로 송출되는 풀스크린 진주광. (demo 사례 · 실제 브랜드명 표기 X)

데모 · Pro 플랜 · 단일 도메인
화장품

화장품 lookbook

예: 시즌 화장품 컬렉션 lookbook 의 배경 mesh 가 제품 색상 lineup 을 받쳐 준다. (demo 사례 · 실제 브랜드명 표기 X)

데모 · Pro 플랜 · 5 페이지
패션

패션 컬렉션 페이지

예: 시즌 런웨이 디지털 페이지에서 진주광 mesh 가 시즌 무드를 시각화한다. (demo 사례 · 실제 브랜드·디자이너 표기 X)

데모 · Enterprise 플랜 · 풀 셰이더
자동차

자동차 컨피겨레이터

예: 색상 선택 인터페이스의 배경 mesh. 사용자가 차체 색을 고르면 mesh 가 그 hue 로 phase shift 한다. (demo 사례 · 실제 브랜드·모델 표기 X)

데모 · Enterprise 플랜 · 게임 엔진 통합
* 4 사용처 demo · 실제 도입 사례는 §6 도입 문의 후 별도 공유 · 실명·실 작품은 동의 범위 내 표기 · 검증된 사례만

운영 원칙

접근성 · 저전력 · 라이선스 · 디바이스 · 재사용 다섯 cell. 쇼케이스 art-piece 의 운영 범위입니다.

01

접근성

mesh canvas aria-label 명시 · 4-hue 별 4-frame alt 텍스트 mandatory · 스크린리더 친화 · 키보드 fallback (스페이스바 phase 전환).

4-hue × 4-frame alt
02

저전력 모드

battery saver API 감지 시 mesh 정지 → 정적 mode. 4-hue cycle 정지. 배터리 보호. 모바일 default 권장.

battery saver 자동 감지
03

라이선스

Showcase Embed · Pro · Enterprise 3 단계 · 사용 범위 명시 · GLSL source 공유는 Enterprise 만. 재배포·2차 가공은 별도 협의.

3 단계 · 사용 범위 명시
04

디바이스 fallback

WebGL 대체 모드 · 일부 GPU 자동 감지 후 4-hue 정적 이미지 swap. 디바이스 성능 정직. 실측 프레임 안내.

자동 감지 · 4-hue 정적
05

재사용 가이드

다른 프로젝트 재사용은 Pro 이상. 재배포 X · 2차 가공은 Enterprise 협의. 클로닝·역공학 X.

재배포 X · 협의 mandatory
* 5 cell · 핵심 운영 항목 · 자세한 약관은 §푸터 정책 링크 · 광민감성 보호는 §5 진주광 신뢰 룰로 이동

자주 묻는 질문

target 은 60fps 이며 requestAnimationFrame 기준입니다. 디바이스 성능에 따라 framerate 는 변동할 수 있고, 60fps 에 미달하면 자동으로 4-hue 정적 swap 으로 fallback 합니다. 실측 프레임을 안내합니다.
WebGL 대체 모드 · 일부 GPU 를 자동 감지한 뒤 4-hue 정적 이미지로 swap 합니다. 모든 디바이스에서 최소한 정적 fallback 은 보장됩니다.
mesh canvas 에 aria-label 을 명시하고 4-hue 별 4-frame alt 텍스트를 답니다. 스크린리더 친화적이며 키보드 fallback 을 제공합니다. 광민감성 보호를 위해 16s 이상 cycle 의 gradual transition 만 쓰고, prefers-reduced-motion 활성 시 자동으로 정적이 됩니다.
Pro 이상에서 가능합니다. 사용자 hex 로 4-hue 를 커스텀하며 (oklch L 0.65 C 0.18 통제 가이드 준수), Enterprise 는 5개 이상의 hue 추가도 가능합니다. 다만 네 hue 모두 oklch L 0.65 C 0.18 통제를 권장합니다. 광민감성 보호 정합.
Enterprise 플랜에서만 제공합니다. Pro 는 uniform 4개를 노출하고, 셰이더 코드 전체는 Enterprise 에 한합니다. 재배포 X · 2차 가공은 협의입니다.
Pro 이상에서 가능합니다. 사용 범위를 명시하며 재배포는 별도 협의, 2차 가공은 Enterprise 협의입니다. 클로닝·역공학은 허용하지 않습니다.
* 6 FAQ demo · 추가 문의는 §10 contact form

도입 문의

사용 목적 · 디바이스 타깃 · 예산 · 라이선스 옵션을 입력해 데모 검증 동작을 확인합니다.

도입 문의 후 진행

  • 1로컬 입력 검증 결과 확인
  • 2사용 사례 파악 · 라이선스 협의 · 4-hue 커스텀 협의 (Pro 이상)
  • 3셰이더 커스터마이즈 (Pro 이상) · 영업일 5-7일
  • 4임베드 가이드 + 셰이더 자산 전달
* 모든 단계 사용자 문의 후 1:1 진행 · 셰이더 자산은 라이선스 옵션에 따라 분기

우산 샘플 · 실제 업체가 아닙니다

폼 입력값은 이 탭 밖으로 저장되거나 전송되지 않습니다.