효과Effects / 반복·앰비언트Loop & Ambient / Nº 600

반딧불 점멸Firefly Twinkle

Firefly Twinkle

반딧불 점멸

600

렌더 추가 예정CLIP COMING반딧불 점멸Firefly Twinkle정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 600. 반딧불 점멸 · Firefly Twinkle · sine.inOut

떠다니는 작은 빛이 서로 다른 박자로 밝아졌다 어두워진다.Floating lights brighten and dim with independent rhythms.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

따뜻하고 살아 있는 야간 분위기를 만든다.Creates a warm, living nighttime atmosphere.

언제 쓰나Use whenUSE WHEN

따뜻한 야간 분위기를 만들 때
작은 빛으로 공간을 채울 때

Build a warm night scene.
Populate a space with small luminous accents.

과용 주의AvoidAVOID

본문과 겹치는 영역의 대비를 낮춘다.
동작 감소 설정에서는 정적인 대표 상태를 보여 준다.

분류TagsTAGS

반복·앰비언트Loop & Ambient 분위기Mood 브랜딩Branding 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 중급Intermediatecanvas

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

야간 장면의 작은 빛 45개가 각기 다른 위상으로 밝아진다.

과용 · 나쁜 사례OVERUSE

밝은 점을 동일 주기로 켜 자연스러운 분위기가 사라진다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
장면 지속	8s	6~16s	장면 길이. 8초마다 리셋하지 않고 절대 시간으로 점멸과 이동을 이어 간다.
점 수	45	20~70	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
이동 속도	8px/s	3~12px/s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
점멸 주기	1.7~3.6s	1.5~4s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
글로 반경	8px	4~12px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const state = { t: 0 };
const lights = gsap.utils.toArray('.firefly');
const tl = gsap.timeline({ paused: true });
tl.to(state, { t: 8, duration: 8, ease: 'none', onUpdate: () => {
  lights.forEach((el, i) => {
    const period = 1.7 + (i * 13 % 20) / 10;
    const phase = state.t * 2 * Math.PI / period + i * 2.4;
    gsap.set(el, { x: 8 * state.t, opacity: 0.1 + 0.7 * (1 + Math.sin(phase)) / 2 });
  });
} });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 반딧불 점멸을 구현해. 장면 지속 8s, 점 수 45, 이동 속도 8px/s, 점멸 주기 1.7~3.6s, 글로 반경 8px, 이징 sine.inOut을 적용해. canvas에서 시드별 위치와 밝기 위상으로 빛나는 점을 합성한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Firefly Twinkle on <target>. Use scene duration 8s; light count 45; drift speed 8px/s; twinkle period 1.7~3.6s; glow radius 8px; use sine.inOut easing. Drive the effect with a paused GSAP timeline and absolute time, and reproduce the same state on every seek without Math.random. Keep foreground text readable.

Codex

<파일>의 반딧불 점멸 장면 레이어에 적용해. 장면 지속 8s, 점 수 45, 이동 속도 8px/s, 점멸 주기 1.7~3.6s, 글로 반경 8px, 이징 sine.inOut을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Firefly Twinkle to the scene layer in <file>. Use scene duration 8s; light count 45; drift speed 8px/s; twinkle period 1.7~3.6s; glow radius 8px and sine.inOut easing. Capture at 0, 0.4, and 1.2 seconds to check the initial state, motion progression, and foreground readability; seek to each time again to verify identical output.