소리의 저음이나 고음 세기에 맞춰 도형의 크기와 빛의 세기가 함께 변한다Shape size and glow intensity follow the low or high frequency strength of the sound.
저음 밴드 값에 따라 로고가 최대 4%만 커지고 글로우가 30% 이하로 밝아진다. 30fps로 미리 뽑은 16밴드 배열을 사용한다
scale이 20% 이상 출렁여 로고가 튀고 글로우가 화면을 덮는다. 재생 중에 오디오를 실시간 분석해 seek가 안 된다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 프레임율 | 30fps | 24~60fps | 배열 샘플 간격 33ms |
| 주파수 밴드 | 16 | 8~32 | 저음은 밴드 0~2 |
| scale 변화 | 4% 이하 | 2~6% | 1+amp*0.04 |
| glow 변화 | 30% 이하 | 15~40% | opacity로 |
const amp = bassEnvelope; // [0..1] 배열, 30fps로 사전 추출
tl.to({}, { duration: amp.length / 30, ease: 'none', onUpdate() {
const a = amp[Math.min(amp.length - 1, Math.floor(this.time() * 30))];
gsap.set('.logo', { scale: 1 + a * 0.04 }); gsap.set('.glow', { opacity: 0.4 + a * 0.3 }); } }, 0);그대로 붙여 넣는다Paste as is
<대상> 로고가 저음에 반응하도록 만들어줘. 30fps로 미리 뽑아 둔 bass.json 배열(0~1)을 읽어 scale을 1+amp*0.04, 글로우 opacity를 0.4+amp*0.3으로 매 프레임 설정해. 재생 중 오디오 분석은 쓰지 말고 타임라인 time()으로 배열을 인덱싱해줘.
Make the logo in <target> react to bass. Read a pre-extracted bass.json (30fps, values 0 to 1) and set scale to 1+amp*0.04 and glow opacity to 0.4+amp*0.3 every frame. Do not analyze audio at playback; index the array with timeline time().
<파일>에 audio reactive pulse를 구현해. 입력은 bass.json(30fps, 0~1). scale = 1+amp*0.04, glow opacity = 0.4+amp*0.3. onUpdate에서 index = floor(time*30). 킥이 있는 시점 두 곳과 무음 시점 한 곳을 캡처해 킥에서만 scale이 커지는지, 최대 scale이 1.04를 넘지 않는지 확인해.
Implement audio reactive pulse in <file>. Input is bass.json (30fps, 0 to 1). scale = 1+amp*0.04, glow opacity = 0.4+amp*0.3, index = floor(time*30) in onUpdate. Capture two kick moments and one silent moment to verify scale grows only on kicks and never exceeds 1.04.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
claude-skill:hyperframes-animation/techniques.md)unknown