효과Effects / 입자·생성Generative / Nº 509

유성Shooting Stars

Shooting Stars

유성

다른 이름Also known as · Meteors and Shooting Stars · 유성과 별똥별 · Meteors · meteors · shooting-stars-and-stars-background

509

렌더 추가 예정CLIP COMING유성Shooting Stars정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 509. 유성 · Shooting Stars · power1.in

가는 빛 꼬리가 비스듬히 빠르게 스쳐 지나가고 사라지는 유성 효과Thin light trails streak diagonally and fade out like meteors.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

밤하늘과 우주 분위기, 순간적으로 스치는 에너지. 배경에 생기를 더한다Night sky and space atmosphere, a brief burst of energy that adds life to a background.

언제 쓰나Use whenUSE WHEN

우주·밤·AI 같은 주제의 배경에 작은 움직임을 줄 때
정지된 다크 배경이 심심할 때 드문드문 시선을 스치게 할 때

Add small motion to backgrounds themed on space, night or AI.
Give a static dark backdrop an occasional glance-catching moment.

과용 주의AvoidAVOID

동시에 보이는 유성 3개 초과 금지
본문 글자 영역 위로는 지나가지 않게 경로를 짠다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

어두운 배경에서 길이 100px 빛 꼬리가 1.4초 동안 -35도로 스치고 0.6초 간격으로 다음 유성이 지나간다

과용 · 나쁜 사례OVERUSE

유성이 한꺼번에 여러 개 지나가 배경이 산만해지거나, 꼬리가 굵고 밝아 본문 글자를 가린다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1.4s	1~2s	한 유성의 수명
꼬리 길이	100px	60~160px	1920px 기준
발사 간격	0.6s	0.4~1.5s	다음 유성 시작까지
속도	300px/s	200~500px/s	대각선 이동
각도	-35deg	-20~-50deg	고정, 난수 아님

GSAP

const stars = [[200, 80], [900, 40], [1500, 160]];
stars.forEach(([x, y], i) => {
  tl.fromTo(`.star${i}`, { x, y, opacity: 0 }, { x: x + 420, y: y + 300, duration: 1.4, ease: 'power1.in',
    keyframes: { opacity: [0, 1, 1, 0] } }, 0.2 + i * 0.6);
});
// .star: 100x2px linear-gradient(90deg, transparent, #fff); rotate(35deg)

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 어두운 배경에 유성 3개를 넣어줘. 각 유성은 길이 100px, 두께 2px 흰색 그라디언트 막대이고 -35도 방향으로 x 420px, y 300px 이동해. 지속 1.4초 power1.in, 시작은 0.2초부터 0.6초 간격으로, 불투명도는 0에서 1로 올랐다가 끝에서 0으로 사라져. 시작 좌표는 고정 배열로 쓰고 난수는 쓰지 마.

Add three shooting stars to the dark background of <target>. Each is a 100px by 2px white gradient bar traveling x 420px and y 300px at -35 degrees over 1.4 seconds with power1.in, starting at 0.2 seconds and 0.6 seconds apart, opacity rising to 1 then fading to 0. Use fixed start coordinates, no randomness.

Codex

<파일>의 .bg에 .star0~.star2를 추가하고 GSAP fromTo로 x+420, y+300, duration 1.4, ease power1.in, 시작 0.2+i*0.6을 건다. 시작 좌표는 [[200,80],[900,40],[1500,160]]으로 고정. 0.7초·1.3초·2.2초 캡처로 동시에 3개 넘게 보이지 않는지, 제목 영역을 지나가지 않는지 확인해.

Add .star0 to .star2 to .bg in <file> and animate with GSAP fromTo: x+420, y+300, duration 1.4, ease power1.in, start 0.2+i*0.6. Fixed start coordinates [[200,80],[900,40],[1500,160]]. Capture at 0.7 s, 1.3 s and 2.2 s to confirm no more than three are visible and none crosses the title area.