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

등고선 표면 흐름Topographic contour flow

Topographic contour flow

등고선 표면 흐름

458

렌더 추가 예정CLIP COMING등고선 표면 흐름Topographic contour flow정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 458. 등고선 표면 흐름 · Topographic contour flow · sine.inOut

변형되는 표면 위에 촘촘한 등고선이 그려지며 높이와 색이 천천히 흐르는 배경Dense contour lines draw across a deforming surface as height and color drift slowly.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

지형도처럼 정밀하고 유기적인 표면. 데이터 지형이나 추상 배경으로 읽힌다Reads as a precise, organic terrain map. It suits data landscapes and abstract technical backdrops.

언제 쓰나Use whenUSE WHEN

제목 뒤의 정적인 배경에 정밀하고 기술적인 질감을 줄 때
지형·밀도·분포 같은 주제의 도입 화면을 만들 때

Give a static title background a precise, technical texture.
Open a section about terrain, density or distribution.

과용 주의AvoidAVOID

등고선 불투명도 0.35 초과 금지(글자와 경쟁)
변형 진폭 0.3 초과 금지

분류TagsTAGS

질감·스타일Texture & Style 분위기Mood 브랜딩Branding 설명 영상Explainer video 발표Presentation 스크롤덱Scroll deck 난이도 중급Intermediatewebgl

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

어두운 남색 배경에 얇은 흰 등고선이 6초 주기로 천천히 부풀었다 가라앉고, 봉우리 쪽만 청록으로 물든다

과용 · 나쁜 사례OVERUSE

등고선이 굵고 진폭이 커서 물결치듯 출렁이거나, 선 색이 글자와 겹쳐 제목이 읽히지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	6s	4~10s	한 번 부풀었다 돌아오는 시간, 루프
등고선 간격	0.08	0.05~0.12	높이 값 기준
변형 진폭	0.2	0.1~0.3	높이 함수의 크기
선 두께	1.5px	1~2px	fwidth로 화면 픽셀 고정

GSAP

const u = { t: 0 };
tl.to(u, { t: Math.PI * 2, duration: 6, ease: 'none', repeat: 0, onUpdate: draw }, 0);
// GLSL: h = fbm(uv*2.0 + vec2(cos(t), sin(t))*0.3) * amp;
// line = 1.0 - smoothstep(0.0, fwidth(h)*1.5, abs(fract(h/gap - 0.5) - 0.5)*gap);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 화면 배경에 등고선 표면 흐름을 넣어줘. 어두운 남색 바탕에 두께 1.5px 흰 선을 불투명도 0.3으로 그리고, 등고선 간격 0.08, 변형 진폭 0.2로 6초 주기 루프가 되게 해. 봉우리 쪽만 청록으로 물들고 제목이 놓일 중앙 영역은 대비를 유지해. 시간은 paused 타임라인의 위상 값 하나로 구동해.

Add a topographic contour flow to the background of <target>. Draw 1.5 px white lines at 0.3 opacity on dark navy, contour gap 0.08, deformation amplitude 0.2, looping every 6 seconds. Tint only the peaks teal and keep contrast in the center where the title sits. Drive time with one phase value on a paused timeline.

Codex

<파일>의 배경 캔버스에 등고선 프래그먼트 셰이더를 추가해. 높이는 fbm(uv*2 + vec2(cos t, sin t)*0.3)*0.2, 등고선 간격 0.08, 선 두께는 fwidth 기준 1.5px, t는 6초에 0에서 2π로 선형 tween한다. 0초와 6초 프레임이 같은지, 3초 프레임에서 제목 영역 대비가 유지되는지 캡처로 확인해.

Add a contour fragment shader to the background canvas in <file>. Height = fbm(uv*2 + vec2(cos t, sin t)*0.3)*0.2, gap 0.08, line width 1.5 px via fwidth, and tween t linearly from 0 to 2π over 6 s. Capture 0 s and 6 s to confirm they match, and 3 s to confirm the title area keeps contrast.