스크롤이 진행될 때마다 같은 도시가 다른 시점으로 바뀝니다. 4 막 모두 동일한 셰이더 base · 변하는 것은 카메라 위치·색온도·신호 phase 하나.
초기 시점. 골목 한가운데 카메라가 낮은 위치에서 젖은 도로의 반사를 바라본다. 청록이 도시 전체를 잠근다.
스크롤 0~25% 구간 · 60fps카메라가 옥상으로 dolly up. 도시 캐니언 위로 마젠타 빛이 구름을 아래에서 비춘다. 시점이 막 1 보다 +120m 상승.
스크롤 25~50% 구간 · 60fps카메라가 다시 거리로 내려와 위를 올려본다. 평행한 두 줄기 네온 strip 이 어두운 하늘 한 조각을 향해 수렴. 블룸이 가장 강한 막.
스크롤 50~75% 구간 · 60fps카메라가 광각으로 물러난다. 네온은 잔불처럼 잠든다. 안개가 차가운 청색으로 걷히고 도시 geometry 가 부드러워진다. 시퀀스의 마지막 정적 프레임.
스크롤 75~100% 구간 · 60fps* 4 막 mock · 실제 셰이더는 GPU camera dolly + 색온도 phase 변환 · reduced-motion 시 4 막 정적 이미지 swap · 광민감성 보호 1.5s lock
한 frame 이 만들어지는 layer 분해. 네온 글로우 · 블룸 · 색수차 · 빗방울 · 반사. 모두 GPU 한 pass 에서 합산.
5 layer 합산 결과. 한 GPU pass 에서 네온·블룸·색수차·비·반사 합산 후 frame buffer 출력. 60fps target. 광민감성 보호 1.5s lock.
시안 #29DFE6 · 마젠타 #E2378A 의 빈 네온 strip. 실제 글자·간판 없음 (시민 권리 보호). oklch L 0.82·0.55 통제 · cyberpunk neon sign 카테고리.
gaussian bloom 14px radial · 각 네온 strip 주변 볼류메트릭 헤이즈. cinematic noir 의 핵심 광학 cue. 깜빡임 없는 정적 블룸.
RGB 채널 offset ±0.5px · 스크롤 위치 tied. cinematic anamorphic 무드. reduced-motion 활성 시 0 offset · 시각 안정 우선.
vertical rain streak · 매우 미세 parallax · 60fps update. GPU particle system. reduced-motion 시 정적 프레임 · loop 정지.
젖은 도로 reflection shader · 네온 미러 · loop ambient. cinematic noir 의 정체성. reduced-motion 시 정적 미러 · loop 정지.
* 5 layer mock · 실제 셰이더는 GPU 1 pass · GLSL source 일부 공개 · 라이선스에 따라 full source 제공 (§6 Pro / Enterprise) · 광민감성 보호 mandatory
스크롤·마우스·터치 입력이 카메라 transform 으로 변환됩니다. 4 막 모두 동일한 city geometry · 변하는 것은 카메라 POV·색온도·신호 phase.
스크롤 진행 → 카메라 transform 4-막 변환 (NORTH-WEST · ROOFTOP · LOW-ANGLE · WIDE). 색온도 phase 동기 변환. 1600ms ease-in-out per act.
마우스 위치 → 카메라 yaw·pitch 미세 (±2°). 동시에 색수차 RGB offset ±0.5px shift. 즉시 반응 · no easing · 60fps update.
터치 디바이스 · 저사양 GPU · WebGL 미지원 시 자동 fallback. 4-막 정적 이미지 swap. 터치 스와이프로 막 전환. reduced-motion 활성과 동일 동작.
* 3 인터랙션 mock · 셰이더 uniform 명세 · 터치 fallback 디바이스 자동 감지 · 광민감성 보호 자동 감지 · GPU 성능 정직
쇼케이스 cinematic 시퀀스의 신뢰는 정량 지표가 아닌 신뢰 룰 그 자체. 60fps · 접근성 · 디바이스 호환 · reduced-motion · 광민감성 5축.
셰이더는 60fps target · requestAnimationFrame 기준 · 디바이스가 60fps 미달 시 자동 fallback (4-막 정적 swap). framerate 정직. 가짜 60fps 주장 X.
target 60 / actual ___셰이더 canvas 는 aria-label 명시 · 4 막 별 4-frame description alt 텍스트 mandatory · 스크린리더 친화.
4 막 × 4-frame altWebGL 미지원 · 저사양 GPU · 저전력 모드 자동 감지 후 4-막 정적 이미지로 swap. 디바이스 성능 정직.
자동 감지 · 4-막 fallbackprefers-reduced-motion 활성 시 셰이더 정지 → 4-막 정적 이미지 swap. 깜빡임·색수차·비 모두 정지.
prefers-reduced-motion 자동네온 깜빡임은 1.5초 이상 lock · 초당 3회 이상 급격한 점멸 없음 · 진입 전 광민감성 경고 dialog mandatory · 광민감성·전정 장애 사용자 친화.
flicker 1.5s lock · no rapid flash* 5 신뢰 룰 · 058 만의 광민감성 보호 룰 추가 · showcase track 분기 정당화 정합
쇼케이스 라이선스 3 단계 · 단일 페이지 임베드 · 5 페이지 + 커스텀 · 풀 셰이더 라이선스. 약정 없음.
단일 페이지 임베드 · 기본 4 막 · cyan-magenta neon 고정
5 페이지 임베드 · 4 막 phase 색 커스텀 · 셰이더 uniform 노출
풀 셰이더 라이선스 · GLSL source · 무제한 사용
* 가격 mock · 사용자 swap · 약정 없음 · 환불 정책 §푸터 정책 링크 · 광민감성 보호·시민 권리 ethics 모든 플랜 default
만든 사람의 한 마디 + 4 가지 사용 사례 (mock).
우리는 사이버펑크·누아르·시네마의 시각 언어를 GPU 위로 옮긴 작은 팀입니다. 비 내린 밤, 도시는 같은 거리를 두 번 보여줍니다. 한 번은 공중에, 한 번은 젖은 바닥에. 그 두 번째 도시를 셰이더로 짓는 게 야목의 일입니다. 100% 를 약속하지는 않습니다. 대신 깜빡임은 천천히, 비는 조용히, 시점은 정직하게 다룹니다.
예: cyberpunk 장르 영화 트레일러 첫 15초 인트로 · 4-막 시퀀스가 영화 톤을 setting. mock 사례: 실제 영화·스튜디오·작품명 사용 안 함.
예: cyberpunk RPG 게임 인트로 시네마틱 · 4-막 카메라 돌리 + 색온도 phase. mock 사례: 실제 게임·스튜디오·캐릭터명 사용 안 함.
예: cyberpunk·synthwave·neo-noir 톤 MV 비주얼 · LED 무대 백드롭 송출. mock 사례: 실제 아티스트·앨범·라벨명 사용 안 함.
예: 런웨이 영상 백드롭 셰이더 · 컬렉션 launch 캠페인 영상. mock 사례: 실제 브랜드·디자이너·모델명 사용 안 함.
* 4 사용처 mock · 실제 도입 사례는 도입 문의 후 별도 공유 · 실명·실 작품 사용 안 함 · 시민 권리 보호
접근성 · 광민감성 · 라이선스 · 실제 지명 X · 디바이스 fallback 5 cell. cinematic art-piece 와 시민 권리 보호 운영 책임.
셰이더 canvas aria-label 명시 · 4 막 별 4-frame alt 텍스트 mandatory · 스크린리더 친화 · 키보드 fallback (스페이스바 막 전환).
네온 깜빡임 1.5초 이상 lock · 초당 3회 이상 급격한 점멸 없음 · 진입 전 광민감성 경고 dialog mandatory · 광민감성·전정 장애 사용자 친화.
Embed · Pro · Enterprise 3 단계 · 사용 범위 명시 · GLSL source 공유는 Enterprise 만. 재배포·2차 가공은 별도 협의.
cyberpunk noir 가 실제 도시·상호·인물 representation 으로 misuse 되지 않도록 시민 권리 보호 mandatory. 읽을 수 있는 텍스트·실제 logo·landmark 절대 사용 안 함.
WebGL 미지원 · 저사양 GPU · 저전력 모드 자동 감지 후 4-막 정적 이미지 swap. 디바이스 성능 정직. 가짜 60fps 주장 X.
* 5 cell · 058 만의 광민감성 + 시민 권리 보호 cell 추가 · 자세한 약관은 푸터 정책 링크
네온 깜빡임은 1.5초 이상 lock · 초당 3회 이상 급격한 점멸 없음으로 보호되며, 진입 전 광민감성 경고 dialog 가 1회 노출됩니다. 정적 모드를 선택할 수 있고, prefers-reduced-motion 활성 시 정적 4-막 모드로 자동 전환됩니다.
target 은 60fps · requestAnimationFrame 기준입니다. 디바이스 성능에 따라 framerate 가 변동할 수 있으며, 60fps 미달 시 자동으로 4-막 정적 모드로 fallback 합니다. 가짜 60fps 를 주장하지 않습니다.
WebGL 미지원·저사양 GPU 를 자동 감지한 뒤 4-막 정적 이미지로 swap 합니다. 모든 디바이스에서 최소 정적 fallback 을 보장합니다.
실제 지명·간판·읽을 수 있는 텍스트·실제 logo·landmark 는 사용하지 않습니다. 시민 권리 보호 ethics 가 mandatory 이며, cyberpunk noir 는 추상 도시만 표현합니다.
3 단계입니다. Embed (단일 페이지) · Pro (5 페이지) · Enterprise (풀 GLSL source). 약정은 없으며 환불 정책은 푸터 정책 링크를 참고해 주세요.
Enterprise 플랜만 가능합니다. Pro 는 uniform 5 개를 노출하며, 셰이더 코드 전체는 Enterprise 만 제공합니다. 재배포는 불가하며 2차 가공은 협의합니다.
* 6 FAQ mock · 추가 문의는 아래 도입 문의 form
사용 목적·디바이스 타깃·예산·라이선스 옵션·추가 메모. 영업일 1일 내 응답.
* 모든 단계 사용자 문의 후 1:1 진행 · 셰이더 자산은 라이선스 옵션에 따라 분기 · 광민감성 보호 default 모든 플랜