AWESOME AI MOTION
효과Effects / 강조·주의Emphasis / Nº 081

방사 속도선Radial Speed Lines

Radial Speed Lines
방사 속도선
다른 이름Also known as · Radial speed lines · radial-burst-lines · Radial flash · 방사형 섬광 · Flash
081
렌더 추가 예정CLIP COMING방사 속도선Radial Speed Lines정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 081. 방사 속도선 · Radial Speed Lines · power2.out

중심에서 바깥으로 향하는 선들이 짧게 뻗었다가 사라진다Lines from the center burst outward briefly and vanish.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
충격과 빠른 확대의 에너지를 한순간에 전한다. 만화의 집중선처럼 시선을 중심으로 모은다Delivers impact and rapid expansion in one moment. Like manga focus lines, it gathers the eye at the center.
언제 쓰나Use whenUSE WHEN
  • 핵심 단어나 제품이 화면에 꽝 하고 나타나는 순간을 강조할 때
  • 컷 전환 직후 시선을 중심으로 모으고 싶을 때
  • Emphasize the instant a key word or product slams onto the screen.
  • Pull attention to the center right after a cut.
과용 주의AvoidAVOID
  • 한 장면에 한 번만 쓴다
  • 지속 500ms 초과 금지(정보가 가려짐)
분류TagsTAGS
강조·주의Emphasis강조Emphasis주목 끌기Attention숏폼Short-form설명 영상Explainer video제품 시연Product demo난이도 기본Basicsvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

선 16개가 반경 60px에서 400px까지 300ms 동안 뻗고 마지막 100ms에 투명해진다. 중앙 제목은 같은 시점에 나타난다

과용 · 나쁜 사례OVERUSE

선을 100개 이상 촘촘히 넣고 1.5초 동안 유지해 배경이 지저분해진다. 매 장면마다 반복해 효과가 무뎌진다

03

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM기본DEFAULT범위RANGE메모NOTE
선 개수1612~24각도 22.5도 간격
반경 범위60~400px시작 40~80, 끝 350~5001920x1080 중심 기준
지속300ms200~400ms마지막 1/3에 페이드
선 두께3px2~4px끝으로 가늘어짐
GSAP
const N = 16;
for (let i = 0; i < N; i++) {
  const a = i / N * Math.PI * 2;
  tl.fromTo(`.ray${i}`, { attr: { x1: 60 * Math.cos(a), y1: 60 * Math.sin(a), x2: 60 * Math.cos(a), y2: 60 * Math.sin(a) }, opacity: 1 },
    { attr: { x1: 240 * Math.cos(a), y1: 240 * Math.sin(a), x2: 400 * Math.cos(a), y2: 400 * Math.sin(a) }, opacity: 0, duration: 0.3, ease: 'power2.out' }, 0.5);
}
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 제목이 나타나는 순간에 방사 속도선을 넣어줘. SVG 선 16개, 시작 반경 60px에서 끝 반경 400px까지 0.3초 동안 power2.out으로 뻗고 opacity가 1에서 0으로 사라지게 해. 시작 시각은 제목 등장과 같은 0.5초이고, 선 두께는 3px 흰색이야.

Add radial speed lines when the title in <target> appears. Use 16 SVG lines extending from radius 60px to 400px over 0.3 seconds with power2.out while opacity goes from 1 to 0. Start at 0.5 seconds with the title; lines are 3px white.

Codex

<파일>에 radial speed lines를 추가해. 선 16개, 중심 (960,540), 반경 60에서 400px, 0.3초, ease power2.out, 시작 0.5초. 0.5초, 0.65초, 0.8초를 캡처해 선이 대칭으로 균일하게 뻗는지, 0.8초에는 완전히 사라져 잔상이 없는지 확인해.

Add radial speed lines to <file>: 16 lines, center (960,540), radius 60 to 400px, 0.3s, ease power2.out, start at 0.5s. Capture at 0.5s, 0.65s and 0.8s and verify the lines extend symmetrically and uniformly and are fully gone by 0.8s with no residue.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
SVG 선 attr를 paused 타임라인으로 보간한다. 컷 프레임과 같은 시각에 시작해 첫 프레임에 이미 보이게 한다
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 중심 좌표, 선 개수, 반경 범위, 지속, 색을 싣는다
Scrolline DeckSCROLL SCRUB
진행률 구간 2~3%에 걸쳐 재생한다. scrub 중에는 짧은 효과가 스치기 쉬워 5% 폭으로 넓힌다
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
줌 플래시Zoom Flash
213
Nº 213줌 플래시Zoom FlashZoom Flash
어텐션 선 · Attention Lines
Nº 361어텐션 선Attention LinesAttention Lines
렌더 추가 예정CLIP COMING
화면 흔들림Screen Shake
237
Nº 237화면 흔들림Screen ShakeScreen Shake
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo