카메라 비행Camera Fly-through
카메라가 여러 위치와 바라보는 방향을 이어 공간 안을 이동한다. 물체나 터널 사이를 지나 다음 대상 앞에 안착한다.Move the camera through connected positions while directing its gaze toward the destination.
무엇을 전하나What it tells
- 떨어진 정보 카드를 공간으로 연결할 때
- 터널을 지나 다음 장면에 도착할 때
- Connect separated information cards through space.
- Travel through a tunnel to the next scene.
- 경로가 물체를 관통하지 않게 한다.
좋은 예와 나쁜 예Good and bad use
세 지점을 1.5초씩 이동하고 마지막 카드 앞에서 1초 멈춘다.
지나가는 카드의 본문을 이동 중에 읽게 한다.
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 구간 수 | 3 | 2~4 | 관찰 지점 수 |
| 구간 지속 | 1500ms | 1000~2000ms | 구간별 이동 시간 |
| FOV | 60deg | 45~70deg | 공간 시야 |
| 도착 홀드 | 1000ms | 600~1500ms | 목적지 읽기 |
const tl = gsap.timeline({paused:true}), s = {x:0,y:0,z:600};
camera.fov = 60; camera.updateProjectionMatrix();
const stops = [{x:300,y:100,z:400},{x:600,y:0,z:200},{x:900,y:0,z:600}];
stops.forEach((v,i)=>tl.to(s, {...v, duration:1.5, ease:'power2.inOut', onUpdate:()=>{
camera.position.set(s.x,s.y,s.z); camera.lookAt(900,0,0);
}}, i*1.5));
tl.to({}, {duration:1});에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<파일>의 <대상>에 카메라 비행를 적용해. WebGL에서 위치 경로와 lookAt 목표를 함께 보간하거나 CSS preserve-3d 월드에 역카메라 이동과 회전을 적용한다. 구간 수 3; 구간 지속 1500ms; FOV 60deg; 도착 홀드 1000ms. 이징은 power2.inOut로 하고 GSAP 코어 paused 타임라인으로 역방향 seek도 같은 상태를 만들게 해.
Apply Camera Fly-through to <target> in <file>. Animate camera position through three segments of 1500ms each with a 60-degree FOV, update lookAt toward the destination, and hold for 1000ms. Use power2.inOut and a paused GSAP core timeline that produces identical states when seeking backward.
<파일>의 대상 장면에 카메라 비행를 적용해. WebGL에서 위치 경로와 lookAt 목표를 함께 보간하거나 CSS preserve-3d 월드에 역카메라 이동과 회전을 적용한다. 구간 수 3; 구간 지속 1500ms; FOV 60deg; 도착 홀드 1000ms. 이징은 power2.inOut를 사용해. 0초·2.25초·4.5초 시점을 캡처하고 시작 상태, 중간 변화, 끝 상태가 정의와 일치하는지 확인해. 같은 시점을 역방향 seek해서도 같은 화면인지 검증해.
Apply Camera Fly-through to the target scene in <file>. Animate camera position through three segments of 1500ms each with a 60-degree FOV, update lookAt toward the destination, and hold for 1000ms. Use power2.inOut. Capture at 0, 2.25, and 4.5 seconds to verify the initial state, the defining intermediate change, and the final state. Seek backward to the same times and compare the images.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- heygen-com/hyperframesApache-2.0
- theatre-js/theatreApache-2.0 / AGPL-3.0 (구성요소별)
- codrops/InfiniteTubesunknown
- local/hyperframes-animation (
claude-skill:hyperframes-animation/rules/multi-phase-camera.md)unknown - theatre-js/theatreApache-2.0 / AGPL-3.0 (구성요소별)