입자 수십만이
한 점에 모입니다.
컴퓨터가 그리는 라이브 그림. 240,000 입자가 GPU 위에서 매 frame 다시 계산됩니다. 추상 형상, 소용돌이, 격자, 폭발. 한 덩어리, 네 가지 형태.
* compute mock · 실제 GLSL source 도식 §3 분해 · 4-stage 시퀀스 §2 · reduced-motion 시 정적 4-frame fallback (§ethics #4) · 광민감성 보호 §ethics #11
한 덩어리, 네 가지 형태
스크롤이 진행될 때마다 같은 240,000 입자가 다른 셰이프로 재구성됩니다. 4 stage 모두 동일한 인스턴스 · 동일한 발광 그라디언트: 변하는 것은 target 셰이프 함수 하나입니다. 광민감성 보호로 전환에 1.5초 이상 시간을 둡니다.
추상 형상 (Sculptural)
초기 안정 상태. 플로킹과 노이즈가 미세하게 작동합니다. 240,000 입자가 한 추상 형상 안에서 천천히 호흡합니다.
소용돌이 (Vortex)
회전 force field 가 입자장 전체를 끌어들입니다. 중심으로 갈수록 발광 농도가 높아지고 white hotspot 이 catch 됩니다.
격자 (Lattice)
240,000 입자가 정확한 격자 그리드로 snap 합니다. 일부 stray particle 만 구조 밖을 떠다닙니다. 질서의 정점.
폭발 → 수렴 (Burst → Coalesce)
240,000 입자가 가운데 white hotspot 에서 폭발해 바깥으로 expanding spark. 스크롤 끝에서 다시 추상 형상으로 수렴하며 시퀀스가 loop 합니다.
* 4 stage mock · 실제 compute pass 는 GPU instanced drawing + 매 frame target morph · reduced-motion 시 4-frame 정적 이미지 swap (§ethics #4) · 광민감성 보호 stage 전환 1.5s 이상 (§ethics #11) · 스크롤 구간 사용자 swap
GPU 인스턴스 분해도 5 layer
240,000 입자 한 frame 이 만들어지는 5 layer 분해. 인스턴스 · 플로킹 룰 · 노이즈·커브·트레일 · 인력·척력 · 가산 발광: 모두 GPU compute + instanced drawing 한 pass 에서 합산됩니다.
인스턴스
240,000 입자가 GPU 위에서 instanced drawing 으로 한 draw call 에 batched. CPU 가 아닌 GPU vertex shader 가 매 frame 위치를 계산합니다. draw call overhead 가 없는 것이 60fps 의 비밀입니다.
플로킹 룰
3 boid 룰: 가까운 입자 회피(separation) · 평균 방향 정렬(alignment) · 평균 위치 끌림(cohesion). 240,000 입자가 서로 알아채며 군집을 형성하는 compute pass 입니다.
노이즈·커브·트레일
4D simplex curl noise field 가 입자장 전체에 미세 흐름을 부여합니다. 각 입자는 3-frame trail history 를 가지고 가산 blending 으로 bloom: 입자가 살아 있어 보이는 이유입니다.
인력·척력
마우스 위치가 force field origin. 가까이 가면 인력(입자가 끌려옴) · 멀리 떨어지면 척력(입자가 밀려남). 사용자가 입자장에 직접 손을 대는 인터랙션입니다.
가산 발광
각 입자는 위치 함수로 cyan↔violet 사이 한 hue 로 발광 · additive blending 으로 합산 · 군집이 한 점에 모이면 white hotspot 으로 수렴합니다. 가산 발광의 물리적 정합.
* 5-layer compute pass mock · 실제 GPU pass 분포 가변 · 60fps target · WebGL instanced drawing + compute shader · 광민감성 보호 (§5 cell 5)
인터랙션 — 손과 스크롤
입자장에 손을 대거나 스크롤하면 입자가 반응합니다. 마우스 인력·척력은 즉시(no easing) · 스크롤 셰이프 변환은 광민감성 보호로 1.5초 이상 transition · 터치는 4-stage 정적 fallback 입니다.
마우스 인력·척력 force field
마우스 위치가 force field origin 입니다. 가까이 가면 인력(radius 240px · 입자가 끌려옴) · 더 가까이 가면 척력으로 전환(radius 60px · 입자가 밀려남). transition 은 즉시(no easing) · GPU compute pass 가 매 frame 240,000 입자의 force 를 다시 계산합니다.
* 4-stage stills · 터치·reduced-motion·저전력·미지원 디바이스 모두 동일 fallback · §ethics #1·#4·#11
* 실제 인터랙션 규칙은 도입 시 1:1 설정 · 데모는 §10 신청 · 인터랙션 모두 마우스·스크롤·터치·키보드 4-axis 지원 mandatory (§ethics #1)
셰이더 신뢰
60fps · 접근성 alt · 디바이스 fallback · reduced-motion · 광민감성. 입자장이 신뢰를 입는 다섯 가지 약속입니다.
60fps target
instanced drawing + compute shader · 60fps mandatory · 30fps 이하 발생 시 자동으로 static 4-stage stills 로 fallback. 디바이스별 fps 측정 + 사용자 옵션 fps 제한을 제공합니다.
접근성 alt
4-stage 시각 묘사 alt 텍스트 mandatory. 스크린리더 사용자에게 stage 시각을 cinematic 하게 묘사합니다. 예: '입자 수십만이 cyan↔violet 발광 그라디언트로 추상 형상을 이룬 stage 1'. aria-live polite 로 stage 전환을 announce.
디바이스 fallback
저사양 구형 디바이스·WebGL 미지원·배터리 모드 감지 시 compute 실시간 X · 정적 4-stage 단일 이미지로 자동 전환. 사용자 명시 toggle 도 제공합니다.
reduced-motion
전정 장애·운동 민감 사용자에게는 즉시 정적 4-stage 이미지로 swap. prefers-reduced-motion: reduce 를 자동 감지하고 stage 전환 motion 을 0 으로 둡니다.
광민감성 보호
4-stage 셰이프 전환은 1.5초 이상 transition · 급격한 flash·strobe X · white hotspot pulse 는 2.4초 breath 로 통제 · 광민감성 발작 사용자를 보호합니다. WCAG 2.1 SC 2.3.1 정합.
도입 플랜
단일 페이지 임베드부터 5 페이지 Pro, 풀 셰이더 라이선스 Enterprise 까지. 모두 1회 라이선스 · 재사용 옵션은 별도입니다.
- ✓240,000 입자 compute shader
- ✓60fps + reduced-motion fallback
- ✓1년 라이선스
- ✓web 임베드 사용권
- ✓Embed 전부 + 5 페이지 사용권
- ✓커스텀 시드 (SEED 사용자 swap)
- ✓추가 셰이프 1 (5번째 모프)
- ✓3년 라이선스
- ✓web + 모바일 사용권
- ✓인스톨레이션 임베드
- ✓Pro 전부 + 무제한 페이지
- ✓풀 compute shader source 접근
- ✓커스텀 셰이프·플로킹 룰·노이즈 함수
- ✓영구 라이선스 + 재사용 옵션
- ✓전담 onboarding (영업일 5-7일)
- ✓광민감성 검수 인증
- ✓인스톨레이션 셋업 지원
* 가격 mock · 사용자 swap · 라이선스 옵션 별도 (재사용·source 접근·인스톨레이션 · §8 운영 원칙 #3) · 부가세 별도
만든 사람과 사용처
4 mock 사용처: 합성 사례 verbatim X · 모두 ‘데모’ 표기 (§8 운영 원칙 · §ethics #6).
브랜드 키노트 무대 정면 8m × 4.5m 디스플레이에 4-stage 시퀀스를 90초 loop. 추상 형상 → 소용돌이 → 격자 → 폭발 → 수렴으로 브랜드 메시지를 강조한 데모입니다.
컨퍼런스 opening 30초 인트로에 stage 2 소용돌이만 단일 사용. 240,000 입자 vortex 가 로고로 수렴하며 fade-in 하는 데모입니다.
미술관 dark room 6m × 6m × 8m 공간에 풀 셰이더 라이선스. 관람객이 마우스·터치로 입자장을 직접 조작하는, 1시간 체류 가능한 인스톨레이션 데모입니다.
게임 main menu 진입 12초 인트로 · stage 4 폭발 → 수렴이 게임 로고로 morph 하고 인게임 카메라 transition 으로 연결되는 데모입니다.
* 4 사용처 mock · 모두 ‘데모’ 표기 · 실제 도입 시 동의받은 사용처 후기만 게시 (§ethics #6) · 합성 사례 verbatim X
운영 원칙
접근성 · 저전력 · 라이선스 · 광민감성 · 재사용 5가지 약속. 자세한 약관은 푸터 정책 링크를 확인하세요.
접근성
4-stage alt 텍스트 · 스크린리더 aria-live · 키보드 Tab·Enter·화살표 stage 전환 · 색 대비 WCAG AA 통과 · 광민감성 protection 통합.
저전력
배터리 모드·저전력 디바이스 감지 시 compute 실시간 X · 4-stage 정적 stills swap. CPU·GPU 발열을 보호하고 사용자 toggle 도 제공합니다.
라이선스
셰이더·시드·재사용 라이선스 옵션 별도. 1회 라이선스가 default · 영구 라이선스는 Enterprise. source 접근은 Enterprise only · 의뢰자 명시 라이선스.
광민감성
4-stage 셰이프 전환 1.5초 이상 transition · flash·strobe X · white hotspot pulse 2.4초 breath 통제 · WCAG 2.1 SC 2.3.1 정합. 광민감성 발작 사용자 보호.
재사용
재사용 옵션은 라이선스 별도. Embed 단일 페이지·Pro 5 페이지 default · 이상 사용은 추가 라이선스 협의. 의뢰자 명시 라이선스 + 사용처·기간 명시 mandatory.
자주 묻는 질문
6 질문 · 도입 전 확인할 사항.
도입 문의
사용 목적·디바이스 타깃·예산·라이선스 옵션을 알려주시면 영업일 1일 내 답변드립니다. 인라인 form · 모달 X.