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

앰비언트 글로우Ambient Glow

Ambient Glow

앰비언트 글로우

다른 이름Also known as · 배경 발광 호흡

592

렌더 추가 예정CLIP COMING앰비언트 글로우Ambient Glow정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 592. 앰비언트 글로우 · Ambient Glow · ease-in-out

표면 뒤의 부드러운 다색 빛이 천천히 밝아지고 위치가 변한다.A blurred multicolor light shifts and brightens behind a surface.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

따뜻한 공간감과 지속 활동을 만든다.Creates warm depth and a sense of continuing activity.

언제 쓰나Use whenUSE WHEN

제품 카드 뒤의 흐린 빛이 5초 동안 밝아지며 24px 왕복한다에서 지속 활동을 표시할 때
짧은 반복으로 따뜻한 공간감과 지속 활동을 만든다 때

Add a soft breathing backlight behind a product card.
Use a short repeating motion to communicate creates warm depth and a sense of continuing activity.

과용 주의AvoidAVOID

본문과 버튼까지 흐림을 적용해 조작 대상이 흐려진다 상황을 피한다
동작 감소 설정에서는 첫 프레임을 고정한다

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

제품 카드 뒤의 흐린 빛이 5초 동안 밝아지며 24px 왕복한다

과용 · 나쁜 사례OVERUSE

본문과 버튼까지 흐림을 적용해 조작 대상이 흐려진다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	5000ms	3750~7500ms	한 번의 반복에 걸리는 시간이다
흐림	48px	32~72px	빛 면에만 적용한다
불투명도	0.5에서 1	0.3~1	본문 대비를 먼저 확인한다
이동 거리	24px	12~40px	빛 중심을 작게 이동한다
이징	ease-in-out	linear \| ease-in-out	경로 이동은 등속, 맥동은 부드러운 왕복을 쓴다

GSAP

.fx { position:relative; isolation:isolate; }
.fx::before { content:""; position:absolute; inset:-24px; z-index:-1; background:linear-gradient(120deg,#0d9488,#818cf8); filter:blur(48px); animation:glow 5s ease-in-out infinite; }
@keyframes glow {
  0%,100% { opacity:.5; transform:translateX(-12px); }
  50% { opacity:1; transform:translateX(12px); }
}

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 앰비언트 글로우를 적용해. 주기 5000ms, 흐림 48px, 불투명도 0.5에서 1, 이동 거리 24px, 이징 ease-in-out로 구현해. 예시 코드의 요소 구조를 함께 만들고 하나의 paused 타임라인으로 seek 가능하게 연결해. 동작 감소 설정에서는 첫 프레임을 유지해.

Apply Ambient Glow to <target>. Use a 5-second cycle, 48px blur, opacity from 0.5 to 1, and 24px light travel, and ease-in-out easing. Include the required element structure and drive the effect with one paused, seekable timeline. Hold the first frame when reduced motion is enabled.

Codex

<파일>의 대기 표시 또는 배경 영역에 앰비언트 글로우를 적용해. 주기 5000ms, 흐림 48px, 불투명도 0.5에서 1, 이동 거리 24px, 이징 ease-in-out를 사용하고 반복 위상을 절대 시간에서 계산해. 0초, 2.5초, 5초를 캡처해 중간 변화와 첫 프레임으로의 연결을 확인해.

Apply Ambient Glow in the waiting indicator or background region of <file>. Use a 5-second cycle, 48px blur, opacity from 0.5 to 1, and 24px light travel, and ease-in-out easing; derive loop phase from absolute time. Capture at 0, 2.5, and 5 seconds to verify the intermediate change and the return to the starting frame.