포털 리빌Portal Reveal
빛나는 구멍이 열리고 대상이 그 경계를 통과해 앞으로 나오는 움직임A glowing opening appears and the subject passes through its edge toward the viewer.
무엇을 전하나What it tells
- 새 기능이나 캐릭터를 등장시키는 순간을 극적으로 만들 때
- 장면 전환에서 문 하나를 통해 다른 공간으로 넘어갈 때
- 히어로 로고를 어둠 속에서 꺼내 보일 때
- A dramatic entrance for a new feature or character.
- Move to another space through a single doorway.
- Bring a hero logo out of darkness.
- 대상은 포털 경계 안쪽에서만 보이게 마스크한다
- bloom 강도 1.5 초과 금지
- 포털이 다 열린 뒤 대상이 나오기 시작한다
좋은 예와 나쁜 예Good and bad use
반경 0에서 300px까지 1.2초 동안 열린 포털의 경계에서 빛이 번지고, 대상이 z -300에서 0으로 나오며 경계를 통과한 부분만 보인다
포털이 열리기 전에 대상이 보이거나, 빛 번짐이 너무 커서 대상 윤곽을 가린다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 시간 | 1.2s | 0.9~1.8s | 열림과 통과 합산 |
| 포털 반경 | 0→300px | 220~420px | 원형 마스크 |
| 대상 z | -300→0 | -500~0 | 앞으로 나오는 거리 |
| 경계 빛 | bloom 1.0 | 0.6~1.5 | 경계 링 발광 |
| 이징 | power3.out | power2~expo | 열림 |
const p = { r: 0 };
tl.to(p, { r: 300, duration: 0.7, ease: 'power3.out', onUpdate: () => portal.style.clipPath = `circle(${p.r}px at 50% 50%)` }, 0);
tl.fromTo('.subject', { z: -300, scale: 0.6 }, { z: 0, scale: 1, duration: 0.9, ease: 'power3.out' }, 0.3);
tl.fromTo('.rim', { opacity: 0 }, { opacity: 1, duration: 0.4, yoyo: true, repeat: 1, ease: 'sine.inOut' }, 0.1);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
GSAP으로 <대상>이 포털에서 나오는 장면을 만들어 줘. 0초에 원형 clip-path 반경을 0에서 300px까지 0.7초 power3.out으로 열고, 0.3초부터 대상이 z -300, scale 0.6에서 z 0, scale 1로 0.9초 동안 나와. 경계 링은 0.1초부터 opacity 0에서 1로 올렸다 0.4초 뒤 낮춰 줘. paused 타임라인 하나로 seek 가능하게 해.
Use GSAP to make <target> emerge from a portal. At 0 seconds open a circular clip-path from radius 0 to 300px over 0.7 seconds with power3.out. From 0.3 seconds bring the subject from z -300, scale 0.6 to z 0, scale 1 over 0.9 seconds. Fade the rim glow up from 0.1 seconds and back down over 0.4 seconds. One paused, seekable timeline.
<파일>에 portal-reveal을 적용해. .portal의 clip-path circle 반경을 0→300px(0.7s, power3.out), .subject를 z -300→0, scale 0.6→1(position 0.3, 0.9s), .rim 발광은 position 0.1에 opacity 왕복. 0.05초는 포털이 거의 닫힘, 0.5초는 대상 일부만 보임, 1.5초는 대상이 완전히 앞에 있는지 캡처로 확인해.
Apply portal-reveal in <file>. Tween .portal clip-path circle radius 0 to 300px (0.7s, power3.out), .subject z -300 to 0 and scale 0.6 to 1 (position 0.3, 0.9s), and .rim opacity up and back from position 0.1. Capture 0.05s (portal nearly closed), 0.5s (subject partly visible) and 1.5s (subject fully in front).
도구별로 쓰기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
- heygen-com/hyperframesApache-2.0
- local/HyperFrames-skills (
claude-skill:hyperframes-animation/adapters/html-in-canvas-patterns.md)unknown