주인공은 고정된 채 알림과 작업 카드가 더 빠르게 주변을 채운다.Cards arrive increasingly quickly around a stationary focal subject.
중앙 인물 주변에 카드 12개가 점점 빠르게 도착한다
카드가 인물 얼굴과 핵심 문장을 완전히 덮는다
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 카드 수 | 12 | 8~16 | 중앙 안전 영역 유지 |
| 누적 | 2500ms | 2000~4000ms | 도착 스케줄 길이 |
| 포위 정착 | 1200ms | 800~1600ms | 마지막 카드 정착 |
| 도착 간격 | 600~150ms | 600~150ms | 시간표를 2500ms 안으로 정규화 |
const cards = gsap.utils.toArray('.surround-card').slice(0,12);
const weights = cards.map((_,i)=>0.6-i*0.45/11);
const total = weights.reduce((a,b)=>a+b,0);
let at=0;
cards.forEach((card,i)=>{
const a=i*Math.PI/6;
tl.fromTo(card,{x:Math.cos(a)*900,y:Math.sin(a)*600,opacity:0},{x:Math.cos(a)*600,y:Math.sin(a)*360,opacity:1,duration:1.2,ease:'power3.out'},at);
at+=weights[i]/total*2.5;
});그대로 붙여 넣는다Paste as is
<파일>의 <대상>에 알림 포위을 적용한다. 카드 12개를 중앙에서 가로 600px, 세로 360px 타원에 놓고 도착 간격 600ms에서 150ms의 비율을 누적 2500ms로 정규화한다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.
Apply Overwhelm Surround to <target> in <file>. Place twelve cards on a 600px by 360px elliptical orbit and normalize arrival gaps with a 600ms to 150ms ratio to a 2500ms schedule. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.
<파일>에서 <대상>의 알림 포위 장면에 적용한다. 카드 12개를 중앙에서 가로 600px, 세로 360px 타원에 놓고 도착 간격 600ms에서 150ms의 비율을 누적 2500ms로 정규화한다. 0.93초·2.41초·3.90초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.
Implement Overwhelm Surround in the scene for <target> in <file>. Place twelve cards on a 600px by 360px elliptical orbit and normalize arrival gaps with a 600ms to 150ms ratio to a 2500ms schedule. Capture at 0.93s, 2.41s, 3.90s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
claude-skill:hyperframes-animation/blueprints/overwhelm-surround.md)unknown