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

플리커 격자Flickering Grid

Flickering Grid

플리커 격자

다른 이름Also known as · 깜박이는 격자

601

렌더 추가 예정CLIP COMING플리커 격자Flickering Grid정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 601. 플리커 격자 · Flickering Grid · sine.inOut

격자의 일부 칸이나 점이 독립적으로 밝아지고 사라진다.Selected grid cells fade in and out at staggered times.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

활성화된 단위와 디지털 환경을 보여 준다.Suggests digital activity and independently active units.

언제 쓰나Use whenUSE WHEN

디지털 배경에 활동감을 넣을 때
단위별 활성 상태를 추상적으로 보여 줄 때

Add subtle activity to a digital background.
Represent independently active units abstractly.

과용 주의AvoidAVOID

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

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

서버 소개 배경에서 격자의 15%만 옅게 켠다.

과용 · 나쁜 사례OVERUSE

모든 칸을 강한 흰색으로 번갈아 켜 화면이 번쩍인다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
갱신 간격	100ms	80~250ms	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
격자 간격	24px	20~48px	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
활성 비율	0.15	0.05~0.2	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
페이드	500ms	300~900ms	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const cells = gsap.utils.toArray('.cell');
const tl = gsap.timeline({ paused: true });
cells.forEach((cell, i) => {
  if ((i * 37 % 100) < 15) tl.fromTo(cell, { opacity: 0 },
    { opacity: 0.3, duration: 0.5, repeat: 1, yoyo: true, ease: 'sine.inOut' }, (i % 10) * 0.1);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 플리커 격자을 구현해. 갱신 간격 100ms, 격자 간격 24px, 활성 비율 0.15, 페이드 500ms, 이징 sine.inOut을 적용해. canvas 시드가 고정된 칸별 밝기를 시간에 따라 갱신한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Flickering Grid on <target>. Use update interval 100ms; grid spacing 24px; active fraction 0.15; fade duration 500ms; 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

<파일>의 플리커 격자 장면 레이어에 적용해. 갱신 간격 100ms, 격자 간격 24px, 활성 비율 0.15, 페이드 500ms, 이징 sine.inOut을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Flickering Grid to the scene layer in <file>. Use update interval 100ms; grid spacing 24px; active fraction 0.15; fade duration 500ms 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.