노이즈를 다시 노이즈로 왜곡해 만든 유기적이고 끝없이 흐르는 셰이더 배경A shader background made by warping noise with more noise, organic and endlessly flowing.
짙은 남색과 청록 사이를 5초 동안 천천히 흐르는 배경 위에 흰 제목이 또렷하게 올라간다
시간 속도를 1.0 이상으로 올려 어지럽게 만들거나, 대비가 큰 색을 써 위 텍스트가 읽히지 않는다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 루프 길이 | 5000ms | 4000~8000ms | 시작과 끝이 이어지게 시간 원형화 |
| FBM 옥타브 | 5 | 3~6 | 높을수록 GPU 비용 증가 |
| 시간 속도 | 0.4 | 0.2~0.7 | uTime 증가 배율 |
| 워프 강도 | 4.0 | 2.0~6.0 | q와 r 두 단계 |
| 팔레트 | 3색 mix | 2~4색 | 텍스트 대비 우선 |
// fragment shader 핵심, uTime = progress*loopSeconds
float fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p*=2.;a*=.5;}return v;}
vec2 q=vec2(fbm(uv*3.),fbm(uv*3.+5.2));
vec2 r=vec2(fbm(uv*3.+4.*q+vec2(1.7,9.2)+.15*uTime),fbm(uv*3.+4.*q+vec2(8.3,2.8)+.126*uTime));
float f=fbm(uv*3.+4.*r);
gl_FragColor=vec4(mix(mix(c1,c2,f),c3,length(r)*.6),1.);그대로 붙여 넣는다Paste as is
<대상> 배경에 도메인 워핑 셰이더를 넣어줘. WebGL fragment shader에서 FBM 5옥타브 노이즈를 두 번 겹쳐 왜곡하고(warp 4.0), uTime은 진행값 x 5초 x 0.4로 구동해. 색은 남색, 청록, 흰빛 세 색 mix로 하고 텍스트 뒤 명도 폭은 0.25 이하. 루프는 5초에 이어지게 하고 Date.now와 Math.random은 쓰지 마.
Add a domain-warping shader background to <target>. In a WebGL fragment shader, warp 5-octave FBM noise with itself twice (warp strength 4.0), driving uTime as progress x 5s x 0.4. Mix three colors (navy, teal, near-white) and keep luminance range behind text at or below 0.25. Make it loop cleanly at 5s and avoid Date.now and Math.random.
<파일>에 domain-warping WebGL 배경을 구현해. FBM 5옥타브, warp 4.0, uTime=progress*5*0.4, 3색 팔레트, 해상도 1920x1080. 0초, 2.5초, 5초 프레임을 캡처해 0초와 5초가 같은 프레임인지(루프 이음), 위 텍스트 대비가 유지되는지 확인해. 셰이더 컴파일 오류 로그도 확인해.
Implement a domain-warping WebGL background in <file>: 5-octave FBM, warp 4.0, uTime=progress*5*0.4, 3-color palette, 1920x1080. Capture frames at 0s, 2.5s, and 5s to confirm 0s equals 5s (seamless loop) and that text contrast holds. Also check the console for shader compile errors.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
claude-skill:hyperframes-animation/techniques.md)unknownclaude-skill:music-to-video/references/motion-primitive-catalog.md)unknown