AWESOME AI MOTION
효과Effects / 입자·생성Generative / Nº 523

흐름장Flow Field

Flow Field
흐름장
다른 이름Also known as · 노이즈 흐름장 · bg-flow-field · Vector-field phase flow · 벡터장 흐름 · PhaseFlow · Noise Flow Field · Flow-field advection · Perlin flow field · Curl Noise Swirl · 컬 노이즈 소용돌이 · Divergence-free particle flow
523
도판Fig. 523. 흐름장 · Flow Field · linear
재생 속도Speed

많은 작은 입자와 잔상이 보이지 않는 흐름을 따라 곡선으로 이동하는 효과Many small particles and trails move along curves following an invisible flow.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
바람, 물, 데이터 흐름 같은 보이지 않는 힘을 시각화하고 우아한 생성 미술의 인상을 준다Visualizes invisible forces like wind, water, or data flow, with an elegant generative-art feel.
언제 쓰나Use whenUSE WHEN
  • 타이틀 배경이나 브랜드 영상에 유기적 생성 질감을 깔 때
  • 바람, 해류, 데이터 흐름의 방향성을 보여줄 때
  • To lay an organic generative texture behind titles or brand videos
  • To show the directionality of wind, currents, or data flow
과용 주의AvoidAVOID
  • 잔상 alpha 0.12 초과 금지(화면이 뭉침)
  • 시드 고정과 사전 계산 필수
분류TagsTAGS
입자·생성Generative분위기Mood브랜딩Branding설명Explain설명 영상Explainer video발표Presentation웹 UIWeb UI난이도 고급Advancedcanvas
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

입자 600개가 8초 동안 노이즈 흐름을 따라 곡선을 그리며 alpha 0.08의 잔상이 쌓여 흐름이 드러난다

과용 · 나쁜 사례OVERUSE

입자 수를 5000개로 늘려 화면이 하얗게 차거나, 매 실행마다 시드가 달라 결과가 다르다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
지속8000ms5000~12000ms흐름 누적
입자 수600개300~1200개시드 고정
noise scale0.0040.002~0.008작을수록 큰 곡선
잔상 alpha0.080.04~0.12배경 페이드
속도90px/s60~140px/s고정 스텝
GSAP
// 사전 계산: 고정 dt로 궤적 저장 후 시간 t까지 그린다
const traj=P.map(p=>{const pts=[];for(let s=0;s<480;s++){const a=noise(p.x*.004,p.y*.004)*12.566;p.x+=Math.cos(a)*1.5;p.y+=Math.sin(a)*1.5;pts.push([p.x,p.y]);}return pts;});
function draw(k){ctx.clearRect(0,0,1920,1080);traj.forEach(t=>{ctx.beginPath();t.slice(0,k).forEach(([x,y],i)=>i?ctx.lineTo(x,y):ctx.moveTo(x,y));ctx.stroke();});}
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<배경>에 흐름장을 만들어줘. canvas에서 입자 600개(시드 고정)를 노이즈 scale 0.004의 벡터장을 따라 480스텝 사전 계산해 궤적 배열로 저장하고, 8초 동안 진행값 k만큼 그려. 선은 흰색 alpha 0.35, 잔상 표현은 궤적 뒷부분을 alpha 0.08로 페이드. 상태 누적 없이 progress 순수 함수로 그려서 seek 가능하게 해.

Build a flow field background for <target>. On a canvas, precompute 480 steps of trajectories for 600 seeded particles along a noise vector field with scale 0.004, and draw them up to step k over 8s. Lines are white at alpha 0.35 with the trailing part fading to alpha 0.08. No state accumulation; draw as a pure function of progress so it is seekable.

Codex

<파일>에 flow-field 캔버스를 구현해. 입자 600개, noise scale 0.004, 8000ms, 480스텝 사전 계산, seed 고정. 0초, 4초, 8초를 캡처해 궤적이 늘어나며 곡선 흐름이 드러나는지, 같은 시점 재렌더가 동일한지, 화면이 하얗게 포화되지 않는지 확인해.

Implement a flow-field canvas in <file>: 600 particles, noise scale 0.004, 8000ms, 480 precomputed steps, fixed seed. Capture at 0s, 4s, and 8s to verify trajectories lengthen and curved flow emerges, re-rendering the same time is identical, and the frame does not saturate to white.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
궤적을 미리 계산해 저장하고 draw(k)에서 k 스텝까지 그린다. 이렇게 하면 seek해도 같다. 상태를 누적하는 방식은 seek에서 깨진다
ReelForgeBRIEF TO VIDEO
브리프에 particleCount, noiseScale, durationMs, seed를 싣는다. 사전 계산은 워커 시작 시 1회, 480스텝 x 600개
Scrolline DeckSCROLL SCRUB
진행률을 스텝 k에 선형 매핑한다. 궤적이 사전 계산되어 있으므로 되감기도 정확하다
06

잘 맞는 조합Pairs well with

렌더 추가 예정CLIP COMING
입자 힘장Particle Force Field
530
Nº 530입자 힘장Particle Force FieldParticle Force Field
렌더 추가 예정CLIP COMING
이상 끌개Strange Attractor Trails
542
Nº 542이상 끌개Strange Attractor TrailsStrange Attractor Trails
렌더 추가 예정CLIP COMING
입자 소용돌이Particle Vortex
508
Nº 508입자 소용돌이Particle VortexParticle Vortex
렌더 추가 예정CLIP COMING
보이드 군집Boid Flocking
513
Nº 513보이드 군집Boid FlockingBoid Flocking
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo