효과Effects / 질감·스타일Texture & Style / Nº 478

이동 광원Moving Light

Moving Light

이동 광원

다른 이름Also known as · Light re-shading · 이동 광원 재조명

478

렌더 추가 예정CLIP COMING이동 광원Moving Light정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 478. 이동 광원 · Moving Light · sine.inOut

광원 위치가 이동하며 물체의 밝은 면과 그림자 방향이 함께 바뀌는 효과A light source moves, changing the bright side of an object and the shadow direction together.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

물체의 입체감과 시간의 흐름을 보여주고 정적인 장면에 깊이를 준다Shows the object's volume and the passage of time, adding depth to a static scene.

언제 쓰나Use whenUSE WHEN

제품이나 카드에 조명이 지나가며 입체감을 강조할 때
해가 지나가는 시간 경과를 그림자 방향으로 표현할 때

To emphasize volume as light passes over a product or card
To express time passing through changing shadow direction

과용 주의AvoidAVOID

그림자 이동 방향은 광원과 반대
광원 중심 밝기 0.6 초과 금지

분류TagsTAGS

질감·스타일Texture & Style 강조Emphasis 분위기Mood 설명 영상Explainer video 제품 시연Product demo 발표Presentation 난이도 중급Intermediatecss

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

광원이 2초 동안 카드 왼쪽 -20%에서 오른쪽 120%로 이동하고 그림자가 20px 안에서 반대 방향으로 따라 움직인다

과용 · 나쁜 사례OVERUSE

광원만 움직이고 그림자 방향이 그대로여서 물리적으로 어색하거나, 광원 밝기가 커 글자가 하얗게 날아간다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 시간	2000ms	1200~3500ms	광원 이동
광원 x	-20%에서 120%	-30~130%	카드 폭 기준
그림자 이동	±20px	10~30px	광원 반대 방향
광원 반경	45%	30~60%	radial-gradient
밝기	0.45	0.3~0.6	overlay 또는 soft-light

GSAP

const s={x:-20};
tl.to(s,{x:120,duration:2,ease:'sine.inOut',onUpdate(){
 card.style.background=`radial-gradient(circle at ${s.x}% 30%,rgba(255,255,255,.45),transparent 45%),#1c2230`;
 card.style.boxShadow=`${(50-s.x)*.4}px 24px 40px rgba(0,0,0,.35)`;}},t);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<카드>에 이동 광원을 넣어줘. radial-gradient 광원(반경 45%, 밝기 0.45)이 x -20%에서 120%로 2초 동안 sine.inOut 이동하고, box-shadow는 (50-x)*0.4px 만큼 반대 방향으로 이동하게 해. y 오프셋은 24px, blur 40px 고정. CSS 변수 --lx를 gsap로 보간하고 paused 타임라인으로 구동해.

Add a moving light to <card>. A radial-gradient light (radius 45%, brightness 0.45) moves from x -20% to 120% over 2s with sine.inOut, and the box-shadow shifts (50-x)*0.4px in the opposite direction with a fixed 24px y offset and 40px blur. Tween the CSS variable --lx with GSAP on a paused timeline.

Codex

<파일>의 <카드>에 moving-light를 구현해. 광원 x -20%에서 120%, 2000ms sine.inOut, 반경 45%, 밝기 0.45, 그림자 ±20px 반대 방향. 0초, 1초, 2초를 캡처해 밝은 면과 그림자가 반대로 움직이는지, 글자가 하얗게 날아가지 않는지 확인해.

Implement moving-light on <card> in <file>: light x -20% to 120%, 2000ms sine.inOut, radius 45%, brightness 0.45, shadow +/-20px opposite. Capture at 0s, 1s, and 2s to verify the lit side and shadow move in opposite directions and text does not blow out to white.