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

메시 그라디언트 흐름Mesh Gradient Flow

Mesh Gradient Flow

메시 그라디언트 흐름

다른 이름Also known as · Animated mesh gradient · Aurora gradient · Aurora Field · 오로라 배경

610

렌더 추가 예정CLIP COMING메시 그라디언트 흐름Mesh Gradient Flow정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 610. 메시 그라디언트 흐름 · Mesh Gradient Flow · none

부드러운 여러 색 덩어리가 천천히 위치와 크기를 바꾸며 서로 섞인다.Colors blend as soft centers drift and change size.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

차분한 생기와 유동적인 배경을 만든다.Creates a calm, fluid background.

언제 쓰나Use whenUSE WHEN

브랜드 팔레트를 배경에 펼칠 때
긴 대기 화면에 느린 움직임을 넣을 때

Brand introductions need a restrained palette in motion.
Long waiting screens need gentle background movement.

과용 주의AvoidAVOID

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

분류TagsTAGS

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

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

브랜드 소개 제목 뒤에 낮은 대비의 네 색 중심을 천천히 섞는다.

과용 · 나쁜 사례OVERUSE

색 대비를 크게 올려 본문 획이 배경에 묻힌다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	8s	4~16s	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
색 개수	4	3~6	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
왜곡	0.4	0.1~0.6	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.
중심 이동	0.15UV	0.05~0.2UV	1920x1080 기준. 왕복 또는 위상 계산을 절대 시간에 맞춘다.

GSAP

const state = { phase: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(state, { phase: Math.PI * 2, duration: 8, ease: 'none',
  onUpdate: () => { uniforms.uPhase.value = state.phase; renderer.render(scene, camera); } });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 메시 그라디언트 흐름을 구현해. 주기 8s, 색 개수 4, 왜곡 0.4, 중심 이동 0.15UV, 이징 none을 적용해. WebGL에서 움직이는 색 중심의 거리 가중치와 워프 좌표로 색을 혼합한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Mesh Gradient Flow on <target>. Use period 8s; color count 4; distortion 0.4; center travel 0.15UV; use none 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, 색 개수 4, 왜곡 0.4, 중심 이동 0.15UV, 이징 none을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Mesh Gradient Flow to the scene layer in <file>. Use period 8s; color count 4; distortion 0.4; center travel 0.15UV and none 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.